A little message is always nice 😊

I will help you achieve your goals 🎯

You want to know my methodology ?

Max,
UI & UX designer.

They trusted me 🙌

What I do

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

UI and UX
design

*

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

UX
Consultation

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

CMS
Integration

**

My main tools

Sketch
Figma
Elementor
Html/Css/Js
WebFlow
WordPress

* User Interface and User Experience
** Content Management System

My Projetcs

VoxCal

Design and user experience for a french professional communication platform.

GuideBook

Design and user experience for an english travel application.

Natur'Viandes

Design and user experience for the future leader in organic and local meat.

Foodie App

Nutritional tracking application for restaurant dishes.

What they say about me

Are you interested in something?

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 © 2024 Max Beaubois. All rights reserved.

GuideBook

Travel planning application

Project

Mobile travel application

For whom ?

For an English startup

Why ?

For fundraising

Categories

Travel and tourism

Role

UI/UX Designer

Teleworking ?

No

Project

Mobile travel application​

For whom ?

For an English startup

Why ?

For fundraising

Categories

Travel and tourism

Role

UI/UX Designer

Teleworking ?

No

My contribution & tools used

User experience design
User interface design
Figma

The project

Guidebook is an English startup aiming to revolutionize theorganization of travel. The social aspect of the application allows you to find points of interest (landmarks, restaurants, bars, etc.) based on the recommendations of your friends and influencers that you follow, and offers all the necessary organizational tools for traveling alone or between friends.
«@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«

Objective

The objective of the first mission was to create a first prototype of the application to present to investors as part of a fundraiser.

My intervention lasted 5 full-time days, with the initial objective of 17 models, we produced 49 after these 5 days, and a great improvement in the user experience. Well above the initial objective 🙌

Research

When I arrived on this project, I benefited from in-depth user research carried out beforehand. So I was able to use this research to improve the design.

Part 1

Restructuring

Wireframes réalisés par le fondateur

Create good foundations

Scott, the founder of Guidebook, already had a very detailed vision of the application at the beginning of the mission. He had created paper wireframes. Although the project was already detailed, I was able to assist him in improving the UX.

Rethinking the structure

The structure has also changed, instead of having 4 different possible elements, we have reduced it to 3 to simplify the understanding of the application.

The app home page

The homepage was set to the “Hub” of the application. But this posed some problems :

The single card problem was :

Wireframe de la carte principale

The Solution : Hybrid
with the map and a window to search for interesting places and with quick access to the current trip.

Part 2

The Prototype

Prototype

Around Me page - Home

As explained previously, the landing page is a map with a window allowing you to browse the recommendations and quickly access the current trip.

Trip

The travel page brings together all the information needed to plan a trip alone or with others:

Result

«@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«

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

Copyright © 2024 Max Beaubois. All rights reserved.

VoxCal

French application for business communication.

Project

Professional communication web application

For whom ?

For a French startup

Why ?

For the launch of their app

Categories

Communication in business

Role

UI/UX & logo Designer

Teleworking ?

Yes

Project

Professional communication web application​

For whom ?

For a French startup

Why ?

For the launch of their app​

Categories

Communication in business​

Role

UI/UX & logo Designer

Teleworking ?

Yes

My contribution & tools used

User experience design
User interface design
Search
Sketch

The company

The company behind Voxcal, SCEP, is a cooperative company, made up of developers who had the project of creating a French professional communication platform. Unlike similar apps like Slack or Microsoft Teams which are American giants.

Objective

Take over the already existing pre-alpha version to make it an intuitive and professional application. In desktop and mobile versions.
1

Redesign of the application for a more modern image and a better UX.

2
Logo creation and graphic charter to define a brand image.

Part 1

Research

Survey form

We sent a form to the future testers of the app to have an idea what our audience was

Here is the summary of the results

- panel of 12 people

Age

20-29

30-39

40-49

50-59

100%
Have a good
connection
100%
Work on
computer
Platforms they use

Discord

Teams

Mail

92%
Interact
primarily at a distance
58%
Use
the dark theme
33%
Usually
interact with
the same people
Advantages and disadvantages mentioned
What they expect from professional communication software

Personas

From this information, I compiled personas:

Victor

26 years old

Victor, 26, is a Programming Engineer, he generally uses Discord to communicate with his team because he is used to using it, and finds the application easy to use.

However, he would like to use a more professional and faster application, with more organization options and the ability to communicate with non-registered users on Discord.

Problem definition
Victor is a 26-year-old Programming Engineer who uses Discord, who needs who needs a more complete and professional application bacause he wants to be able to organize his messages and communicate with non-subscribers

Étienne

52 years old

Étienne 52 years old is Commercial Director, he interacts frequently with new contacts. He generally uses Microsoft Teams, because he finds the application simple and it allows him to interact in real time in a conversation thread or even integrated videoconference.


Due to the amount of messages he receives, he is sometimes overwhelmed, and the platform becomes confusing. He therefore expects his future tool to allow organizing information very easily. But also the ability to communicate with people off the platform.

Problem definition
Étienne is a 52-year-old Sales Manager who uses Teams, who needs a complete application with lots of organizational options because he wants to be able to organize large amounts of messages and communicate with non-subscribers.

Robert

50 years old

Robert 50 years old is an engineer, he generally communicates via email, because it is a simple, traceable option (he can easily find past conversations), and he manages his time more easily. It also allows him to communicate with anyone from any platform.

Problem definition
Robert is a 50-year-old Engineer who uses email, who needs an open, simple and flexible application because he wants to be able to communicate with non-subscribers and not have to learn how to use the application.

Definition of the offer

Following user research, we have defined the points to highlight in our offer :

1. Speed of use, quick actions and simplicity

2. Quick to learn for mail and Discord users.

3. Cross-platform

4. Features for professionals :
– Saving chat messages and archiving
– Screen sharing
– Transfer of messages (forward)

5. Opensource

6. Confidentiality and French

Path 21@2x

Proposals that differentiate us from competitors

Avenues for future improvements :

Part 2

Interaction

Reorganization of the architecture

A big issue that the pre-alpha version brought to mind for me was the architecture of the application. In particular, we had 3 separate types of conversations, with different terms for each, which from a UX point of view is bad. So I gathered what I could, and I gave consistent labels through the app.

Wireframes

Once the architecture was renovated, I started creating wireframes to define the placement of all the elements on the screen.

Part 3

Design

Logo and graphic charter

Although this is not my field of expertise, I had to adapt by creating this logo and graphic charter. They wanted the logo to respect the color sky blue and orange, colors that are relatively difficult to combine, but the end result is there.

Dark Blue

Use
Text

Hex
#0F226A

RGB
rgb(13, 32, 110)

Sky Blue

Use
Contrast and lighten

Hex
#00A5FF

RGB
rgb(0, 166, 255)

Orange

Use
Accent

Hex
#E3841F

RGB
rgb(241, 127, 0)

Prototype

Finally I started to create design elements, then the models from the wireframes.

Home
Group page
Conversations
Quick access to favorites

Mobile prototype

Then, I adapted the design to a mobile version, the challenge at this stage was to provide all the functionalities of the application while keeping it as refined and intuitive as possible.

Welcome

For the home page, I used scrolling only to see the posts, because that’s the most important thing.


But in order not to ignore the meetings, I highlighted the next meeting (or in progress, if there is one), with the possibility of seeing all the meetings to come.

Conversations

For the conversations page, I went with a conventional solution, such as Telegram, Messenger or WhatsApp. With the list of conversations.

Group

For the groups page, the desktop version had a lot of information, so it had to be organized.


The most important being the conversation, we get there by default.


After several tests I opted for a system of tabs to navigate between the discussion, the group meetings and the list of groups.

Result

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

Stefan GUALANDI
Web developer at SCEP

As a developer I worked in collaboration with Max to design and implement the graphic overlay of a communication application. After a real research work to better understand the needs and adapt them to future users, he offered us a global structure of the application. We were thus able to project ourselves and refine certain choices. Finally, he shared with us the final models corresponding to what we had concluded. The modernism of the visuals and the user facilities linked to the UX pleased us a lot, moreover the tools with which he works gave us real help for the integration of these models. We will be happy to work with him again on other projects, thank you again!

«@2x«

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

Copyright © 2024 Max Beaubois. All rights reserved.

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