PLUS

Supermarket App

plus hero image

Client

PLUS, a Dutch co-operative supermarket chain headquartered in Utrecht and with 270 stores across the Netherlands.

Role

UX research and strategy, facilitation, interaction design, usability testing.

Introduction

I joined the PLUS project about two years after the launch of the product. The app allowed users to find products and offers and place orders, as well as participate to loyalty programs.

At that point, one problem stood out as a potential opportunity for improvement. Data analytics on the app and its customer segments highlighted the fact that only a small percentage of users were actually placing orders on the app.

The majority of people just used it to check promotions (the promo checkers segment) and never proceeded to add products to the cart. Leveraging this user segment and triggering them to place their first order could lead to a big increase in purchasing users and thus revenue.

segments

Introduction

I joined the PLUS project about two years after the launch of the product. The app allowed users to find products and offers and place orders, as well as participate to loyalty programs.

At that point, one problem stood out as a potential opportunity for improvement. Data analytics on the app and its customer segments highlighted the fact that only a small percentage of users were actually placing orders on the app.

The majority of people just used it to check promotions (the promo checkers segment) and never proceeded to add products to the cart. Leveraging this user segment and triggering them to place their first order could lead to a big increase in purchasing users and thus revenue.

The challenge

How might we attract new purchasing users and design for conversion?

customer journey

Our focus

Although during the time I spent working on the PLUS app we proposed UX improvements throughout the customer journey, for example streamlining the checkout flow, for the purpose of this challenge I'm going to focus on the improvements we proposed for the beginning of the journey, specifically pertaining the Home screen.

home screen before our redesign

The Home screen before our redesign

When reviewing the app, we could notice that the current homepage was intended mainly as a navigation tool. It mostly consisted of static buttons which were duplicating elements already accessible via the bottom navigation. The design was not encouraging browsing and exploring, nor was it showing any products.

Desk research

To avoid reinventing the wheel, we've looked at what reputable sources (such as the Nielsen Norman Group and the Baymard Institute) recommended in their papers and studies, as well as how other apps were solving the same problem.

Best practices

According to Amy Schade, there are 5 types of e-commerce shoppers. The promo-checkers segment for the PLUS app, falls into the categories of browsers and bargain hunters. There’s a big opportunity to turn these users into buying customers, if we are able to understand their needs and deliver what they want, for example “send coupons, offer discounts, and give shoppers free shipping with minimum purchases to attract and retain bargain hunters”.

Moreover, home screens should generally support a browsing behavior, by integrating discovery elements with more visual and direct links, for example offers of the week, the recipes of the week, recently purchased items and best sellers. As Jakob Nielsen puts it, “don’t just describe what lies beneath the homepage. Specifics beat abstractions, and you have good stuff. Show some of your best or most recent content”.

Benchmarking

When looking at competitors and other top shopping apps, we noticed how they use the home screen as a trigger to browsing and discovery, to engage the user and drive conversion from multiple angles. In our case, free shipping deals could have been highlighted to serve as a hook for a first time purchase, since shipping costs were a big obstacle towards conversion.

The search field also came up as an important addition to the homepage. As Jakob Nielsen argues, “when users want to search, they typically scan the homepage looking for ‘the little box where I can type’”.

benchmarking

Benchmarking

When looking at competitors and other top shopping apps, we noticed how they use the home screen as a trigger to browsing and discovery, to engage the user and drive conversion from multiple angles. In our case, free shipping deals could have been highlighted to serve as a hook for a first time purchase, since shipping costs were a big obstacle towards conversion.

The search field also came up as an important addition to the homepage. As Jakob Nielsen argues, “when users want to search, they typically scan the homepage looking for ‘the little box where I can type’”.

home screen before our redesign

Ideation and workshops

Based on our insights, business goals, best practices and benchmarking, we got together in several workshops tackling different parts of the scope, from ideating what the new home screen should include, to defining some aspects more in detail.

One of the main additions we envisioned for the homepage was the so called product tile carousel, a component that could allow us to show products in a scrollable and engaging way. To design this component, we ran a couple of workshops where we focused on getting the information hierarchy and grouping just right.

Prototyping and testing

Throughout the project we've tested and iterated upon our designs. Our prototypes included not only the home screen redesign, but also improvement throughout the journey, such as a streamlined checkout flow.

We planned a series of usability testing sessions with a panel of PLUS customers and observers from the client side, and each iteration took us closer to the final solution.

usability test

Prototyping and testing

Throughout the project we've tested and iterated upon our designs. Our prototypes included not only the home screen redesign, but also improvement throughout the journey, such as a streamlined checkout flow.

We planned a series of usability testing sessions with a panel of PLUS customers and observers from the client side, and each iteration took us closer to the final solution.

Our solution

Based on the research we conducted and the ideation sessions and testing we ran, we were now ready to propose a redesign of the home screen. Here's what we recommended.

Search field

We introduced a search field, which could stick to the top of the page when scrolling. This could give users a fast lane to find the products they wanted and add them to the cart.

Loyalty card and campaigns

We improved the legibility of the campaigns component and separated it from the loyalty QR code that users scan at the cash register. The whole component is now more readable, and multiple campaigns can be found easily by scrolling the carousel.

search

Search field

We introduced a search field, which could stick to the top of the page when scrolling. This could give users a fast lane to find the products they wanted and add them to the cart.

Loyalty card and campaigns

We improved the legibility of the campaigns component and separated it from the loyalty QR code that users scan at the cash register. The whole component is now more readable, and multiple campaigns can be found easily by scrolling the carousel.

personalized offers

Personalized offers

Personalization goes a long way when it comes to retaining and engaging customers. These personalized offers are based on the user's shopping habits.

Free shipping deals

This section shows products that, when added to the cart, would guarantee free shipping for the whole order. As shipping costs can be a big obstacle when it comes to placing orders, promoting these items had a great potential to increase conversion.

free shipping deals

Free shipping deals

This section shows products that, when added to the cart, would guarantee free shipping for the whole order. As shipping costs can be a big obstacle when it comes to placing orders, promoting these items had a great potential to increase conversion.

recipes carousel

Recipe carousel

The visually appealing recipe carousel serves the purpose of inspiring and delighting users by promoting recipes.

The recipe section was originally called Cooking with discount, and we've replaced this obscure internal jargon with something more easily understood by users.

Takeaways and learnings

The outcome of this effort was very positive and, as MOBGEN left the project due to the end of our contract, PLUS is now implementing all these improvements one after another.

This was the first project I joined where the product was already developed and established. Before that, all my projects involved new products which we were designing from scratch. Joining an existing project allowed me to look at the product with fresh eyes and bring a new perspective to the team, but also leverage ideas that were already in the air and put them together cohesively in a new proposal.

Another thing that this project taught me is just how patient one has to be when proposing new things, especially if the organization you are proposing them to is relatively big and has internal and external dependencies as well as intricate legacy systems.

You may also like...