E-grocery design: ABC Supermarket

Inès Serizer
3 min readDec 11, 2018

My first project was to design an online shop for the supermarket company “ABC”, in two weeks.

The goal was to provide ABC with an online presence and also to create a new innovative feature in order to penetrate a new market.

There are more and more people eating gluten-free products, which represents a big market-share for ABC.

In order to highlight their gluten-free offer we decided to create a feature that turns regular recipes into their gluten-free version.

During the whole Design-thinking process we have been trying to understand how a gluten-free user copes with grocery shopping and how we could help them.

Interviews and surveys helped us to come with the following affinity diagram in order to build our persona:

And we thus came up with the following persona:

Hannah’s user journey:

Illustrations by Lolla Massari https://medium.com/@lollamassari

We built the site map:

And a dozen of user flows…

We designed our mid-fi wireframe with the previous user flow.

We then started to do the UI part with the moodboard according to the brand attributes (reliable, sustainable, fresh, urban, on trend, minimalist, innovative, modern, but never boring.) :

We then created a matching style tyle:

We then designed the high-fi prototype that you can see below:

--

--