Aldi Select

Creating an interactive app for Aldi’s new checkout-free concept supermarket.

Based on the current challenges the supermarket retail industry faces with in-store queues, there is a need for digital developments in-store to further assist customers whilst shopping in checkout-free stores.

Tools

Figma, Invision, Notion

Role

UX Designer, User Research

Application

Mobile

Timeline

2 Weeks

Problem Statement

How might we get supermarket users to use the Aldi app while in-store to assist them efficiently tackle problems they would usually seek a store assistant to help with.

Pain points:

  • Users not being able to access their shopping lists.
  • Users not budgeting shopping costs prior to arriving.
  • Confusing supermarket aisle signage.
  • Double checking the price of items before going to the checkout.

Solution

Goal:

The goal is to create an interactive re-design of the current Aldi app which will assist the users with a more efficient in-store journey.

Approach:

  • Address current pain points: Create new features to ensure accessibility and other user needs are adhered to.
  • Understand how users can make the most of the unique shopping experience.

Design Process

  • Competitor analysis
  • Interview
  • Survey
  • Ethnographic research
  • User persona
  • Empathy mapping
  • Crazy 8’s
  • Low Fidelity
  • Mid Fidelity
  • High Fidelity

1. Discovery

Based on my user research it was clear to understand most supermarket users consider waiting or queuing in-store a tedious task, therefore adding comments such as “Scanning items on an app to check out at the end” and “Incorporate a fast queue for single items” would better their current supermarket experience. This indicates that anything that can help speed up the current process or incorporate more value for money when shopping will be a great additional feature to their retail experience.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">Business Research

Competitor Analysis:

This competitor summary has presented insight into what Aldi’s key competitors are planning and executing within their own app and in-store technology, based on my findings this will help me understand what users consider as an important factor when using supermarket apps, this will aid in my ideation techniques to ensure new concepts I think of work well with real life situations.

This method allows me to take into consideration the benefits that some competitors are currently using and understand why these techniques work well with users of supermarket apps. A possible weakness is that not all types of consumers shop in the same way so it has to be understood that not all techniques that competitors use will benefit an Aldi customer.

I believe a competitor analysis should be completed prior to any other user research as you get to identify the core business values and plans prior to understanding a user’s need. With this analysis, I hope to achieve a clear idea of what interactions within the app can be developed further and efficiently assist in any problems the user may encounter.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">User Research

Ethnographic Research:

I had the pleasure of collating real-time observation research within Tesco’s new “GetGo” store in High Holborn, London. This new rollout is an identical process to Amazon’s Fresh store.

While conducting the research I had asked the user their purpose for shopping.

Their reasoning was to see what the fuss was about and to see how this newly functioning store worked. They showed their frustration at the entry door as they felt the setup process was long, and having to re-enter credit card details for someone who already has a Clubcard account was a hassle. Once instore they felt the store was quite intrusive (cameras located in ceilings).

Interview:

I had interviewed 5 users who regularly shop in supermarkets, my goal was to gain a deeper understanding of their current frustrations when shopping in-store and their thoughts of improving some store journey pain points via an app.

Survey:

My intentions for the survey was to gain a wider understanding of what retailer 17 supermarket users currently use and how often they shop for their household, this insight will help me understand what UK retailer is popular and how often it is likely for the user to be shopping in this style of the supermarket.

This could help establish how often the aisle signage will need to be updated or the margins/text size needed to be for the in-app shopping list.

Tesco GetGo - E-Receipt
Tesco GetGo - In-store Camera & Sensors
Tesco GetGo - Store Signage
Tesco GetGo - In-store instructions

2. Define

It can be easier said than done to define a typical customer who shops in a supermarket, let alone one who would be eager to go fully digital when shopping in-store. However, with the evergrowing frustrations that users face on a weekly basis an easy access app directly on their smartphone seems like an easy escape from the current supermarket shopping processes they are used to.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">User Persona

When thinking about the ideal Aldi customer there is no one box fits all persona. Karl is the type of customer who would use the interactive app when shopping in a checkout-less store and find any aspect beneficial when it comes to finding items quicker and an overall more efficient speed of service.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">Empathy Map

This empathy map indicates what a user may consider prior to shopping in a supermarket. The intention of the map was to understand any feeling a user has about their current experience.

3. Ideate

My exploration of crazy 8’s was my first protocol following my discovery and define process’ I wanted to ensure I would strictly incorporate only the most important assets to this mobile app. This phase gave me insight into the features that would be most beneficial to the user at a given time but not to differentiate from Aldi’s current core brand aesthetics. Within my early understanding of the user problems, I wanted to get a visual perspective of how the shopping list feature may work, I had feedback in a group session from my course peers regarding how this feature will benefit the user in a real-world situation which aided in my discovery of having the products (when typed) appear in a separate category for selection.

Crazy 8's

As a part of this process, I focused on the homepage and following two pages as intended from the brief. This was my first real interaction with design since collating user research and understanding users’ actual pain points. Which incorporated having an accurate shopping list prior to shopping, having the ability to scan products for prices, and knowledge of products in an aisle without having to use instore banners

4. Prototype

Low Fidelity

My exploration of the homepage, aisle interactive map and shopping list feature follows a similar layout to the original Aldi app with large font and iconography to support the definitions.

Mid Fidelity

Within my mid fidelity designs, I incorporated definitions based on the blocks used in my low fidelity. It is key for the QR to be a key feature within the homepage (once logged in) as this gives the user access to the store. I think it is an important feature to the efficiency of the user to have a shopping list within the main navigation of the app.

Style Guide

This style guide follows the principles of Aldi’s branded colours following the 60/30/10 ruling (an interior design technique that aims to give the best balance of colour) throughout the app. I have included the iconography that features in both top/ bottom navigation bars. The UI elements showcase the colouring of default and selected buttons.

High Fidelity

Onboarding Process

The onboarding process clearly defines how the store concept works and a quick 3 step process gives users an insight into how the store process works and what the app iconography represents.

Home

The home screen gives the user access to the QR code and other quick click features such as current promotional discounts and product price checker (these are featured based on my research I found users would like at the forefront of the app’s home page).

High - Homepage (Main)

Aisle

The aisle page is an interactive map (similar to google street view) that will track the user’s location within the store and update the app with the itinerary of the aisles product category.

High - Signage (Main)

Shopping List

The shopping list feature gives users access to creating lists prior to arriving in-store. The app will detect accurate products sold and allow the user to select an item based on an auto-filled generated list. The example in the video is for a user searching the word ‘Tomato’ the app has recognized what the user may be searching for and has populated a list of similar items sold. From this, the user can select a product and have it added to their shopping list.

The user can also create a budget of how much they are looking to spend in this shop, when in-store the live spend view shows the monetary value of the items the user has picked up.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">UI - Design Laws

From my design perspective within my onboarding landing page, I have included hicks law design principles, from an empathic viewpoint it is simply formatted and gives the user two options to continue from.

Another format that my design has accomplished was Jacob’s law, this is shown within the app homepage as I have not distanced this design far from the current Aldi app, my main goals for this was to not re-invent the wheel but to incorporate features that users will find resourceful to there shopping experience.

<span data-metadata="">Accessibly Considerations

From an accessibility perspective, it was my focus to incorporate as much colour into the app without steering away from the fundamental values of the Aldi brand – I have ensured the contrast rating is AAA for the normal text features.

Overview

The defined problems users face when shopping in a supermarket would have a benefit from a checkoutless supermarket given they are then assisted when in-store to ensure the efficiency with adjusting to this new format would be aided digitally. This high fidelity prototype is ready to be tested by users.

If I had more time on this case study I would have spent more time doing qualitative research understanding more of the user pain points, with this it would have allowed me to incorporate more aspects into various segments of the app design and improve the overall user experience.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">Self Reflection

I understand that not all users share the same problems when shopping however from my findings I have understood that one of the biggest pain points when shopping is not having the ability to accurately budget or maintain a live spend feature. I found that within my high fidelity user testing the user observed would like more product details to be incorporated with the ‘special buy’ products.