Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refonte de la home #32

Closed
AlphonseJr opened this issue Jul 7, 2015 · 25 comments
Closed

Refonte de la home #32

AlphonseJr opened this issue Jul 7, 2015 · 25 comments
Assignees
@MathieuNls
Milestone
Tw 1.1

Comments

@AlphonseJr
Copy link
Collaborator

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 :

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 AlphonseJr added this to the Tw 2.0 milestone Jul 7, 2015
@AlphonseJr
Copy link
Collaborator Author

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
Copy link
Member

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
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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
Copy link
Member

@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
Copy link
Collaborator Author

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 added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Demo input now ranges from -2 to +6 with 10th of second precision. #32
24bfc83
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Change header menu. #32
e97da2f
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
watch tips is now in one line. #32
0d90daf
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Insanely Simple is now on a new line. #32
eff2212
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Fix mobile home-page. #32
b550942
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Fix mobile version of result page. #32
09c346c
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
Change mosaic pictures and add a special share img. #32
d671cf6
MathieuNls added a commit that referenced this issue Jul 7, 2015
@MathieuNls
New videos. #32
ad66a1e
@MathieuNls
Copy link
Member

@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
Copy link
Collaborator Author

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
Copy link
Member

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

Qu est ce qu il faut de + ?

@AlphonseJr
Copy link
Collaborator Author

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
Copy link
Member

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

@AlphonseJr
Copy link
Collaborator Author

img_2300

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 added a commit that referenced this issue Jul 8, 2015
@MathieuNls
remove play button on mobile. #32
60d4c24
MathieuNls added a commit that referenced this issue Jul 8, 2015
@MathieuNls
remove play button on mobile, fix brand rand outside range and autopl…
55b5f89 
…ay video for mobile devices that allow it #32
@MathieuNls
Copy link
Member

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
Copy link
Collaborator Author

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
Copy link
Member

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

@AlphonseJr
Copy link
Collaborator Author

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
Copy link
Member

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

@AlphonseJr
Copy link
Collaborator Author

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

@VS2000
Copy link
Collaborator

VS2000 commented Jul 8, 2015

je regarderai

@MathieuNls
Copy link
Member

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
Copy link
Collaborator Author

Ca c'est une mission pour @VS2000 !

MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Change the Omega video. #32
25f8d65
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Mobile devices now have pictures instead of videos + light refactoring.
f2a9efa 
#32
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
serve wristreview ourselves to prevent broken https warning. #32
d1d03be
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
change wristreview to 0777 mode #32
9db2a33
@AlphonseJr
Copy link
Collaborator Author

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

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
Copy link
Member

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
Copy link
Collaborator Author

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/

MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Remove the br. #32
63835e5
@AlphonseJr
Copy link
Collaborator Author

Thanks !

MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Home page. Video + header. #32
3f4bff0
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Home page. Small fixes for small screens #32
5954ef4
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Home page. Fix not logged measures button. Refs #32
09c1cf3
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Text to the right. Refs #32
302af5d
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Home page. Fix not logged measures button. Refs #32
c1fb322
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
third screen and footer on homepage. #32
a6b4589
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
fix resize issues Refs #32
366095d
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Add assests img #32
e90ac86
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Mobile version. #32
e4ef7cb
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
add scrips. #32
3dc8f7f
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
add pictures home. Refs #32
0cc6b60
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
AutoSlide + AutoReset of Demo screen + Title on mosaic screen. #32
1e2d485
MathieuNls added a commit that referenced this issue Jul 9, 2015
@MathieuNls
Fix links in Home Refs #32
dadff46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MathieuNls MathieuNls

Labels
None yet
Projects
None yet
Milestone
Tw 1.1
Development

No branches or pull requests
3 participants
@AlphonseJr @MathieuNls @VS2000