UX design lead on a project to improve conversion rates to the mobile product search and navigation user journey.
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:
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).
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:
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.
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.
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:
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:
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.
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.
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:
The BA revealed the following financial figures, directly attributed to the changes:
The project was deemed to be a great success due to: