toggle menu

Brown Thomas | App Checkout

Building a native app checkout experience.

Reading time 2 minutes, 30 seconds

Arnotts Transactional App

Background

In 2017, Brown Thomas was in a period of online growth and embarked on a project to update their existing loyalty app to a fully shoppable platform with the loyalty program deeply integrated. Partnering with development agency NN4M in Scotland, the goal of the project was to create a fully transactional app for iOS & Android.

Brown Thomas Loyalty app screens
Screenshots of the old Brown Thomas Loyalty app for iOS

The Challenge

Brown Thomas is configured on top of the Salesforce Commerce Cloud platform, which has an extensive API available. As an omnichannel business, there were extensive customisations to facilitate unique business operations.

With specific regard to the checkout, these included:

  • Delivery to multiple addresses
  • Gift Card redemption
  • Loyalty points - earn or redeem
  • Gift Wrapping

My Role

Initially I was to cover the paternity leave of my colleague and the UX lead on the project, working with the designer at NN4M to create and capture the front-end design requirements. When complications arose during the ideation of the checkout flow, I was tasked with defining and visualising the checkout journey due to my experience & knowledge gained when designing the Brown Thomas website checkout.

I decided a medium fidelity prototype would cover what was required. I began by benchmarking market leaders applications, learning the subtle differences when designing for a website or an app and how each step was focused to a single action.

Prototype flow diagram
Checkout prototype flow diagram

The prototype illustrated a simplified flow, with clear signposting and communication. It aligned the customer decision points with the website as close as possible, such as whether the order was a delivery, multiple address deliver or click & collect and having payment options grouped together in one screen.

Prototype flow diagram
Checkout designs - multiple address delivery & gift wrap screens

The Results

On the launch of the Brown Thomas app, some more complex flows such as multiple address delivery had been descoped to allow an already delayed deadline to be met. The app conversion rate was tracking approximately 30% higher than the mobile website experience. The app is currently tracking at 4.8 out of 5 on the App Store and 4.1 out of 5 in the Play Store.

Brown Thomas app - App Store
Brown Thomas app - App Store
Brown Thomas app - Play Store
Brown Thomas app - Play Store
Download the iOS app → Download the Android app →

The Takeaways

This was my first experience designing for a native application and I was able to develop my understanding of the conventions of each platform. It was also my first time experiencing aspects of product management allowing me to learn and develop while collaborating with colleagues internally and externally.

Being able to leverage previous work on the Brown Thomas website checkout, I was able to identify the gaps in knowledge with external colleagues. The need for a simple prototype to show the flow of the customer through the checkout journey aided in communicating the complexities and customisations contained within the system.