30 jours design challenge.

période

03 Mai 2024 – en cours (prévu 03 Juin)

Rôle

UX/UI designer

Introduction

Je me suis lancé dans un challenge de design de 30 jours.

 

Objectifs :

  • Apprendre à designer des apps mobiles pour iOS et Android.
  • Me familiariser et comprendre les principaux flux des apps (Onboarding, Inscription, recherche, Filtre, Donner un avis, etc….)
  • Améliorer mon UI.
  • Pratiquer sur Figma.

Suivez moi sur Linkedin pour ne rien manqué ! (lien)

Jour 1

Prototype : Commander une carte Revolut.

03/05/2024

Pour le premier jour de ce challenge, j’ai reproduit un flow de l’app Revolut : « Commander une carte Revolut ».
Vous pouvez retrouvez les wireframes des meilleurs produits sur le marché sur Mobbin.com. C’est une mine d’or !

Jour 2

Prototype: Présentation de la page produit de Too Good To Go

04/05/2024

Je vous présente une reproduction d’une app que j’apprécie particulièrement: Too Good To Go.
J’ai essayé de reproduire l’animation du défilement de leur page produit (pas facile 😅).

Jour 3

Redesign : App mobile de services à domicile

05/05/2024

Les deux premiers jours de ce challenge ont été seulement de la reproduction de designs.

Mais malgré cela, j’ai beaucoup appris. Notamment au niveau de la hiérarchie de l’information, des espaces, de l’animation et de la cohérence graphique.

Pour ce troisième jour, j’ai donc décidé d’appliquer tout ça.

Voici une refonte d’une page d’une app de service à domicile entre particuliers. (https://lnkd.in/eBB-4fHc)

Modifications:

1.Navigation:

J’ai décidé de retirer le menu « home » car :

  • Je suppose que les utilisateurs vont sur l’app pour rechercher un prestataire. Cette page ajoute une étape dès l’arrivée sur l’app.
  • Elle n’apporte pas une réelle valeur ajoutée, selon moi.
  • Cette page est, je pense, plus appropriée dans les apps e-commerce qui ont beaucoup plus de choix de produits.

J’ai également ajouté un menu « Message » car je suppose que l’utilisateur aimerait échanger avec le prestataire avant de s’engager.

2.La page que j’ai décidé de designer est celle de « Recherche ».

  • Ce sera la première page que l’utilisateur verra dès son arrivée sur l’app.
  • Ajout d’une option « filtre » pour faciliter la recherche.
  • J’ai rendu les menus « Catégories » plus minimalistes de sorte qu’ils prennent moins de place sur l’écran (je me suis inspiré de AirBNB 🙂 )

    Carte prestataire (inspirée de Malt) :

  1. ajout d’une image du prestataire pour améliorer la confiance chez l’utilisateur de l’app lors de sa recherche
  2. Mise en avant du taux horaire de chaque prestataire, car c’est un élément important lors du choix
  3. ajout des spécialités des prestataires
  4. ajout d’une option « favoris » si l’utilisateur trouve le profil intéressant.


Ce que j’ai retenu :
Sur une app en général, l’architecture de l’information est rythmée par des espaces de multiples de 4px ou 8px. (ex : les espaces latéraux sont généralement de 16px). Le respect de cette « règle » permet de lire clairement l’information. Ce qui n’est pas le cas dans la version originale.

Jour 4

Prototype: Fonctionnalité de filtre de l'app SkillShare

06/05/2024

Aujourd’hui, reproduction de la fonctionnalité de filtrage de Skillshare. 🙂

La fonctionnalité « Filtre » est importante dans les app. Elle permet de facilité la recherche, très utile lorsqu’il y a beaucoup de produits proposés.
En mettant en place ce genre de fonctionnalité, cela nous pousse à se demander quels sont les 1er critères que les utilisateurs regarde pour choisir un produit parmis tant d’autres.

——

En réfléchissant, je ne me suis pas fixer d’objectif précis pour ce challenge.

Chaque jour, je passe toujours beaucoup de temps à me demander qu’est-ce que j’allais bien pouvoir designer.

Je pense que c’est important de m’en donner afin de ne pas trop me disperser.

Depuis le début, je me suis contenter de designer des app mobiles.

Je pense que je vais focaliser le challenge sur ça car je sens qu’il reste encore beaucoup de choses à apprendre.

Objectifs:
– Apprendre à designer des apps mobile pour IOS et android.
– Me familiariser et comprendre les principales flows des apps (Onboarding, Inscription, recherche, Filtre, Donner un avis etc….)
– Améliorer mon UI
– Exercer ma pratique sur Figma

Exercice:
J’alternerai entre « jour de Reproduction d’app déjà existante » pour entrainer mon oeil et apprendre des plus grands et « jour de proposition d’une version « améliorer » d’un design » pour mettre en pratique ce que j’apprends.

Jour 5

Redesign: Page produit d'une app de livraison à domicile

07/05/2024

Aujourd’hui, je vous propose un redesign d’une page produit d’une app de livraison à domicile (https://lnkd.in/gxRGbv85)

Audit :

  • Les informations importantes étaient difficilement lisibles (manque d’espace entre les éléments).
  • La typographie « Seafood noodle » n’est pas appropriée pour un titre. On peut facilement la confondre avec un logo (et elle n’est pas très accessible non plus).

Modifications :

  • Déplacer la gestion de la quantité à côté du bouton « add to cart » pour qu’elle soit plus facilement accessible au pouce.
  • Ajout d’une section « Informations nutritionnelles » pour plus de détails (allergènes, calories, etc…).

Jour 6

Prototype: On-boarding de SkillShare

08/05/2024

Aujourd’hui, je vous propose une reproduction de la phase d’onboarding de l’application Skillshare.

L’onboarding est l’occasion pour nous de mieux connaître nos utilisateurs et de pouvoir proposer une expérience la plus personnalisée possible sur l’application.

Jour 7

Redesign: App de réservation de vols.

09/05/2024

Aujourd’hui, je vous présente un redesign d’une app de réservation de vols.

(https://lnkd.in/e_hQ7CYn)

Audit :

  • Manque de contraste de couleurs (problème d’accessibilité).
  • Absence du prix pour chaque vol.
  • Manque de navigation.

Jour 8

User Flow: Onboarding de Headspace

10/05/2024

Aujourd’hui, exercice un peu différent de d’habitude.

Voici l’user flow de l’onboarding de l’app Headspace.

Depuis le début, je n’ai proposé que des reproductions d’app ou des redesigns.

Le souci, c’est que le design me demande beaucoup de temps. J’ai l’impression de faire les exercices de façon superficielle et de designer sans vraiment prendre le temps de comprendre la structure des apps.

J’ai donc décidé de rajouter cet exercice dans mon challenge.

Cela me permettra de :

  • Étudier en profondeur les apps et leurs structures, l’expérience utilisateur, etc… sans me préoccuper du contenu et de l’UI.
  • Souffler un peu après des jours de design intensif (et tenir sur la durée).

C’est un de mes premiers user flows. Je ne sais pas s’il est bien fait ou pas. N’hésitez pas si vous avez des tips à me donner.

Jour 9

Revolut: User flow de l'on-boarding

11/05/2024

Après avoir réalisé 7 designs depuis le début de mon challenge, j’ai pu nettement améliorer mon UI/UX.

Seulement, je sentais que je manquais de profondeur dans ma compréhension de la structure d’une app. Je vais donc réorienter mon challenge.

Sous les conseils avisés de Pierre Poignand, j’ai décidé de focaliser mon challenge sur une application uniquement.

Cela me permettra de :

  • Approfondir ma compréhension du fonctionnement.
  • Identifier des patterns récurrents.
  • Passer moins de temps à chercher des apps à designer.
  • Développer ma compréhension des enjeux et besoins d’une niche.
  • Peut-être créer le design system de l’app.

L’application que j’ai choisie est Revolut.

J’ai commencé par étudier l’user-flow de son onboarding.

Ce que j’ai pu remarquer :

  • Le flow est conçu de manière progressive et est divisé étape par étape. Revolut n’hésite pas à rallonger le flow et à par exemple, séparer la saisie des champs « Nom/prénom », « email », « mot de passe » en des étapes distinctes, quand d’autres apps proposent ces saisies en une seule étape.

Cette méthode a pour avantage de réduire la confusion en permettant aux utilisateurs de se concentrer sur une seule tâche à la fois, ce qui favorise une expérience fluide et engageante.

Jour 10

Revolut: Arborescence

12/05/2024

Aujourd’hui, je continue de décortiquer l’app Revolut.

J’ai réalisé son arborescence, non exhaustive.

Très dense comme vous pouvez le voir haha.

(Cela m’a fait réaliser que je n’utilise qu’à peine 10% de l’app.)

En faisant cet exercice, cela me donne une vision large de l’app et de ses fonctionnalités.

Je pense m’attaquer à l’analyse de sa structure de façon plus précise pour la suite du challenge.

Jour 11

Revolut: User flow de " Ajouter de l'argent" & "Échanger une devise"

13/05/2024

Aujourd’hui, analyse du flow de l’ajout de fond et du changement de devise de l’app Revolut, 2 des principales fonctionnalités de l’application.

Jour 12

Revolut: Fondation du design system

14/05/2024

Après avoir étudié la structure de l’application Revolut, je me lance dans la reproduction de son design system.

Aujourd’hui, j’ai commencé par les fondations.

Le design system est essentiel car il assure une expérience utilisateur cohérente et efficace.

En reproduisant celui de Revolut, je gagne en compréhension des meilleures pratiques de conception d’interfaces, ce qui me permettra de créer des produits numériques plus convaincants à l’avenir.

Jour 13

Revolut: design system

15/05/2024

Aujourd’hui, poursuite de mon travail de reproduction du design system de l’app Revolut. 🙂

Ce travail m’a introduis au Atomic design.
C’est une méthodologie de design qui décompose les interfaces en leurs plus petits éléments fondamentaux (les atomes) pour ensuite les combiner en molécules, organismes, templates et pages.

Un sujet à creuser pour la suite.

Jour 14

Adidas: arborescence

17/05/2024

Après avoir décortiquer l’app Revolut, je me tourne vers l’app Adiddas.

Objectifs:
– Comprendre comment est structurer une solution E-commerce
– Les éléments importants pour une bonne expérience dans une solution e-commerce
– construire son design system

—–

J’ai commencé par travailler son arborescence pour avoir une vision macro de l’app.

Contrairement à ce que j’aurais pu penser, la structure est assez simple.
Ce qui « alourdi » l’arborescence c’est surtout le nombre de produits assez conséquent (qui sont trier avec des filtres).

Jour 15

Adidas: Prototype "ajouter un avis"

18/05/2024

J’ai reproduit le prototype du flux « Donner un avis » de l’app Adidas.

Tout comme dans le flux d’on-boarding de l’app Revolut, le flux est rythmé en plusieurs étapes avec une barre de progression, ce qui rend le processus plus fluide et intuitif.

C’est un pattern qui me semble revenir souvent dans les apps, notamment lorsqu’il s’agit d’effectuer des tâches assez chronophages et lourdes.

Cette méthode réduit la surcharge cognitive et augmente l’engagement.

Jour 16

Adidas: User flow du Checkout

18/05/2024

Aujourd’hui, j’ai travaillé sur le diagramme de flux utilisateur pour le processus de checkout de l’application Adidas.

Deux points clés que je relève :

1️⃣ Simplification des étapes : réduire le nombre d’étapes dans le flux de checkout pour éviter de frustrer les utilisateurs et diminuer les abandons de panier.

2️⃣ Expérience utilisateur fluide : assurer des transitions sans interruptions entre les étapes pour maintenir l’engagement des utilisateurs.

En découvir plus

Refonte de la landing page de Mashup Web social

UX/UI design, Développement Webflow