ABC Groceries, faster better … smarter

Brief

Two weeks to work on a fantasy supermarket brand, ABC Company, and develop specifically its online platform. Without any visual brand guidelines, our team of 4 designers had to focus on user research to create the best service for the said brand.

This supermarket is a leading regional commerce focused on offering high-quality products and a personalized shopping experience. They have an established network of premium brick & mortar grocery stores conveniently located to service their client base, which exceeds 30% market share in the region. The management team is aware that more and more consumers are switching to online grocery-shopping due to its flexibility and convenience. Online grocery shopping is expected to grow five-fold over the next decade. By the year 2025, online groceries are expected to own 20% of the market, which will account for $100 Billion spent on online groceries every year.

User Research

We conducted a Lean Survey Canvas, in order to align the team on who is the user target. We then sent the survey and conducted out-of-the-building interviews to know more about our users pain points.

Defining our research goal as follows:

“Learn about single parent’s purchasing power online and how often do they purchase groceries during what hour of the day.”

We had to keep in mind that the goal is to empathize and understand how the user think and feel.

1. What do you find challenging when grocery shopping?
2. How do you choose your supermarket?
3. What are some apps that you find easy to use and why?
4. What are your thoughts on delivered perishable goods ?
5. What is one thing that supermarket can do to make your experience better?
6. How often do you shop online for groceries?
7. What should supermarket stop doing?

At first our team targeted problems on delivery options. Just to realize when we did comparative analysis that all the competitors already propose home delivery or in-store pickup. We had assumptions about the user’s doubt in the freshness of delivered groceries and the punctuality of delivery time.

We wanted to target single parents with little to no time to shop, in order to help them shop faster AND healthier, while giving them options to cook the recipe or not.

Affinity Diagram

After regrouping the many insights from the survey respondents and the user interviews, we used affinity diagramming to make cluster of user problems, thus creating clear opportunities for ABC Company online service.

Post-it love. This is what true UX designers are all about.

We targeted users in need of fresh products however who couldn’t really take the time to go to the farmers market or spending time in supermarkets making sense of which bio product to buy.

Unsorted Affinity Diagram

Sorted designer (me) in front of unsorted diagram

Sorted Affinity Diagram

User Persona

Through doing a persona we understand further the needs of the users. Analysis of one user’s need and goals, her behaviors and frustrations.

User Journey & feature prioritization MOSCOW

The user journey helps us seeing the different touchpoints and opportunities our ABC service will develop.

We chose to interact and help the user at the point when they think about the dinner’s menu, browse through the supermarket website and place the order to get delivered fast.

Considering this we thought of the features our website would or wouldn’t have so we can build an MVP (minimum viable product):

Must Have:
As a user, I would like to have healthy pre-made meal with the option to buy the ingredient of that particular meal.

Should Have:
As a user, I would like to track my delivery so I can plan my schedule accordingly

Could Have:
As a user, I would like to have a reward program so I am eligible for future discount.

Won’t have:
As a user, I want to have the option of a personal shopper.

Problem statement

ABC company was designed to allow fresh delivery of products to single parents who have limited amount of time throughout a day. We are trying to solve the following user pain points; finding product, saving time, having a user friendly environment, and having trouble carrying products back home.

Ping-Pong break because we deserve it

Jumping to user flows and sitemap to organize information and features

Full user flow of the ABC Company website

Our goal is to make a time-saving and effective order placement process, so that in a few clicks Mary-Jane our persona can buy healthy recipes with fresh products included

Specific user flow

Sitemap to help organize categories

Card sorting is a first user testing step.

Low-fidelity prototyping & testing

Go fast with hand concept sketches in order to test and make modifications. Iterating over this process saves actually the designer and the company a lot of time thus saving also money. cqfd.

Different options of low-fi wireframes. Silent dot voting to pick the best ideas

sharpie ❤ paper

Our user testing of the low-fi prototype:

Mid Fidelity Wireframes

First draft of the mid-fi wireframes

Final version of the mid-fidelity wireframes

Brand attributes and Moodboard

Through our brand attributes we want to showcase ABC Company as a bold and reliable company that delivers fresh produce.

High Fidelity visuals

Main User flow for the high-fidelity wireframes

Mentioned above, grids and layout are important. Below, it is the recipe page of our website. It can be seen that the contents are aligned perfectly.

Final Deliverable with micro-interactions (powered by Flinto …a good dose of patience, nerves & coffee)

Thank you for reading and a thousand thanks to my amazing classmates at Ironhack Berlin Michael Chuang, Victor Kausch and Hela Ben Amara and my teacher Murilo Mafra for this project. It’ll forever be my first designer project. ❤

Clap and Salut !

Steph