Maison Plisson App Design — A UI Case

Jacques Trouillet
Feb 10 · 5 min read

Following the UX case for Maison Plisson which you can find here, I continued with the UI design of the project.

But first let’s go back to the persona, Mélanie.

The Persona

As a 38 year old consultant in Paris, Mélanie wants to have a healthier lifestyle and eat better products.

Our solution was:

  • An app: since we wanted to make it convenient to order anywhere at any time
  • An online pre prepared basket full of products: In order to get the right thing fast and with new products to discover
  • At home/work quick delivery: To get what you want fast and where you want it

The UI

Maison Plisson

Before starting the UI I did some research about Maison Plisson, their values, their image and also the competition.

Moodboard

From these researches I started to gather some pictures for the moodboard to convey the images and the inspirations which I gathered.

About this moodboard:

  • Focus on the product: Maison Plisson has always been focused on their product, their quality and where they are from
  • A link between tradition and modernity: Maison Plisson is making the link between the French tradition of eating well and the contemporary daily life of urban people
  • Joyful tone: Maison Plisson has a joyful tone both on their website, social media and are encouraging their customer to have fun with the food they are preparing
  • Minimalist: I added some Scandinavian design because it reminded me of the link between tradition and modernity as well as the minimalism I wanted for the app

Style Tile

A moodboard being too vague, I continued with a style tile to find the good colors, font, icons, pictures which will be used in the app.

Simple and straight to the point

I chose the font Lovelo for the header and to redesign the logo. I liked the font because it was modern but had that vintage feel which was perfect with the vibe. Then for the body I chose Montserrat since it was clear enough even with small screens.

For the colors, I kept Maison Plisson’s deep blue and added a splash of yellow to highlight some parts of the app. Finally, the “whitish” would be the back of the app to keep it clean, minimalist and modern.

Since Maison Plisson uses drawings as part of their website, I decided to go for “not so usual” icons. These look almost like drawings but keep a clean look and are easy enough to understand.

Finally, the pictures. Keeping the product at the center of the offer meant having high quality pictures without any distraction.

From MidFi to HighFi

After the UX part we started to design the wireframes in MidFi, meaning that we had to redesign what we did on paper using Sketch. A great way to reorganize quickly and use it as a foundation for the UI part.

Some screens taken from the MidFi wireframes

Based on these wireframes, I created some screens to see what was working in terms of design, colors etc… The results was interesting, some screens were designed with different styles but the lisibility kept bothering me. There were too much things everywhere and I was not really happy about the feel. It did not keep Maison Plisson’s image.

Trials and tribulations with different colors

In the end I started to strip down one design, removing anything unnecessary. That’s when I understood the real reason of the wireframe, keeping only the use visible. If I could keep the simplicity of the experience and use the UI as a way to make it even more clearer, then I would be heading in the right direction.

I then started to organize my symbols, to be more efficient in designing the rest of the app. Then, following the Atomic Design methodology I started by creating the atoms (icons…) before organizing them into mollecules (searching bars…) and finally organizing into organisms.

From Atoms to Screens

Finally when I was satisfied with the result I continued based on the different screens I had to make, continuously making changes based on the feel of the app.

Then, when I was happy about the final design, I started running some user testing, see what they understood, what they did not, what they felt about the app and how to improve their experience.

Try it for yourself and if you would like to see any changes, tell me in the comment section ;)

The different changes that I had to do were expected: a better wording, increasing the size of certain buttons, improve the spacing between each components.

Finally, I created some animations, using Principle, to really show how the app works and I am really happy about them !

Conclusion

With this project I understood even more the relationship between UX and UI and how it is important to create a design with a sense of usability first.

I did not want to go too far away from the brand image, however, being too close would not have been good in terms of experience for the user. I had to find the right balance between the client and its user.

In the end, I am happy with the result. Almost drawn icons, minimalism with a splash of yellow to increase readability, good usability with well thought details, good looking, contemporary and charming based on what the users felt when testing it.

See you soon !

Jacques Trouillet

Written by

UI/UX Designer @Brigad

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade