Un petit message ça fait toujours plaisir 😊
Je vais vous aider à atteindre vos objectifs 🎯
Vous voulez connaître ma méthodologie ?
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 !
J’ai eu l’occasion de faire appel aux services de Max pour la création de ma Marketplace. C’est une personne très professionnelle, à l’écoute et très réactive. Il a fait preuve aussi d’initiative et de créativité… Je suis très satisfaite de sa prestation.
J’ai vu beaucoup de sites de viandes, mais je n’imaginais pas que ça puisse être aussi propre.
Travailler avec Max Beaubois a été une expérience extrêmement positive ! Sa créativité, son expertise en UX design et sa maîtrise de Figma ont permis de mener à bien notre projet. J’ai été impressionné par sa capacité à comprendre et à répondre parfaitement à nos besoins, tout en apportant des idées pertinentes.
Je le recommande vivement pour tout projet de conception web et mobile !
Max a répondu à la plupart de nos attentes. C’est un prestataire agréable, réactif, et qui tient ses délais. Il nous apporté la touche webdesign qui nous manquait.
Max a été extrêmement professionnel et efficace du début à la fin de la mission. II a su comprendre nos enjeux et adapter sa méthode de travail pour intégrer nos contraintes, afin de proposer un excellent résultat tant sur le fond que sur la forme du web design. Il a également réalisé notre design system en suivant nos guidelines et a su nous fournir un résultat très satisfaisant. Nous le recommandons à 100%.
Max nous a impressionnés par sa capacité à comprendre rapidement les complexités de notre secteur de niche et à proposer un design moderne et convivial. Sa rapidité et son professionnalisme ont dépassé nos attentes, et la nouvelle interface a été accueillie avec enthousiasme par nos utilisateurs. Nous ne pourrions pas être plus satisfaits de son travail !
Myself
Myself
CEO, founder, UI/UX Designer, branding
Design and user experience development for SpiriGuide, an innovative app combining AI insights and expert advice to provide personalized spiritual guidance.
After substantial quantitative and qualitative market research, I realized that the the spiritual community lacked a centralized platform that offered holistic and personalized guidance.
Existing solutions were fragmented, poorly designed, and failed to meet the diverse needs of users. I decided to launch SpiriGuide to fill this gap by delivering a seamless, user-friendly experience that balanced AI support with human expertise, and answers several needs of the community.
Spiritual people feel lonely in their journey, and are looking for a community of like-minded people
There is too much information and concepts. They lack a structure and direction to explore their spirituality
They struggle to be consistent in their spiritual practice
They search for a deeper meaning in their life
An app that leverages AI to guide you to the right resources, combining that with real human guidance and a community.
This was the major challenge for this project: AI can help the community like never before, but they are allergic to it!
I answered this challenge by creating Spiri, the AI mascot. Thanks to Spiri, it takes pressure off AI and makes it more alive and friendly.
The design required integrating AI recommendations seamlessly with human input. I focused on creating clear pathways for users to access personalized insights while connecting them to relevant resources and practitioners.
The app revolves around its chat interface, where Spiri takes life with animations. Everything starts here, ask Spiri any question
All resources are gathered in one tab for easy navigation
Under the community tab, you can find different news and discussions channels, chat and like-minded people near you
The AI suggests experts to have consultations with when relevant. This way the loop is closed with guidance that starts with AI, resources and human guidance if necessary
In order the make the app more engaging and user friendly, I have introduced a gamification system. Where each time the user completes a resources, he earns 1 gem, gems then unlock new labels and possibly prizes !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
For a French startup
UI/UX Designer
For a French startup
UI/UX Designer
The organic meat market is very limited in France, the majority comes from Argentina, so it is organic, but not local nor ecological. Natur’Viandes offers a solution to this problem: Organic AND local meat, by establishing itself in each region of France.
For this mission, I worked in collaboration with a freelance colleague specialized in marketing and integration. Currently, the site integration is not yet complete as the client has been delayed due to the pandemic.
3 modern sites to be created to effectively convince 3 different clienteles.
Effectively communicate the organic and local aspect of the brand.
With limitation due to the elements provided at the start: Logos and packaging.
3 modern sites to be created to effectively convince 3 different clienteles.
Effectively communicate the organic and local aspect of the brand.
With limitation due to the elements provided at the start: Logos and packaging.
The client was working with a branding agency that produced the following logos.
So I was restricted to these colors and typography for the site.
Part 1
3 sites have been created, to simplify I will only talk about Natur’Viandes and will also mention Saveurs de nos Prés.
The market study was already done by the founder when I arrived, here is what was indicated to us following the explanations and in response to our questions:
From this target market I created several personas, here are the two main ones :
Claire is a mother of two children. A few years ago, she researched nutrition and products sold in supermarkets. She is therefore careful about what she eats and especially what she gives to her children. Today she mainly does her shopping in organic stores and completes them in supermarkets.
What she is looking for :
Alex is a 28-year-old, he does his grocery shopping like everyone else, but he really likes quality meat and would like to eat more locally, which is often lacking in this kind of store.
What he is looking for :
We put ourselves in the mind of a consumer, and visited the competition to understand the issues in the field, compile the strengths and weaknesses of competitors’ sites and extrapolate the best approach to stand out.
Following this competitive analysis, we had the idea to stand out by creating a real experience when visiting the site, so that the visitor associates the brand with an up-to-date company, which fits perfectly with Natur’Viandes, because they use the latest technologies (blockchain, sensors, e-commerce).
Part 2
It’s time to design!
Once we figured out who our audience was, I pulled out the pencil to draw the wireframes (low-fidelity mockups) on paper.
I then started to look for inspiration on the web and to create the first model, that of the homepage, and define the colors and the typography.
Still restricted by the logo, I used its colors that I contrasted with a cream background, which recalls the eco-responsible side.
I also used blue in the background to contrast with the beige and bring more character to the brand.
I combined an angular font to stick to the logo with a handwritten font to contrast and bring a family-friendly touch.
Adobe
Google Fonts
I decided to integrate the pieces of meat directly into the design, as opposed to adding a photo.
This is the centerpiece of this design when it arrives on site. That way, we understand that we are on the site of a butcher shop, which is crucial to the UX.
We also have another section with animated butcher style arrows listing selling points.
As with the meat, I incorporated vegetables and condiments on the page, I was careful to arrange them in a way that complimented the meat without them taking over.
I emphasized the local aspect by integrating accents of french colors throughout the site. Also the mention « Made in ma région » very telling that I took in stylized background.
I’ve seen a lot of meat sites, but I never imagined it could be so clean.
Emmanuel VILBRUN - Founder of Natur’Viandes
Currently, the site integration is not yet complete as the client has been delayed due to COVID-19.
On the other hand, we have the idea of displaying the packaged meat with an animation on scrolling the mouse that will take the meat out, and display it without the packaging. This will add an unboxing experience and make the site even more interactive. Not to mention the WOW effect!
Pour une startup Anglaise
Pour une startup Française
UI/UX Designer
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.
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.
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 🙌
À 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
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.
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 était définie sur le “Hub” de l’application. Mais cela posait certains problèmes :
Le problème d’une seule carte était :
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
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.
La page de voyage réunit toutes les informations nécessaires à la planification d’un voyage seul ou à plusieurs :
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.
Pour une startup Française
Pour une startup Française
UI/UX Designer
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.
Reprendre la version pré-alpha déjà existante pour en faire une applicaion intuitive et professionnelle. En version bureau et mobile.
Refonte de l’application pour une image moderne et une UX aboutie.
Création du logo et de la charte graphique pour définir une image de marque.
Partie 1
Nous avons envoyé un formulaire aux futurs testeurs de l’application pour avoir une idée de notre audience :
20-29
30-39
40-49
50-59
Discord
Teams
À partir de ces informations, j’ai compilé des personnas :
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.
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.
É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.
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.
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.
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
Propositions qui nous différentient des compétiteurs
Partie 2
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.
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.
La page conversation est composée de deux parties, avec à gauche la liste des conversations, et à droite la conversation sélectionnée.
La page groupe est plus complexe, car il y a beaucoup d’informations. Néanmoins, j’ai réussi à tout afficher clairement en m’inspirant des groupes discord.
La page est composée de 3 parties: à gauche la liste des groupes sous-groupes de l’entreprise, comme sur discord. Avec la conversation du groupe sélectionné dans la partie centrale. À droite on retrouve les meetings spécifiques au groupe.
Partie 3
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)
Enfin j’ai commencé à créer des éléments de design, puis les maquettes à partir des wireframes.
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.
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.
Pour la page de conversations, je suis parti sur une solution conventionnelle, comme Telegram, Messenger ou WhatsApp. Avec la liste des conversations.
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.
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 !
Pour une startup Française
UI/UX Designer
Pour une startup Française
UI/UX Designer
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.
Communiquer efficacement l’aspect bio et local de la marque.
Avec limitation due aux éléments fournis au départ : Logos et packaging.
3 sites modernes à créer pour convaincre efficacement
3 clientèles différentes.
Communiquer efficacement l’aspect bio et local de la marque.
Avec limitation due aux éléments fournis au départ : Logos et packaging.
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
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 :
À partir de ce marché cible j’ai créé plusieurs personnas, voici les deux principaux :
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 :
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 :
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.
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).
Partie 2
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.
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.
J’ai combiné une police carrée pour coller au logo avec une police manuscrite pour contraster et apporter une touche familiale.
Adobe
Google Fonts
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.
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é.
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
À 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 !