Redesigning a mobile retail experience

------ Currently being updated! -------

YEAR

2018

PLATFORM

iOS & Android App

MY ROLE

Lead UX/UI Designer

Introduction

River Island is a fashion icon on British high streets known for delivering the latest fashion trends at affordable prices to their fashion conscious customers of women and men in their mid-20s.

In this project, we revamped the user experience and redesigned the UI, which was a critical part of their digital transformation goal.


My Role

As the lead designer for this project I had to collaborated with cross functional teams of researchers, developers and product managers.


Problem

Since 2013, River Island's app experience has not been changed. Here are the key problems with the core experience.

The Old Mobile Experience

PROBLEM #1

No Relevancy

Irrelevant content directly impacts the conversion rate. Every individual is unique but every day, the app recommends irrelevant content that are not personalised to our users.

EXAMPLE

The app shows female products to men—the user might feel that the app is not for him, and he might never use the app again.

IMPACT

With no relevant content, users tend to not use the app and spend less time on it.

PROBLEM #2

No Defined Journey

Unclear user experience leads to frustration in users—in turn increases the drop off rate.

EXAMPLE

There are multiple entry points to perform the same action.

IMPACT

With no defined journey, users easily get lost and lead to low conversion.

PROBLEM #3

Brand & Product Perception

The copywriting and visual elements do not speak to our brand—they lack consistent emotional branding and a clear strategy.

EXAMPLE

Our app messaging gives users the impression of low quality offers, like ‘Shocking Deals’.

IMPACT

A product without a strong branding is just an app.

PROBLEM #4

Inconsistent Experience

Inconsistent design breaks the user experience and increases technical debt. Users are more likely to be lost in the app.

EXAMPLE

The design components look different on most pages, so when one component breaks, the app crashes.

IMPACT

Without a consistent and mature UI and design system, we will always spend time building on top of existing solutions.

Defining the Problem

How might we redesign a better experience for customers to buy more?

Goals

BUSINESS GOALS

Strengthen the value proposition of core products

With new products introduced, we want to highlight our core product offerings. We aim to allow a habit-building & fast checkout experience for our consumers, while strengthening product discovery on the app.

Operational efficiency

To optimise internal operations, we will build scalable design components, which will work all platforms.

USER GOALS

Increase content relevancy

To work with the data analyst and engineering team to build a recommendation engine that automatically shows customer the most relevant content based on their past purchase behaviour, interests and most favourited products.


A delightful, consistent consumer experience

To ensure a proper design system is in place to reduce technical debt, and give our consumers a better, consistent experience.

Impact

As this is a huge project, we released the new designs in phases.

Our Users

Before we started designing, we deep dived into existing behavioural and purchase data of our users to understand them better. We also conducted a series of customer interviews.

We defined 2 key user archetypes, and mapped them to their respective jobs-to-be-done.

The Loyal Fashionista

A loyal River Island customer who is always on the hunt for the latest styles.

JOBS-TO-BE-DONE

When I want to go out, I want to wear something new, so I can look my best.

The Casual Browser

She/he is more passive and and not looking for anything in particular.

JOBS-TO-BE-DONE

When I don’t know what to wear, I want to find new items so I can have a new look for a my event.

Process

Design Workshops

Design Sprints

We conducted design sprints to facilitate collaboration cross-departments. Product Designers, Product Managers and Creatives contributed their fresh ideas in this sprint. The purpose of these sprints is to align everyone on the same goal—To improve our consumer experience by solving our user's problems today.

Early designs

A sneak peek into my early wireframes, mid-fidelity designs and drafts. The designs have gone through at least 20+ iterations per screen. It is due to several reasons: Change in business direction, a shift in product roadmap or simply to improve the user experience.

Home Tab

We want our home tab to be personalised to each user. These are the various designs I've tried and did not make the cut. It could be due a number of reasons like unclear value proposition, cluttered designs, and lack of scalability.

Explore Tab

A place for further exploration so users could discover something new and interesting. Instead of asking users what products they want to see, we ask them what they want to do first. One of our design principles is that each screen has a singular purpose. This is why we don't overwhelm the user with too much content on the Explore tab.

We went through 200+ iterations.

The initial designs went through several user tests, discussions with operations, marketing and business teams to ensure we have a friendly and scalable user experience.


Usability Testing & Customer Interviews

To validate our designs or test prototypes, we did guerrilla testing with real users. We did this in-person. Now, our customer interviews are done remotely.

We've tested the prototype with 12 people in a controlled testing environment as well as in-store.

Customer Interviews

Final Designs

Here's a detailed walkthrough of the revamped app.

Looks new. Feels like home.

Before the redesign, the app was cluttered, it had a lack of focus on trending products. Now, River Island has a fresh new modern look and a better experience. To improve our brand and product perception, we introduced new, scalable components, redesigned micro-interactions and repositioned the product.

Your home is personalised to you

The content you see is now more relevant. We collaborated with the data science and engineering team to implement full personalisation of the user experience to show you content based on past purchase behaviour and interests.

The prominent QR scanner on the bottom menu has a 31% increase in usage.

Designed for discovery: The Explore Tab

The old 'Nearby' tab is replaced with 'Explore'. While it wasn't an easy decision to make, people can now navigate to discover new things easily. Detailed breakdown below.

Discover by Categories

To encourage discovery, we reduced the friction when switching categories and products. With products as the main tab, people are aware of our other products.

Improved Product page

We have separated content into 3 pages for easier navigation. Social proof is also more prominent now, with the key brand information displayed upfront like add to basket button and save to favourites.

Revamped Categories Page

Besides making the photos more prominent, I rearranged the information on the page to tell a better story. Based on customer feedback, there is lack of trust in imagery. So, I paid extra attention to improving the trust through social proof and reviews, and displaying the most important information upfront to give clarity.

Now, highly-rated reviews with a lengthy description will be shown first so it is more helpful for users than reviews with no comments.

What we learned

Products don’t exist in a vacuum

With a major user experience revamp, our internal processes are affected. For example, the operations team needs to change how they tag offerings or our merchandise.

If we didn’t collaborate with these teams, listened to their concerns, and evolved the tools they worked with, our app revamp would look nice only as a prototype, but fall flat once implemented in production. Hence, we had a lot of alignment initiatives going on in the background, such as re-defining our brand guidelines.

Take it one phase at a time

We learned to break down complicated designs into small, manageable chunks. This eases development and handles bugs as we go along.


Future

Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.

Post-launch optimisation

This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.

Continue to design better experiences

To follow through the product roadmap and continue to stick to our design principles.

--------------------

This has been my impactful contribution at River Island. I couldn't have done so without the amazing team at River Island! Huge kudos to the product engineering team, our QA team, and the data analyst team.

Other projects: 

© 2024 Michael Voang