[Design][DEALS] Use a deal

[christophefondacci]

Lorsque l'utilisateur utilise un deal, une interaction est nécessaire entre:

• L'utilisateur
• Une personne travaillant dans le bar
• Nos serveurs

Le workflow est le suivant:

• L'utilisateur clique sur "utiliser ce deal"
• Il se voit éventuellement proposé de checkiner s'il n'est pas déjà checkiné dans ce lieu
• Un écran s'ouvre avec diverses informations et un gros bouton central (c'est cet écran que j'ai besoin que tu designes ici)
• L'utilisateur montre son téléphone au barman
• Le barman tape sur le bouton central, attend que le téléphone lui indique qu'il peut servir le verre
• Nos serveurs enregistrent la transaction et le téléphone affiche confirmation

J'ai donc besoin que tu designes l'écran central, il s'agit d'un plein écran (attention résolutions différentes tablettes / types d'iPhone, pars sur du 640x1136 et on centrera sur les autres terminaux).

Cet écran doit comporter:

• Le nom du bar (éventuellement avec petite thumb)
• Le nom de l'utilisateur (avec petite thumb)
• Une instruction en très grosse police, probablement quelque chose comme "Present to bartender!"
• Un gros bouton rond central, j'imaginais une animation pour le rendre "plus fun". Un peu à la shazam. Donc si tu peux me designer quelque chose d'asymétrique que je pourrais faire tourner (rotation centrée sur le bouton). J'imaginais des "calques" que je pourrais empiler pour former le bouton et ensuite faire tourner dans des directions ou vitesses différentes.
• Un texte en petite police en bas, il s'agira des conditions d'utilisation du type "Must be 21 or over to use this deal, restrictions apply, blah blah blah"

[richardratiman]

voici ma propo, on en parle ensemble car j'ai eu d'autres idées mais je préfère celle-ci

[christophefondacci]

A chaud:

Il faudrait ajouter 2 actions à cet écran:

• What is this? => destiné à la personne du bar qui pourrait se demander ce que c'est ou qui n'aurait pas été formé
• Report a problem => destiné à un utilisateur qui aurait un problème pour utiliser ce deal

Sinon il faudrait ajouter la "consigne" qui est de toucher le bouton central. Vu qu'il n'a pas de texte ni de titre, ce n'est pas évident. Soit une phrase d'intro: "Tap here to activate the deal" ou "Tap for free drink" sur le bouton.

[richardratiman]

oui je me suis dis également qu'il fallait surement un lien vers une "Aide". Donc on échange là-dessus tout à l'heure, mais je voudrais vraiment trouver des solutions pour ne pas surcharger cet écran très différent. Pour tout te dire le texte du bas gêne vraiment et on ne sait pas sa taille finale. Sinon tu vois d'autres moyen pour optimiser la place ? Idéalement cet écran reste super clean, on en reparle

[christophefondacci]

On peut virer le header du haut (Use a deal), le titre ne sert à rien ici. Les mentions légales sont un peu obligatoires donc pas le choix. Par contre elles peuvent être plus petites je pense.

[christophefondacci]

Besoin découpés:

• Chaque cercle
• Picto milieu
• Picto orange

[richardratiman]

nouvelle version suite retours

[richardratiman]

--- Typo Titre Bar => Source sans pro Reg 34px / coul #e56207 What is this? => Source sans pro Reg 28px Present to Bartender => Source sans pro Bold 48px Capital / coul #717171 Username => Source sans pro Reg 28px Mentions légales (footer) => Source sans pro Light 24px

[christophefondacci]

J'ai besoin des cercles découpés stp c'est le plus important pour moi

[richardratiman]

je réfléchissais à l'intégration, alors voilà comment je vois la chose (idéalement + soft)

est-ce que le gif est animé ? Si oui je découpe en 3 image de 400x400

• cercle0 pour le cercle de "fond" un peu plus foncé
• cercle1 le premier contour gris
• cercle2 le second contour orange

ok pour toi ? ou autre ?

[richardratiman]

c sur Drive

[christophefondacci]

ok merci je vais jouer avec ça

[richardratiman]

ok

[christophefondacci]

Est-ce que tous les textes sont de la même couleur #717171 ?

[richardratiman]

oui ils le sont