Refonte de la home

[AlphonseJr]

Comme vu précédemment, nous allons refondra la home pour la rendre plus percutante et efficace pour améliorer notre taux de conversion sur nos signups. Je joins également des petites maquettes crades pour l'écran 1 & 2 comme discuté !

La home se décompose en trois écrans + un footer :

1/ Video player full page La vidéo doit se jouer pleine page. Le header doit être transparent comme sur https://mailtime.com/ pour renforcer le côté immersif. Je déplacerai également le bouton "Measures" comme le "Download" du Mailtime pour mettre l'accent dessus. (Sur mobile, reprendre le comportement de Mailtime qui est super cute)

Wording à utiliser sur la page :

MEASURE YOUR WATCH'S ACCURACY

• Measure now -

The most convenient way to measure the accuracy of your mechanical watch.

Pour ce qui est de la durée, de la qualité etc de la vidéo, je te laisse faire les tests et voir ça avec Vincent, vous me montrerez quand c'est intégré.

Nota : Pour l'affichage tablette et mobile, il faut utiliser une image fixe pour optimiser la performance.

2/ Output du produit

Il faut montrer montrer à l'utilisateur, ce qu'il va obtenir en utilisant notre produit, à savoir la mesure de sa montre donc on lui montre un exemple de résultat de la page résult que tu es en train de designer. Cette page prend les 4/5e pour faire un teasing du troisième écran.

Wording : WATCH ACCURACY. SIMPLE. ACCURATE

Toolwatch allows watch enthusiasts to easily track and measure the accuracy of their mechanical watch (ne pas tenir compte du wording dans la maquette, celui-ci sera plus intéressant pour le référencement)

3/ Ecran de contexte & légitimité

Le but ici est de se positionner comme un outil pour amateur d'horlogerie et de montrer qu'on est déjà utilisés par beaucoup de monde. Nous allons reprendre le concept de la mosaïque de Toggl avec un carré central qui affichera des stats telles que :

• XXX followers on Instagram
• XXX Seiko measured
• XXX Rolex measured
• XXX Omega measured +X.X sec per day average accuracy measured over the last week

Les résultats défileront à chaque refresh de la page.

Pour les 4 photos qui constitueront la mosaïque, je te laisse voir avec notre photographe, j'ai nommé Vincent, pour les specs etc voulues, je regarderai la sélection finale. L'écran est pleine page.

Footer :

On reprend ici le principe du footer actuel, en ajoutant avant une ligne avec nos parutions presses (street cred toussa toussa) comme sur mailtime :

• Fratello (logo: https://pbs.twimg.com/profile_images/458889866026053632/BUdYOM4Q_400x400.png) (article : www.fratellowatches.com/toolwatch-measure-the-accuracy-of-your-watch/)
• Wristreview (logo : http://wristreview.com/wp-content/uploads/2015/04/wr-logo-V21.png) (article : http://wristreview.com/?p=16698) (liste à compléter lorsqu'on aura plus de publications anglophones !)

Les logos seront centrés sur le "bandeau" pour ne pas faire trop vide contrairement à si ils avaient été alignés à gauche.

M E R C I !

[AlphonseJr]

Pour les 4 photos de la mosaïque, je pense que ça pourrait être une bonne idée de faire 2 photos de montres et 2 photos de l'interface, plusieurs users ayant réclamé d'avoir des screens du produit avant de signup.

[MathieuNls]

Les videos ne change pas lorsqu'elles sont finies. A la place, une video random parmis celle que j ai est loadee. Le changement de video etait trop saccade et on avait l impression d avoir casse la home. C est principalement lie aux poids des videos.

Aussi le - XXX followers on Instagram n apparait pas car il faut creer un compte dev instagram, et jouer avec l API officiel pour avoir le compte depuis un serveur. Ca prend pas mal de temps par rapport a l impact.

[AlphonseJr]

Comme vu tout à l'heure :

• Changer le nom du blog en "watch tips"
• Ajouter le "about"
• Adapter le comportement en mobile et tablette
• Les breakpoints entre les différents screens de la home cafouillent quand je refresh la page sur mon 24"

Sinon :

• Étonnamment la vidéo est apparue en saccadé sur mon Mac Book Pro retina
• L'affichage de la mosaïque n'est pas "centré" sur mes deux écrans (je t'ai mis un screen sur la drop sous Toolwatch\Dossier Mathieu\Bug affichage home , c'est sur mon 24" mais c'est encore moins équilibré sur mon MBPr)
• Quand on joue un peu avec le scroll ça fait des résultats chelous (t'as aussi un screen pour ça)
• Pour le wording du screen 2, je ferai tenir le "MECHANICAL WATCH LOVER'S FAVORITE TOOL." en une ligne avec le "IT'S INSANELY SIMPLE." juste en dessous
• J'ai réfléchi à l'histoire du scroll qui est bloqué et le soucis c'est que si on utilise l'ascenseur pour descendre sur la page on a plus l'animation et comme on a retiré l'infographie avec les trois steps, ce n'est plus très clair ! Il doit y avoir un autre moyen de triger l'animation comme sur http://appscho.com/ ou tu as des petits effets avec un scroll "libre". T'en penses quoi ?
• Pour tablette, est-ce qu'on peut quand même tenter la vidéo pour voir si ça passe ? Sinon photo comme avant. Par contre, je trouverai ça dommage de ne pas avoir les screen 2 et 3 + presse. Pas toi ?

Merci !!

[AlphonseJr]

Hello,

Il manque la suggestion de Vincent : dans l'écran 2, la range doit être entre -2 et +6 avec une décimale !

Merci :)

[MathieuNls]

@VS2000 , il faut que tu trouve un moyen de reduire les videos. Nous avons le droit a 300M chez heroku. Chacunes de tes videos pese + de 55M.

Ca le fait pas. Je ne peux deja pas en rajouter.

[AlphonseJr]

J'en profite pour dire qu'il y a effectivement un problème de poids car le temps de chargement de la vidéo sur la home est trop long, il y a donc de la marge pour optimiser ;)

[MathieuNls]

@VS2000 C est mieux pour les videos. Merci !

Mais y a encore une grosse marge de progression. Les autres sites sont autour de ~10Mb / minute, nous on est a ~10Mb/ 5 secs P e essayer de l uploader sur Youtube en qualite original, puis de la re dl en 480

Jss pas mal sur qu ils doivent compresser a mort

[AlphonseJr]

Je viens de voir que le comportement mobile / tablette n'est pas encore pris en compte, est-ce que tu veux que je crée un ticket séparé ?

[MathieuNls]

J ai teste avec iPhones 5/6, Samsung Galaxy S4 + iPad. Pour moi tout vas bien.

Qu est ce qu il faut de + ?

[AlphonseJr]

Quand j'ai regardé ce matin avec mon iPhone 5, on voyait la vidéo et tous les éléments se chevauchaient. Tu veux un screen ?

[MathieuNls]

La video c est normal. Vu qu elles sont "legeres" now j ai laisse. Par contre les elements qui se chevauchent non

[AlphonseJr]

Moi ça chevauche un peu entre le player le call to action, ça fait vraiment bizarre quand tu te choppes ça first thing en te connectant

[MathieuNls]

J'ai finalement reproduit votre erreur.... Ca le fait que sur iPhone a priori. Pas sur iPad. Je suis dessus. Mais je pense qu on va virer la video sur mobile, mm si elles sont plus legeres now.

[AlphonseJr]

Ok pour moi. Par contre, il faut faire attention à pas trop "apauvrir" la section mobile qui aurait moins de contenu et de contexte que le desktop sachant que ça représente tout de même 50% de notre trafic ;)

[MathieuNls]

Une solution serait de générer des .gifs en lieu et place des vidéos pour les mobiles.

[AlphonseJr]

Ca me va très bien ! D'ailleurs ça ne peut pas être envisagé pour desktop aussi pour régler les soucis de perf ? Est-ce que tu peux donner les specs à @VS2000 (avant qu'on le revende sur fiverr) Merci à vous deux !

[MathieuNls]

Bah des gifs de 20/30 sec qui font la mm résolution que les videos.

[AlphonseJr]

Au boulot @VS2000 ! Une claque sur ton cul et au boulot hahahaha

[VS2000]

je regarderai

[MathieuNls]

Plus j y pense. Plus des gifs ça serai fatale. Moins de soucis mobile, a priori moins lourd car ce n est qu un empilement d image sans son.

Check vidéo 2 GIF sur Google. Jss pas mal sur que y a des outils online pour faire ça.

On le fera p e sur la 1.2 pck j aurai autre chose a faire demain, mais c est une piste intéressante.

[AlphonseJr]

Ca c'est une mission pour @VS2000 !

[AlphonseJr]

Je chipotte pour un dernier truc : je trouve l'affichage du wording de l'écran 2 pas au niveau :

Il faudrait pas qu'il y ait un mot pour une seule ligne. Si ça peut aider, on peut éventuellement raccourcir en faisant : "Mechanical watches' favorite tool" ce qui donnerait :

Mechanical watches' favorite tool It's insan[...]

Ou alors si ça peut tenir en deux lignes : Mechanical watches' favorite tool It's .....

Merci !!

[MathieuNls]

ca depend de ta resolution. le probleme c est que tu voulais INSANELY SIMPLE sur un ligne. Du coup, y a un saut de ligne et en fonction de la resolution ca fait degeu

[AlphonseJr]

Dans ce cas, est-ce qu'on peut jouer avec la size ? Airbnb a 50% de caractères en plus et ça tient sur deux lignes :D

https://www.airbnb.fr/

[AlphonseJr]

Thanks !