My Account

I joined the My Account team at AO as a UX Designer. We were working on creating a single-page application for account holders and giving the My Account area a fresh new look.

AO is an online-only retailer operating in the UK, Germany and the Netherlands. It specialises in household appliances and consumer electronics.

To comply with a non-disclosure agreement, I have omitted any confidential information. The information provided in this case study is my own and doesn’t necessarily reflect the views of AO.

My role

I led the project of re-designing My Account, conducted research and facilitated workshops. I partnered with a business analyst, a project manager, software developers, and team lead who played a role of product owner. I created testable prototypes and designed high-fidelity UI of the application. I also created a set of icons for My Account that were fed into the design system.

The previous version of My Account
In the previous version almost any interaction would open a new dialogue window.

The challenge

Scalability

Developers were struggling to add new features to the old version of My Account. In the old version, whenever a new feature came out, engineers had to create additional pop-up dialogue window. For example, if a user wanted to edit their details, there would be a form within a pop-up modal window.

User needs

Customers want to see their orders and be able to edit them. However, it was challenging to find the order history because it was hidden at the bottom of the page. Analytics showed that most users didn't scroll to the bottom, so the majority of people couldn't find it; hence we had a lot of complaints.

Business needs

The goal was to increase the uptake of self-serve features. These self-serve features would give customers the ability to reschedule their delivery date and time, download invoices, cancel orders, add services to an existing order, add delivery instructions or contact a manufacturer directly from My Account.

Empathy mapping.
Initial draft wireframes.

Research

Key findings

  1. Nearly two-thirds of account holders visited only once and fewer than one-fifth of account holders visited twice a year.
  2. 87.9% of orders within My Account include only one item.
  3. Account holders have significantly lower drop-off rate on every step in the checkout funnel.
  4. The most commonly used features were downloading an invoice and tracking an order.

I conducted a range of surveys that helped me to better understand users' needs. I had to ensure that My Account is accessible to every account holder, and they can easily find and use the self-serve features.

A solution

Single-page application

The solution came by merely stepping away from one long scrolling page to create a single-page application with improved navigation.

This solution is more scalable, as it enabled developers to create a separate order detail page, where a customer can see all of their order details, as well as using functions such as order cancellation, downloading invoices and rescheduling orders.

I tested multiple variations of navigation to find out the best way for users to navigate My Account. Findings showed that having left-aligned sidebar navigation is most comfortable for desktop users, and full-page navigation on mobile devices provided a seamless experience. A stand-alone menu was created, making it easier for customers to navigate the application and amend their order and personal details.

An old version of sign in page.
The updated version of sign in page.

The outcome

  1. Since 2018 the number of sign-ups has been steadily increasing.
  2. Now My Account is used by thousands of active users every month across different screen sizes and territories.
  3. The new My Account has a seamless experience on different screen sizes.
  4. I've created a better user experience for existing and new account holders by improving the accessibility of the interface.
  5. A simple stand-alone menu was created to improve navigation, making it easier for customers to edit their details and track their orders. The new version allows engineers to add new features quickly.
  6. I designed a separate order details page, enabling customers to see all the details about their order. Users can easily access order-level functions such as cancellation requests, rescheduling a delivery, downloading invoices and adding services to their order.
  7. I created a new set of icons for My Account. The new icons come in two variations outlined and filled. This icon set enables the user to identify facets and interactive elements on the page quickly.
The new filled and outlined icons.
Changing delivery time slot feature

What’s next?

To improve users' experience in My Account area, I propose adding the following features:

  1. Enable customers to add more services to an existing order, i.e. installation, unpack or recycling.
  2. Enable customers to add special delivery instructions after placing an order.

To keep customers coming back, I think that introducing the following features would help:

  1. A loyalty program for account holders to improve retention and increase brand recognition. Customers could collect points and earn benefits.
All my orders are there, it looks and feels brilliant on mobile - including the reset password page.
Alistair
Product Manager
Thanks for giving us such a smooth journey.
Ibtesam
Software Engineer
Next project

AI Chatbot

I've designed an AI-powered chatbot on the Contact us page to reduce the need for customers to contact the company

Read more