A little message is always nice 😊

I will help you achieve your goals 🎯

You want to know my methodology ?

Max,
UI & UX designer.

Natur'Viandes

100% French organic meat

Project

Showcase and e-commerce sites

For whom ?

For a French startup

Why ?

Online presence and online sales

Categories

E-commerce | Eco-responsible

Role

UI/UX Designer

Teleworking ?

Yes

Project

Showcase and e-commerce sites

For whom ?

For a French startup

Why ?

Online presence and online sales

Categories

E-commerce | Eco-responsible

Role

UI/UX Designer

Teleworking ?

Yes

My contribution & tools used

User experience design
User interface design
Sketch
Elementor (WordPress)

The company

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.

Problems to solve

1

3 modern sites to be created to effectively convince 3 different clienteles.

2

Effectively communicate the organic and local aspect of the brand.

3

With limitation due to the elements provided at the start: Logos and packaging.

1

3 modern sites to be created to effectively convince 3 different clienteles.

2

Effectively communicate the organic and local aspect of the brand.

3

With limitation due to the elements provided at the start: Logos and packaging.

Items supplied

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

Research

Target market

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:

Natur'Viandes

Age
35 years old
55 years old

Saveurs de nos Prés

Age
20 years old
70 years old

Personas

From this target market I created several personas, here are the two main ones :

Natur'Viandes : Claire, 33 years old

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 :

Claire

33 years old

Alex

28 years old

Saveurs de nos prés : Alex, 28 years old

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 :

Competitive analysis

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.

Weak points

Strong points

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).

Our ideas at this stage of the project :

Part 2

Design

Design

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.

Choice of colors

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.

Accent
Primary
Secondary
Background
Text

Choice of typography

I combined an angular font to stick to the logo with a handwritten font to contrast and bring a family-friendly touch.

Neue Haas Grotesk Display

Adobe

Caveat

Google Fonts

Highlight the meat

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.

Organic and local aspect

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.

Finally I declined this design on the other pages


«@2x«
«@2x«

Result

«@2x«

I’ve seen a lot of meat sites, but I never imagined it could be so clean.

Emmanuel VILBRUN - Founder of Natur’Viandes

«@2x«

Future improvements

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!

Do you like what I've done with this project?

Copyright © 2023 Max Beaubois. All rights reserved.

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 © 2023 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

Nous avons envoyĂ© un formulaire aux futurs testeurs de l’application pour avoir une idĂ©e de notre audience :

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 © 2023 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 © 2023 Max Beaubois. Tous droits réservés.