Case • Job Assignment

Pandazon

Overview

A while back I applied for an opportunity to start as a product designer at the digital product studio PandaPanda based in Antwerp. They were very happy with my application and wanted to test my product design skills by giving me an assignment.

The purpose of the assignment was to see if I understood every part of the design process of a digital product. The end goal? Making grocery shopping faster and easier for the everyday citizen.

Feel free to visit PandaPanda's website by clicking here.

Categories

Market analysis
Web design
Branding
Design systems
Prototyping
Interaction design
Pandazon logo

Challenge

As a basis for the assignment PandaPanda gave me the task to take a look at how the supermarket chain of Delhaize tackled the problem of grocery shopping. Pandapanda wanted to see where the pain points were in the process and find solutions to it.

Deliverables

• The full overview of my design process from finding the problem to a working prototype.

• A high-fidelity working prototype.

Design process of the research fase

Time to hit the field

To understand on how the shopping process of Delhaize I went on a trip to one of their supermarkets to buy some groceries. Before entering the store I installed the Delhaize app to have an understanding on how shoppers used it during their shopping spree.

During my trip to the supermarket I used an in store scan gun and my notes app on my smartphone to document everything about the pain points I discovered during shopping. After returning home I took al my notes and wrote it in different bullet points to have a better overview.

During my trip I also made screenshots of every step I took as a user in the Delhaize app. Besides I took the opportunity to make pictures of the scan gun flow while being in the store. You can find both in the image below.

What did I discover

• As a new client, you don't know which code you need to scan.

• When you scan a barcode, it's added to your basket. However, there is no clear message indicating that it's added to your basket.

• The app's sole purpose is for home delivery or picking up your groceries in the store.

• In the store, you need the scan gun to add everything to your basket. On the other hand, you can also manually add products to your shopping basket.

• After payment, you receive a digital receipt by email if you indicated that you want it digitally. However, you need a physical receipt to leave the store because it contains a barcode required for exiting.

• You can leave the store without the physical receipt if you have the supermarket's client card, the Delhaize Plus card.

Delhaize app flowDelhaize scan gun flow part 1Delhaize scan gun flow part 2

From user flow -

Before designing, I, as a designer, need to understand how the user will navigate the application that I will be creating. To discover this, a user journey is crafted, defining every action and interaction the user will take to reach a specific point.

After completing desk and field research, the pain points are identified. These pain points can be addressed by design features (the solutions) that will resolve them. Each feature needs to be documented on how the user will navigate through it.

This is achieved by creating user flows for each feature. The features I wanted in my application were:

• The ability to scan a product.
• Make it possible to edit the basket.
• Exit the store using the application.

- to defining the MoSCoW

After creating the flows, you need to prioritize the creation of the features. Determine which one is the most important, which one is less important, and which one is the least important.

Prioritizing allows you to launch the final version of the most important feature into the market while continuing to design the others. Throughout a project, the MoSCoW method also indicates which feature needs to be completed first.

The user journey and MoSCoW

Putting the frame
into wireframe

After defining the most important features and paving the road for users to utilize these features, it was time for wireframing.

As you can see, I created two versions, exploring different ways to wireframe the application and drew both of them. Eventually, I opted for the first version as it proved to be the most user-friendly.

First version of my wireframesSecond version of my wireframes

Designing the system

After wireframing, I could finally start my favorite part of designing—setting up the design system. I created the project's look and feel by defining the different elements within the design system.

I specified various styles for colors, buttons, components, typography, and status colors. Utilizing a design system saves a significant amount of time in implementing the brand on the wireframes.

To introduce animation and interaction in the final prototype, I designed some components. You can edit the values or content of a component when you interact with it. However, the most powerful aspect of components is that when you edit the main component, every copy of that component changes simultaneously.

The design sytem of Pandazon

After the design system was up and running, it was time for the final step—applying the styles to the wireframes. As a bonus, I added some interaction and animation to the prototype.

Although this wasn't a required deliverable, I had some extra time. Going the extra mile demonstrates ambition and a genuine enjoyment of the work as a designer.

The flow of the final design