JD Williams


Project overview

UX design lead on a project to improve conversion rates to the mobile product search and navigation user journey.

User Research & Testing

Users were often abandoning the product search user journey and were dropping out of the product refine user journey. Although we had quantitive data to tell us where the problems were, I needed to verify and qualify exactly the reasons why.

To achieve this I mapped out the probablematic user journey and wrote a task () which were to be performed on the existing mobile site by real users in remote user testing sessions. The task was:

  1. List dresses
  2. Refine by red colour
  3. Refine by sizes 16 and 18
  4. Remove size 18 refinement
  5. View results

I booked user testing sessions (using “What Users Do” ) with users whose demographic came in the persona groups for the clients “Power Brands” (JD WIlliams, Jacamo and Simply Be).

Discovery

The results of the user testing session revealed thr product refinement UI was causing a lot of problems. To refine the facets of a product, the user had to operate a series of unintuitive drop down menus and I observed a lot of users struggling with this, in addition to listening to the user audibly describe that they didn’t know what to do at this stage in the journey!

I recorded a video of myself navigating products and making refinements to illustrate this confusing UI:

VIDEO - Old JD Williams mobile website in operation

My user testing observations also revealed that when a user was told to search for a particular product i.e. “red dress”, they tended to rely on the typed search box. appeared to be blind to the browse categories button and due to the not always accurate typed search results algorithm ingrained in the platform, did not always provide the user with accurate results.

“Button category browsing” was the preferred route for users to search for products, as this method yielded the user with more accurate results, which ultimately led to higher add to bag conversions.

Competitor Benchmarking

To gain an understanding of how other mobile ecommerce websites approached search and navigation, I compiled a list of industry key competitors and decided to benchmark user test our user journies on their sites, again with real users via the WhatUsersDo service.

This enabled me to learn from their positives and also avoid their negatives and all with reports from real users in our target demographic. I then presented these screen recording to project stakeholders, along with users comments and my observations.

VIDEO - Competitors screen recording play-list

Research results & decisions

A combination of my user research, comepitor analysis and benchmarking, coupled with feedback from stakeholders, helped craft a short list of interface design patterns pursue in our product.

The key changes I therefore wanted to make on the new product were:

  1. Introduce an industry standard “burger” site menu to house the list of product categories and other navigational links. This site menu would initially be hidden off screen (to the left) and animate in to view upon touch.
  2. Completely change the refinement interface, remove the drop down menus and implement a refinement grid where users could easily add and remove multiple facet refinements by a single touch. This menu would also be initially hidden off screen (to the right) and animate into view upon touch.

Rapid Visual Prototype

I sketched on paper and then designed digital visual concepts of all the relevant screens for the new product and with these screens created a click-able prototype using Invision prototype tool.

The visual prototype was extremely well received as it gave a clear indication to the mobile look and feel, as I was able to animate transitions, off-canvas menus, sticky headers and the like.

Follow the journey below to interact with the prototype:

  1. Select a red dress
  2. Refine the results to sizes 14 and 16
  3. Remove size 16 refinement
  4. View the results again

Front end code

I have learnt through experience that the only way to accurately see how a mobile web page will both look and perform on a mobile web browser, is to view a complete coded web page direct on a mobile device. With this in mind, I decided to code a production ready prototype written in HTML, CSS (SASS) and Jquery.

You can view a video demo of the prototype in action below or access this live URL which houses the fully coded prototype.

NB - If viewing the live demo in a desktop browser, resize your browser window to a mobile viewport size to get a mobile look & feel.

Video demo of the fully coded prototype

I published each iteration of the coded prototype to a URL so project stakeholders and our target users (again via WhatUsersDo) could test and feedback after each iteration.

This work-flow formed a User Centred Design (UCD) feedback loop, as I got the product into the hands of the users at the first stage of development and requested feedback after each iteration until sign off. The front end code I wrote was used directly in the final product.

Results

Three months following release, analytics data revealed that our changes had indeed had a positive effect on the product search on mobile journies. There had been the following percentage increases in the user journey:

  • 57% increase in “add to bag” conversions.
  • 41% increase in multiple products added to bag.
  • A marked decrease in journey bounce rate (drops offs).

The BA revealed the following financial figures, directly attributed to the changes:

Increase of monthly revenues to the figure of £322,000 which equated to £2,960,000 per annum (at the current expected demand level).

The project was deemed to be a great success due to:

  1. Substantial increase in revenues
  2. Increase in user satisfaction on the mobile websites
  3. A marked reduction in calls to the helpdesk with relation to the previously problematic user journey.

Contact Me