Cupcake Factory

Un jour en UX Design...

Une demande

Le projet de Cupcake Factory m’a directement plu. Cela ressemblait vraiment à une réelle demande, tout était à travailler. Il fallait analyser la demande, faire le maximum afin de répondre à leur besoin et à celui de leurs clients.

La demande d’Anna et Peter était de promouvoir et faire connaître leur salon de thé/cupcakes et leurs produits ainsi que de permettre à leur clientèle de passer commande en ligne et par téléphone.

Première étape en duo

Première étape en duo :
avec Julie Huygens, partenaire de toujours.

Une analyse concurentielle

Nous avons commencé par chercher ce qui avait déjà été fait dans le domaine des salons de thés et autres viennoiseries. Nous avons donc visité différents sites web et voilà ce qu’il en est ressorti d’intéressants:

Nous avons aussi noté quelques erreurs qu’on ne devait pas commettre, à savoir:

Contenu global : le tri à cartes

Suite à tout ça, nous avons écrit sur des petits papiers du contenu (de façon générale) que nous aimerions retrouver avant de les agencer afin de créer une première structure de site.

Photo du tri à carte du projet Cupcake Factory

C’est après ce tri à cartes que nous avons commencé à travailler chacun de notre côté.

Deuxième étape en solo

Deuxième étape en solo:
La longue route solitaire

Wireframe & recherche de Design

Grâce au tri à cartes, mettre en place le wireframe fut très facile. C’est à partir du moment où j’ai commencé le design que les choses se sont corsées. Mon premier réflexe a été de parcourir Dribble, pinternet ainsi qu'Awwwards et SiteInspire, afin de savoir ce qui se faisait en ce moment.

Mon idée était de me focaliser sur le Factory. Je m’explique. J’ai toujours aimé la décoration d’intérieur et à l’évocation de ce nom, j’imagine directement un espace « Industriel », du vieux bois, des vieilles ampoules, … cela accentuerait l’effet « matériaux de récupération » tout en restant cosy !

Cependant, retraduire cela en Web était une autre paire de manche.

Et je me suis un peu perdue.

Design, premier du nom

Mes premiers design ont évolué petit à petit...

Je n’ai pas poursuivi sur cette voie car pour moi, je m’éloignais d’une ligne directrice qui était l’accessibilité pour madame et monsieur tout-le-monde.

GIF présentant mes premiers design de Cupcake Factory

Design, la revanche

Je suis donc retournée sur Pinterest et, avec un peu d’aide, je me suis dit que j’allais m’inspirer d’un design tel que celui du redesign de la boulangerie Molino ou encore celui de G'nosh.

Il était question de placer tout comme sur une table, à l’aide de textures et d’éléments détourés. N’étant pas très douée pour le placement des ombres, ça n’a pas aidé au rendu final, à mon grand malheur.

Au niveau des couleurs, je ne voulais pas trop m’égarer vu que les textures allaient déjà apporter des notes de couleurs. J’ai donc utilisé du blanc et un rose framboise ( #ed4a6a ).

Point du vue typographie, après de longues hésitations, j’ai jeté mon dévolu sur Vidaloka pour mes gros titres de page, Crimson Text pour mes corps de textes et pour mes titres de sections, je voulais une écriture qui s’approchait de la manuscrite, j’ai donc choisi Indie Flower.

Différentes textures sont présentes sur mon site. Le fond est composé de latte de bois. Certaines sections du site représentent des ardoises et d’autres, des feuilles de papier. Sur les côtés, j’ai détouré des cupcakes, tasses et autres afin d’attiser la gourmandise et renforcer mon idée de la table et du goûter.

Accueil

Screen de l'accueil du site Cupcake Factory

Je voulais reprendre sur l’accueil un petit résumé de ce qui était disponible sur le site. À savoir, la carte, qui sommes-nous et la partie de commande de cupcakes et réservation. La dernière partie présentait l’emplacement du salon de thé ainsi que l’horaire.

Point de vue Design, j’ai voulu mettre en place, d’un côté une texture ardoise pour rappeler mon Industrial Design et la nourriture et de l’autre côté, des feuilles de papiers pour ce qui étaient moins liées directement à la nourriture ( donc accessibilité et qui sommes-nous )

La carte

Screen de la carte du site Cupcake Factory

J’avais dans l’idée de présenter la carte, comme une réelle carte de restaurant ou café, avec des illustrations en plus afin de réveiller les papilles. J’ai divisé la carte en deux parties, avec au dessus, les gâteaux et en dessous les boissons

Commander et réserver

Screen de la partie 'Commander et réserver' du site Cupcake Factory

Afin de satisfaire au mieux la demande, je voulais mettre au point un formulaire complet qui permettrait la création en ligne de cupacke personnalisé et la commande de cupcakes.

Il y aurait 6 étapes.

Pour ce faire, je me suis attelée à créer grâce à photoshop chaque goût disponible.

Qui sommes-nous ?

Screen de la partie "Qui sommes-nous?" du site Cupcake Factory

J’avais dans l’idée de présenter la carte, comme une réelle carte de restaurant ou café, avec des illustrations en plus afin de réveiller les papilles. J’ai divisé la carte en deux parties, avec au dessus, les gâteaux et en dessous les boissons.

Footer

Screen du footer du site Cupcake Factory

Je l’avoue, les footers sont ma bête noire. Je ne sais jamais comment les agencer. Pour Cupcake Factory, je suis partie sur un footer simple qui reprendrait les informations basiques et indispensables telles que l’adresse, le numéro de téléphone. J’y ai également ajouté les réseaux sociaux afin que les clients puissent y accéder à tout moment ainsi que les crédits ( parce qu’il faut bien les mettre quelque part ).

Dernier Round :
À la conquête du code

Dernier Round

À la conquête du code

Quelle surprise ce fut quand Arnaud annonça que ce serait une autre personne qui coderait notre design ! Le duo France-Julie se reforma à nouveau. Au début, j’étais déçue et un peu angoissée voir triste pour Julie parce que j’avais élaborée un formulaire un peu complexe qui risquait de prendre beaucoup de temps à mettre en place. Mais j’avais confiance en elle.

Le fait de coder le design de quelqu’un d’autre pousse vraiment à communiquer presque h24 avec cette personne. C’était très intéressant. On développe aussi une certaine affection envers ce design, on le materne et on l’aime comme notre propre bébé.

Cette expérience fut vraiment enrichissante et semblait se rapprocher d’une demande professionnelle réelle : devoir tout créer à partir d’un contenu brut, coder un design qui ne nous appartient pas, travailler en équipe ( restreinte, mais équipe quand même ! ). Bref, presque que du bonheur. :)

Découvrir Cupcake Factory