Grocery prime
case study

project overview

Grocery Prime is a data-driven supermarket focused on delivering high-quality products at its customer's convenience. By applying a design thinking way-of-working, I've helped Grocery Prime identify user pain points within the customer journey.

Because of this, Grocery Prime has created an end-to-end mobile experience that embodies and enhances the everyday shopping practice. The challenge would be to create an end-to-end mobile experience that incorporates and enhances typical shopping habits.

My Role
UI and UX Designer

Skills & Tools
Adobe XD - Design Thinking - User Interviews

affinity mapping

Affinity Map

At this point, I had gathered user research. Now, I needed to incorporate it to turn data into actionable information. Devising key user research findings on an affinity diagram, I discovered patterns, pain points, and design opportunities.

analysis

Understanding the motivating aspects behind what is important to people when grocery shopping is crucial to developing and creating an app that people will use regularly. Therefore, my main recruiting criteria for this project was to find users who may already shop online, but even if they didn’t, they could be swayed if given a great alternative to how they traditionally shop. 

In my findings, 50% of participants I spoke with pre-planned their shopping with a list, suggesting this would be a favourable consideration when designing the shopping app. It also seemed that convenience was essential regardless of status. Customers wanted immediate satisfaction whether shopping in-store or online. 

Participants were all in agreement that they wanted to find and buy products quickly without hassle or friction. The key takeaway here is a need for fast and easy transactions. A fair price and good value also played a massive part in how satisfied they were when shopping for groceries. People wanted to feel like they were getting their money’s worth. 

Pain points that need to be solved to make the app work for the customer:

I found that convenience and the time grocery shopping absorbed was high on the agenda when conducting this research. It was clear that participants were unanimous in that they wanted a speedier and easy checkout process. Visiting the supermarket involves waiting in long queues or searching for the products they want to be available to them. This could be remedied with time-efficient payment options or a rapid delivery system.

priority features

After considering the research gathered, I put together a MoSCoW board to generate some features ideas.

Priority Features map

user flow

The user flow diagram was created to lay out a skeleton for the mobile application.

Diagram of User flow for the Grocery Prime App
mobile phones in green

Visual design

Grocery Prime is current, convenient and informative. Being ahead of the game, technically, their brand is still very much in touch with the community. Sustainability is at the forefront of the business, so appealing to an ethical customer is essential. The brand design is focused on renewal, nature and growth using a natural colour palette.

Login

I decided to go with a clean and simple UI design to accomplish a straightforward signing in process.

iPhone screen
iPhone screen
iPhone screen

Home Screen

See products that are available on special offer from the home screen feed. Browse for items from favourites or by category using detailed filtering options. From here, users can access account information and app settings.

iPhone screen
iPhone screen
iPhone screen

shopping list

Users can create new lists and refer back to previous lists. The shopping list is simplified to add items from the store, previous lists and favourites. Alternatively, use Voice recognition to add items.

iPhone screen
iPhone screen
iPhone screen

Category

When presented with categories, the user can search for items from group listings. The selected group will give options within that category. Once an item is selected, a detailed product view is available.

iPhone screen
iPhone screen
iPhone screen

search

Predictive search will offer the user suggestions based on what they are inputting. This allows finding items easier with access to the plus icon from the navigation bar. Alternatively, search using the voice recognition icon.

iPhone screen
iPhone screen
iPhone screen

Cart

When finished shopping, tap through the shopping cart screen. Here users have the option to adjust an order. Also, decide on delivery, pay in-store or click and collect before checking out. Once all details are entered, the user is taken to a confirmation page.

iPhone screen
iPhone screen
iPhone screen