Un petit message ça fait toujours plaisir 😊

Je vais vous aider à atteindre vos objectifs 🎯

Vous voulez connaître ma méthodologie ?

Max,
UI et UX designer.

Ils m'ont fait confiance 🙌

Ce que je fais

Oval@1x
Oval@1x
Oval@1x
Oval@1x

UI et UX
design

*

Oval Copy 5@1x
Oval Copy 5@1x
Oval Copy 5@1x
Oval Copy 5@1x

Consultation
UX

Oval@1x
Oval@1x
Oval@1x
Oval@1x

Intégration
CMS

**

Mes outils principaux

Sketch
Figma
Elementor
Html/Css/Js
WebFlow
WordPress
* Expérience utilisateur et Interface Utilisateur
** Content Management System

Mes Projets

VoxCal

Design et expérience utilisateur pour une plateforme de communication professionnelle française.

GuideBook

Design et expérience utilisateur pour une application anglaise de voyages

Natur'Viandes

Design et expérience utilisateur pour le futur leader de viande bio et locale.

Foodie App

Application de suivi nutritionnel pour les plats de restaurants.

Ce qu'ils disent de moi

Quelque chose vous intéresse ?

GuideBook

Application d'organisation de voyages

Projet

Application mobile de voyage

Pour qui ?

Pour une startup Anglaise

Pourquoi ?

Pour une levée de fonds

Catégories

Voyage et tourisme

Role

UI/UX Designer

Télétravail ?

Non

Projet

Sites vitrine et e-commerce

Pour qui ?

Pour une startup Française

Pourquoi ?

Présence en ligne et vente en ligne

Catégories

E-commerce | Éco-responsable

Role

UI/UX Designer

Télétravail ?

Oui

Ma contribution & outils utilisés

User experience design
User interface design
Figma

Le projet

Guidebook est une startup Anglaise visant à révolutionner l’organisation de voyages. L’aspect social de l’application permet de trouver des points d’intérêts (Monuments, restaurants, bars…) en fonction des recommandations de vos amis et influenceurs que vous suivez, et offre tous les outils d’organisation nécessaires pour voyager seul ou entre amis.

«@2x«

The average weekend trip takes 15 hours to plan, and the reason it takes too long is because you’re working across different types 
of sources, none of which are credible, up to date and tailored to you.

«@2x«

Objectif

L’objectif de la première mission a été de créer un premier prototype de l’application à présenter à des investisseurs dans le cadre d’une levée de fonds.

Mon intervention a duré 5 jours à temps plein, avec pour objectif au départ 17 maquettes, nous en avons produit 49 après ces 5 jours, et une nette amélioration de l’expérience utilisateur. Bien au dessus de l’objectif initial 🙌

Recherche

À mon arrivée sur ce projet, j’ai bénéficié d’une recherche utilisateur approfondie réalisée au préalable. J’ai donc pu me baser sur cette recherche pour améliorer le design.

Partie 1

Restructuration

Wireframes réalisés par le fondateur

Créer de bonnes fondations

Scott, le fondateur de Guidebook, avait déjà une vision de l’application très détaillée au commencement de la mission. Il avait créé des wireframes papier. Bien que le projet était déjà détaillé, j’ai pu l’assister dans l’amélioration de l’UX.

Repenser la structure

La structure a aussi changé, au lieu d’avoir 4 différents éléments possibles, nous l’avons réduit à 3 pour simplifier la compréhension de l’application.

La page d'accueil de l'appli

La page d’accueil était définie sur le “Hub” de l’application. Mais cela posait certains problèmes :

Le problème d’une seule carte était :

Wireframe de la carte principale

La solution : Hybride avec la carte et une fenêtre pour rechercher des endroits intéressants et avec un accès rapide au voyage actuel.

Partie 2

Le Prototype

Prototype

Around Me page - Accueil

Comme expliqué précédemment, la page d’arrivée est une carte avec une fenêtre permettant de parcourir les recommandations et accéder rapidement au voyage en cours.

Voyage (Trip)

La page de voyage réunit toutes les informations nécessaires à la planification d’un voyage seul ou à plusieurs :

Résultat

«@2x«
«@2x«
«@2x«

Scott Bedard
Guidebook CEO & Founder

Max and I worked together for five days onsite. We set out to complete seventeen screens and five userflows; we completed 46 screens, three overlays, and had a deep, functional prototype by the time we finished the project. Max was professional and efficient, communicative, and very responsive; his English is functionally perfect. Working with him was easy, and obviously very productive. I intend to work with Max whenever possible in future, and I would confidently recommend working with him to anyone who asked.

«@2x«

Vous aimez ce que j’ai fait de ce projet ?

Copyright © 2022 Max Beaubois. Tous droits réservés.

VoxCal

Application Française de communication en entreprise.

Projet

Application web de communication pro

Pour qui ?

Pour une startup Française

Pourquoi ?

Pour le lancement de leur app

Catégories

Communication en entreprise

Role

UI/UX & logo Designer

Télétravail ?

Oui

Projet

Sites vitrine et e-commerce

Pour qui ?

Pour une startup Française

Pourquoi ?

Présence en ligne et vente en ligne

Catégories

E-commerce | Éco-responsable

Role

UI/UX Designer

Télétravail ?

Oui

Ma contribution & outils utilisés

User experience design
User interface design
Recherche
Sketch

L'entreprise

L’entreprise derrière Voxcal, la SCEP, est une entreprise coopérative, composée de développeurs qui avaient comme projet de créer une plateforme de communication professionnelle Française. Contrairement aux applications similaires comme Slack ou Microsoft Teams qui sont des géants américains.

Objectif

Reprendre la version pré-alpha déjà existante pour en faire une applicaion intuitive et professionnelle. En version bureau et mobile.

1

Refonte de l’application pour une image moderne et une UX aboutie.

2

Création du logo et de la charte graphique pour définir une image de marque.

Partie 1

Recherche

Formulaire d'enquête

3 sites ont été réalisés, pour simplifier je ne parlerai que de Natur’Viandes et mentionnerai aussi Saveurs de nos Prés.

L’étude de marché était déjà faite par le fondateur à mon arrivée, voici ce qui nous était indiqué suite aux explications et en réponse à nos questions :

Voici le résumé des résultats

- panel de 12 personnes

Âge

20-29

30-39

40-49

50-59

100%
Ont une bonne
connexion
100%
Travaillent sur
ordinateur
Plateformes qu’ils utilisent

Discord

Teams

Mail

92%
Interragissent
principalement à distance
58%
Utilisent
le thème sombre
33%
Interragissent
généralement avec
les mêmes personnes
Avantages et inconvénients cités
Ce qu’ils attendent d’un logiciel de communication pro

Personnas

À partir de ces informations, j’ai compilé des personnas :

Victor

26 ans

Victor, 26 ans est Ingénieur Programmation, il utilise généralement Discord pour communiquer avec son équipe car il est habitué à l’utiliser, et trouve l’application simple d’utilisation.

Il souhaiterait cependant utiliser une application plus professionnelle et rapide, avec davantage d’options d’organisation et la capacité à communiquer avec des utilisateurs non inscrits sur Discord.

Définition du problème
Victor est un Ingénieur Programmation de 26 ans qui utilise Discord, qui a besoin d’une application plus complète et professionnelle car il veut pouvoir organiser ses messages et communiquer avec des non-inscrits.

Étienne

52 ans

Étienne 52 ans est Directeur Commercial, il interagit fréquemment avec de nouveaux contacts. Il utilise généralement Microsoft Teams, car il trouve l’application simple et elle lui permet d’interagir en temps réel, en fil de conversation ou bien visioconférence intégrée.

En raison de la quantité des messages qu’il reçoit, il est parfois débordé, et la plateforme devient confuse. Il attend donc de son futur outil une grande simplicité d’organisation des informations. Mais aussi de la capacité de communiquer avec des personnes hors plateforme.

Définition du problème

Étienne est un Directeur commercial de 52 ans qui utilise Teams, qui a besoin d’une application complète et avec beaucoup d’options d’organisations car il veut pouvoir organiser de grandes quantités de messages et communiquer avec des non-inscrits.

Robert

50 ans

Robert 50 ans est Ingénieur, il communique généralement via mails, car c’est une option simple, traçable (il peut facilement retrouver des conversations passées), et il maîtrise son temps plus facilement. Cela lui permet aussi de communiquer avec n’importe qui à partir de n’importe quelle plateforme.

Définition du problème

Robert est un Ingénieur de 50 ans qui utilise les mails, qui a besoin d’une application ouverte, simple et flexible car il veut pouvoir communiquer avec les non-inscrits et ne pas avoir à apprendre à utiliser l’application.

Définition de l'offre

Suite à la recherche utilisateurs, nous avons défini les points à mettre en valeur dans notre offre :

1. Rapidité d’utilisation, actions rapides et simplicité

2. Rapide à prendre en mains pour utilisateurs de mails et Discord.

3. Multiplateformes

4. Fonctionnalités pour professionnels :
     – Sauvegarde de messages de chats et archivage
     – Partage d’écran
     – Transfert de messages (forward)

5. Opensource

6. Confidentialité et Français

Path 21@2x

Propositions qui nous différentient des compétiteurs

Pistes d’améliorations futures :

Partie 2

Interaction

Réorganisation de l’architecture

Un gros problème que m’évoquait la version pré-alpha était l’architecture de l’application. On avait notamment 3 types de conversations séparés, avec des termes différents pour chaque, ce qui d’un point de vue UX est mauvais. J’ai donc réuni ce que je pouvais, et j’ai donné des labels cohérent à travers l’app.

Wireframes

Une fois l’architecture rénovée, j’ai commencé à créer des wireframes pour définir le placement de tous les éléments sur l’écran.

Partie 3

Design

Logo et charte graphique

Bien que ce ne soit pas mon champs d’expertise, j’ai dû faire preuve d’adaptation en créant ce logo et charte graphique. Ils souhaitaient que le logo respecte la couleur bleu ciel et orange, des couleurs relativement difficiles à associer, mais le résultat final est au rendez-vous. 

Bleu Foncé

Utilisation
Texte

Hex
#0F226A

RGB
rgb(13, 32, 110)

Bleu Ciel

Utilisation
Contraster et éclaircir

Hex
#00A5FF

RGB
rgb(0, 166, 255)

Orange

Utilisation
Accent

Hex
#E3841F

RGB
rgb(241, 127, 0)

Prototype

Enfin j’ai commencé à créer des éléments de design, puis les maquettes à partir des wireframes. 

Accueil
Page de groupe
Conversations
Accès rapide aux favoris

Prototype version mobile

Ensuite, j’ai adapté le design en version mobile, le challenge à cette étape était de fournir toutes les fonctionnalités de l’application en la gardant la plus épurée et intuitive possible.

Accueil

Pour la page d’accueil, j’ai utilisé le défilement seulement pour voir les messages, car c’est le plus important.

Mais pour ne pas ignorer les meetings, j’ai mis en valeur le prochain meeting (ou en cours, s’il y en a un), avec la possibilité de voir tous les meetings à venir.

Conversations

Pour la page de conversations, je suis parti sur une solution conventionnelle, comme Telegram, Messenger ou WhatsApp. Avec la liste des conversations.

Groupe

Pour la page de groupes, la version bureau avait beaucoup d’informations, il a donc fallu les organiser.

Le plus important étant la conversation, on arrive dessus par défaut.

Après plusieurs tests j’ai opté pour un système d’onglets pour naviger entre la discussion, les meetings du groupe et la liste des groupes.

Résultat

«@2x«
«@2x«
«@2x«

Stefan GUALANDI
Développeur web chez SCEP

En tant que développeur j’ai travaillé en collaboration avec Max pour concevoir et mettre en place la surcouche graphique d’une application de communication. Après un vrai travail de recherche pour mieux comprendre les besoins et les adapter aux futurs utilisateurs, il nous a proposé une stucture globale de l’application. Nous avons ainsi pu nous projeter et affiner certains choix. Enfin il nous a partagé les maquettes finales correspondantes à ce dont on avait conclu. Le modernisme des visuels et les facilités utilisateurs liées a l’UX nous ont beaucoup plu, de plus les outils avec lesquels il travaille nous ont apportés une réelle aide pour l’intégration de ces maquettes. Nous retravaillerons avec plaisir avec lui sur d’autres projets, encore merci !

«@2x«

Vous aimez ce que j’ai fait de ce projet ?

Copyright © 2022 Max Beaubois. Tous droits réservés.

Natur'Viandes

Viande bio 100% Française

Projet

Sites vitrine et e-commerce

Pour qui ?

Pour une startup Française

Pourquoi ?

Présence en ligne et vente en ligne

Catégories

E-commerce | Éco-responsable

Role

UI/UX Designer

Télétravail ?

Oui

Projet

Sites vitrine et e-commerce

Pour qui ?

Pour une startup Française

Pourquoi ?

Présence en ligne et vente en ligne

Catégories

E-commerce | Éco-responsable

Role

UI/UX Designer

Télétravail ?

Oui

Ma Contribution & outils utilisés

User experience design
User interface design
Sketch
Elementor (WordPress)

L'entreprise

Le marché de la viande bio est très limité en France, la majorité provient d’Argentine, donc elle est bio, mais pas locale ni écologique. Natur’Viandes propose une solution à ce problème : Une viande bio ET locale, en s’établissant dans chaque région de France.

Pour cette mission, j’ai travaillé en collaboration avec un collègue freelance spécialisé dans le marketing et l’intégration. À l’heure actuelle, l’intégration du site n’est pas encore terminée car le client a pris du retard à cause de la pandémie.

Problèmes à résoudre

1
3 sites modernes à créer pour convaincre efficacement 3 clientèles différentes.

2

Communiquer efficacement l’aspect bio et local de la marque.

3

Avec limitation due aux éléments fournis au départ : Logos et packaging.

1

3 sites modernes à créer pour convaincre efficacement
3 clientèles différentes.

2

Communiquer efficacement l’aspect bio et local de la marque.

3

Avec limitation due aux éléments fournis au départ : Logos et packaging.

Éléments fournis

Le client travaillait avec une agence de branding qui a réalisé les logos suivants.

J’ai donc été restreint à ces couleurs et typographie pour le site.

Partie 1

Recherche

Marché Cible

3 sites ont été réalisés, pour simplifier je ne parlerai que de Natur’Viandes et mentionnerai aussi Saveurs de nos Prés.

L’étude de marché était déjà faite par le fondateur à mon arrivée, voici ce qui nous était indiqué suite aux explications et en réponse à nos questions :

Natur'Viandes

Âge
35 ans
55 ans

Saveurs de nos Prés

Âge
20 ans
70 ans

Personnas

À partir de ce marché cible j’ai créé plusieurs personnas, voici les deux principaux :

Natur'Viandes : Claire, 33 ans

Claire est mère de deux enfants. Il y a quelques années, elle a fait des recherches sur la nutrition et les produits vendus en supermarché. Elle fait donc attention à ce qu’elle mange et surtout ce qu’elle donne à ses enfants. Aujourd’hui elle fait principalement ses courses en magasin bio et les complète en grande surface.

Ce qu’elle recherche :

Claire

33 ans

Alex

28 ans

Saveurs de nos prés : Alex, 28 ans

Alex est un jeune de 28 ans, il fait ses courses en grande surface comme tout le monde, mais il aime beaucoup la viande de qualité et souhaiterait consommer plus local, ce qui est souvent manquant dans ce genre de magasins.

Ce qu’il recherche :

Analyse compétitive

Nous nous sommes mis dans la tête d’un consommateur, et avons visité la compétition pour comprendre les enjeux du domaine, compiler les points forts et les points faibles des sites des concurrents et y extrapoler la meilleure approche pour se démarquer.

Points faibles

Points forts

Suite à cette analyse compétitive, nous avons eu comme idée de se démarquer en créant une véritable expérience lors de la visite du site, pour que le visiteur associe la marque à une entreprise au goût du jour, ce qui colle parfaitement avec Natur’Viandes, car ils utilisent les dernières technologies (blockchain, capteurs, e-commerce).

Nos idées à cette étape du projet :

Partie 2

Design

Design

Il est temps de faire le design ! 

Une fois que nous avons compris qui était notre public, j’ai sorti le crayon pour dessiner les wireframes (maquettes à basse fidélité) sur papier.

J’ai ensuite commencé à chercher de l’inspiration sur le web et à créer la première maquette, celle de la page d’accueil, et définir les couleurs et la typographie.

Choix des couleurs

Toujours restreint par le logo, j’ai repris ses couleurs que j’ai contrasté avec un fond crème, qui rappelle le coté éco-responsable.

J’ai aussi utilisé le bleu en fond pour contraster avec le beige et apporter plus de caractère à la marque.

Accent
Primaire
Secondaire
Fond
Texte

Choix de la typographie

J’ai combiné une police carrée pour coller au logo avec une police manuscrite pour contraster et apporter une touche familiale.

Neue Haas Grotesk Display

Adobe

Caveat

Google Fonts

Mise en valeur de la viande

J’ai décidé d’intégrer les pièces de viande directement dans le design, contrairement à ajouter une photo.

C’est la pièce maîtresse de ce design à l’arrivée sur le site. De cette manière, on comprend bien qu’on est sur le site d’une boucherie, ce qui est crucial à l’UX.

On a aussi une autre section avec des flèches animées façon bouchère listant les arguments de vente.

Aspect bio et local

Tout comme pour la viande, j’ai intégré des légumes et condiments à la page, j’ai fait attention à les disposer de manière à complimenter la viande sans qu’ils ne prennent le dessus.

J’ai mis l’aspect local en valeur en intégrant des accents des couleurs françaises un peu partout dans le site. Aussi la mention “Made in ma région” très parlante que j’ai repris en fond stylisé.

Enfin j’ai décliné ce design sur les autres pages…

«@2x«
«@2x«

Résultat

«@2x«

J’ai vu beaucoup de sites de viandes, mais je n’imaginais pas que ça puisse être aussi propre.

Emmanuel VILBRUN - Fondateur de Natur’Viandes

«@2x«

Améliorations futures

À l’heure actuelle, l’intégration du site n’est pas encore terminée car le client a été retardé dû à la COVID-19.

En revanche nous avons l’idée d’afficher la viande embalée avec une animation au défilement de la souris qui fera sortir la viande, et l’affichera sans l’emballage. Cela ajoutera une expérience de déballage et rendra le site encore plus intéractif. Sans oublier l’effet WOW !

Vous aimez ce que j’ai fait de ce projet ?

Copyright © 2022 Max Beaubois. Tous droits réservés.