Debenhams mobile checkout

The ask: Improving our flawed checkout experience and increase conversion rate.

My role: I was in charge of the UI, as well as enhancing the Debenhams design system.

Teams I worked with: I worked with the UX designer, the Analytics and the Development team.

The impact: Increase the number of customers buying products as well as reducing completion time.

The analytics

• Mobile payment page has the lowest conversion (Desktop 92.4%, Tablet 86.4%, Mobile 78.7%)

• The guest checkout has a high drop off rate

• The abandonment at “My bag” has been consistent (76% bag abandonment).

Qualitative Data

After the kick off meeting, the UX team organised a Qualitative Data session to identify the main pain points in the funnel. During the session, different scenarios were presented and the participants were divided in 4 groups. Each group reviewed the scenarios and wrote down the steps they would take to accomplish the task, as well as, the feelings they had on each step of the journey.

Phase 1 - Quick wins

We started with some quick wins that would improve the experience by making small UI changes in areas where they’re most needed.

In order to have a better understanding of what to improve, the UX/UI team had two sessions for each step of the journey, a page discussion session (analyse the page and mark the main pain points) and a sketching session (sketch some potential solutions).

Those sessions helped me and to prioritise the quick fixes that could be done for phase 1 and the ones to be done for phase 2. We presented back to the main stakeholders and finalised the ones we wanted to test.

My bag - delivery icons

• Problem: Some customers find difficult to understand which delivery options are available and which aren’t.

• Hypothesis: By replacing the current icons with ticks (available options) and crosses (unavailable options) we can help users scan through the information more easily.

• Test result: Annualised uplift of £5.2m.

My bag - sticky button

• Problem: When customers scroll down on this page they can find themselves in a state where there is no CTA visible on the screen.

• Hypothesis: By providing a constant CTA customers would always be able to proceed to the next stage.

• Test result: Annualised uplift of £2.4m.

Additional step at sign-in

• Problem: In user testing customers were very weary of entering an email this early on in the journey as they believed they would be signed up and receive spam. Furthermore, analytics show that there is an high error rate at the login screen because customers fail to provide their email.

• Hypothesis: By adding one step to the sign in journey and by prioritising the guest checkout, we would improve clarity and reduce error rate for forgotten or incorrect passwords.

• Test result: Annualised uplift of £4m.

Phase 2 - Redesign

After phase 1, we started redesigning each page. We already had a clear idea of what we wanted from the sketching sessions. It was now time for the UX designer to work on the wireframes for each journey and customer type (guest vs registered). After the wireframes were completed, I tackled the UI. Our mission was to create a fast, frictionless and secure checkout experience.

My bag

I've redesigned product tile (enlarge images, change hierarchy so price takes precedence) in order to enable customers to easily compare products as well as set their expectations around costs. Also, I've enable editing products at bag via drawer to keep users in the funnel.

Delivery

I’ve decided to provide customers upfront with the different delivery options, their cost & the actual de- livery date that option would yield so they can com- pare & make a considered decision. In order to do that, I have introduced a visual styling of radio but- tons to have a clear splitting of delivery options.

Furthermore, the tech team was challenged to find a way to pro- vide customers with an actual delivery date as soon as an address is entered. In addition to this, it has been decided to predict registered customer options to reduce completion time (pre-select most used address OR most used Click&Collect store for registered customers).

Payment

Order summary: Minimise the order summary section so that it acts as a reference rather than an action.

Beauty Club Card: Match customer expectations by bringing points & rewards together (previously, they were sitting in different places). In case no cards are saved, bring clarity so that customers understand they need to add an existing card to earn points.

Payment methods: I have reduced the number of form fields resulting in a cleaner group of forms. Once one form is filled, we would automatically select the next one for the user to simplify its experience. For returning customers, we would default to their last used payment method.

Order confirmation

The main goal of this page is to reassure the customer that their order has been received. This is why I have placed a big tick icon first followed by the copy “we have received your order”. I have given more prominence to the order number as well as the confirmation email to clearly inform the customer when their order will arrive & what the next steps are. The final touch was to reduce the number of elements on the page so that the key information is clearly accessible.