UI Case Study : Biocoop e-grocery design

4 min readNov 30, 2018

After the UX comes the UI design.

It’s time to go visual to test the viability of the results of our UX process now that it’s done. (See the UX part)

See the end-result in Marvel app : https://marvelapp.com/3hj47e2

The process :

Remember that “done” is only a step of a lean UX / UI design process, we launch products that will improve over makeovers and enhancements. It will be redefined along the road, because refinements are a process of trial and errors to meet users maximum happiness.

The Moodboard — a vision of the overall identity

I gathered earthy images around the keywords of our brand : organic, nature, earth, proximity, terroir, local products.

First, I choose to go with a sans-serif type for maximum readability online.
To match with the existing logo of Biocoop.

I also choose round shapes. Something friendly, close to the consumer, round smooth and natural, Arial Rounded for example looks great next to the round shapes of fruits and vegetables with it’s smooth natural curves.

For colors, I picked fresh and vibrant colours already existing in the graphic chart of the brand : Blue, Green & Yellow being the powerful ones already in use

The UX process is an iterative one, but UI , the interface between the human and the machine is maybe one that is more prone to changes as it is the part where the digital product is tangible for the most of us.

The UI is the part of the work that carries most of the usability weight, because it’s seen, it’s felt.

It carries emotions -or lack of- and it’s the bridge between the consumers and the brand, the one they choose to cross or not, the trust to cross and to use the bridge depends on it’s appearance and built.

The design work will focus on the visual part to meet the user’s needs defined in the user-centric design thinking process that doesn’t care of aesthetics but on affordance, ease of use and overall fluid usability .

It’s the first point of contact of the end user with the digital solution.

It’s a critical moment, so you have to do as much if not more research to argument every step of the design process.

First of all, I have to consider the existing ecosystem, the graphic chart of the Biocoop website already in-use and the informations gathered about their renewed the cooperative logo and they did some explanation use of colours.

When those Biocoop brand basics were in my moodboard. Like a big collage of ideas and inspirations filled with types, imagery, colors, icons, everything that gave a voice to the brand Biocoop was clearer, combined with their core value words and all interfaces inspirations and ambiances from the illustrations, picture mixed arts to bring out the brand identity and bring it’s essence in a totally unique and tailored visual design in the next step, the style tile. Like in the UX part, you converge and define all the ideas you’ve found in the diverge phase where you opened all horizons to find the firsts ideas.

The essence and voice of the brand redesign is now presented into the style tile, it pin point the directions I choose to keep amongst all the influences gathered.