JB Hi-Fi

Optimising the online checkout experience

arrow-down
jb-hifi-hero

Overview
As the retail landscape in Australia continues to change and custom expectations grow, JB Hi-Fi recognised an opportunity to increase revenue and overall growth by removing friction from the customer experience. We worked with JB Hi-Fi to perform research with customers and provide recommendations around how they could improve their ecommerce website, with a focus towards the online checkout experience.

My role
Interaction design
Visual design
Prototyping
User research

Year
2017

Team
Client Principal
Retail Specialist
Technical Lead
Developer
Business Analyst
Service Designer

JB Hi-Fi is one of Australia’s largest retailers of consumer goods, specialising in movies, video games, music, electronics and home appliances.

The organisation are in the top 250 retailers in the world and are one of the fastest growing, most successful businesses within their industry.

As JB Hi-Fi expands across Australia and New Zealand, there is a considerable opportunity to continue increasing revenue and overall growth. To achieve this, the business acknowledges that they must improve customer experiences across both the digital and in store channels. In doing so, this will yield positive results and further protect and extend their customer base.

Some of the key experiences that JB had a desire to improve prior to Christmas 2017 included improvements to online checkout, an enhanced Click & Collect experience and the ability to provide online delivery options.

The problem

JB Hi-Fi’s online store is in high growth, but the pace of technology change is not fast enough. During discovery, we found the following problems.

01/ Usability
Data showed that customers were struggling to use the checkout and convert on mobile. This was a problem as over 50% of website traffic came from mobile users.

02/ Transparency
Customers wanted more transparency and certainty around product availability and delivery timeframes.

03/ Omni-channel experience
Customers were using the website to research stock and availability in stores. By improving the website, JB Hi-Fi could also improve the in-store experience.

04/ Delight the customer
Additional features should also be provided to delight the the customer and give them a better experience.

Some of the things we did

jb-hifi-futurespective

Futurespective

We conducted various activities during Discovery in order to understand the bigger picture and the needs of the customer. One of the activities we started with was a 'Futurespective'. The purpose was to ideate three years ahead without constraints and then identify the capabilities, processes, and skills that JB Hi-Fi need to reach these goals, and anything that will stop them getting there.

jb-hifi-journey-map

Journey mapping

To better understand the process of how JB Hi-Fi fulfilled an order and how the customer was effected, we spoke to various teams and mapped out the journey from the moment an order is submitted to when the item is delivered to a customer or collected in store. We focused on the customers’ motivations and pain points and found many opportunities to improve the checkout and adjacent processes to make a more streamlined experience for customers and store staff alike.

jb-hifi-user-research

Customer and staff interviews

We also planned and conducted in store interviews with both customers and staff. Through these conversations, we gained a deeper understanding of behaviour, pain points and needs from both perspectives. Some of our findings included:

Customers:

  • Love JB Hi-Fi staff knowledge and passion.
  • Research products on the site first (75% of interviewees).
  • Would rather have more visibility and certainty around delivery/Click & Collect timeframes, as opposed to faster turnaround.
  • Are frustrated by the lack of transparency of order status.
  • May be reluctant to buy larger items online because they can’t negotiate on price.

Staff:

  • Spend a lot of time calling the customer service team.
  • Have inaccurate stock levels.
  • Prefer to focus on in store customers.
  • Are confused around best delivery choices.
  • Find it difficult to up-sell Click & Collect customers.
jb-hifi-old-ui

Usability testing on the existing checkout

Testing with customers revealed that they were struggling to use the old checkout on mobile devices. Some of the pain points we identified included:

  • Lots of scrolling to find information in a cluttered interface.
  • Over-complicated processes and interactions made it harder to browse and buy.
  • Unclear language around stock availability. Customers believed that if an item was on the website, it was in stock. This wasn't always the case.
  • Confusing language around delivery options and timeframes.
  • Lack of transparency around order status.
  • Relevant or related products weren't always highlighted on the site (though store expertise handles this well).

The checkout flow

To account for more detailed pathways and edge case scenarios in the checkout process, I developed a comprehensive user flow. The diagram outlines the various interactions and pathways from the product page through to the order confirmation page.

jb-hifi-checkout-flow

The UI design

Since the existing checkout design was cluttered, unclear and laborious, our recommendation was to simplify the interface, remove unnecessary barriers, and shorten the path to purchase. Following the JB Hi-Fi stlye guidelines, I created a click-through prototype using InVision and performed remote usability testing to test our assumptions and compile some actionable feedback.

jb-hifi-mobile-ui

Stock availability

Problem: confusing and misleading presentation of stock availability, delivery/collection options, and timeframes.

Solution: improved product page UI, language of stock status, and store lookup functionality.

jb-hifi-store-finder
jb-hifi-fulfilment-options

Simplify order fulfilment

Problem: customers were able to select both Delivery and Click & Collect options for different items in a single order, which led to fulfilment complexities and poor customer experience when orders could not be fulfilled.

Solution: reduce confusion and room for error by offering a single fulfilment type per order.

Add to wishlist

Problem: increased cart abandonment rate as some customers were using the cart as a way to save items for later.

Solution: introduced a 'wishlist' feature providing account holders with another way to save items they are interested in.

jb-hifi-add-to-wishlist
jb-hifi-guest-checkout

Checkout as a guest

Problem: the checkout process was not only clunky, but it did not allow customers to purchase items without creating an account. This was contributing to increased cart abandonment.

Solution: simplified customer account creation and login, with the added ability to check out as a guest.

Outcomes

The new checkout was designed and built in 12 weeks, just in time for the peak Christmas trading period in 2017. On Cyber Monday, sales were up 85% over the previous year. Providing more visibility around stock also allowed JB Hi-Fi to offer more competitive delivery options to customers. They are now able to commit to two-hour windows for 'Click and Collect' orders, with 90% of orders ready within an hour.

Next project →