UI case study for a Supermarket app

Designing a new feature

The goal of this project for the Ironhack Bootcamp was to analyse an already existing and highly adopted app and incorporate a new feature into the existing product. The feature you develop will be base on an area of functionality to be explored and user research.

As a new designer joining a team, you’ll often have to rapidly come up to speed on your product and users, and quickly iterate on proposed solution in tight timelines.

Your stakeholder will all have opinion and you’ll have to get used to supporting your claims and finding ways to incorporate new features into the existing platform based on user needs.

App
The app for this project I choose for this project is the Picnic app, an app based supermarket in the Netherlands. As the challenge was to also design based on your used operating system, I focused for the system design on IOS.

Emphatize

To start with the research I downloaded all competitors apps to be able to check out all features which are used. All the features are highlighted in the Feature competitor map.

Next to this I looked at the app store reviews for Picnic to see how users reacted to the app. This gave a quick overview of some of the suggestions and feedback of the app from a lot of users.

From there on I gather some quick insights by interviewing users of the picnic app to check their pain points and thoughts on the app.

“ It would be good if you could sort on price”

“ Make a desktop or tablet version in case you are on the computer and want to order when you are at work”

“Put in your Household number, so you get options for this”

“Sort on popular/most loved items”

I found that shoppers like to create list for everything, and while there is the option to see you most purchased options. The users mostly liked to see the option where they can save and create their own list for special occasions.

MOSCOW & MVP

Using the insights from the quick research and interviews I did, I put all possible features in the MOSCOW method framework.

This let me to the MVP, which is constructed below. Focus should be on the ability to find everything in their shopping app, even the creation of their grocery list for easy access and orders.

“ The app Picnic enables Grocery shoppers to purchase al their groceries online which wil be delivered to their doorstep. This will mainly help customers find products, tasty pictures of food, descriptions, and their grocery list on what to buy”

Sketches

Based on the ideas that came from ideation and MOSCOW, I created the sketches. As testing the sketches with some users, I made some changes to the design. Instead of creating ‘list’ types, the list option should also be in visuals as with the current design as the app. Before starting the high fidelity frames, I quickly created a mid-fi to see how to organize all the things in the app frames.

Design

Picnic’s design is very playful. So before starting to creating the mid and high prototypes, I looked at the inventory of Picnic’s design system. To make everything as consistent as possible over all of the frames, I started with creating the buttons, icons and formats of the screens.

High-Fidelity

After creating all the components in my atomic design to be used in the frames, I started to create the high fidelity frames.

Final Thoughts and Next steps

Seeing the end project and see the high-fi version come to life is really nice. It takes some time to get the right matching designs systems in place. I faced some inconsistencies as example, the icons used where to widely available.

Next steps would be to focus on incorporating some of the other suggestions which aligned with the list creation (as for instance barcode scanning).

Excited for the next project!