- Identify typical sticking points within the mobile product purchasing journey.
- Discover best practices and competitor solutions to product editor software.
- Improve usability of website and product editor.
- Check for bugs in Chrome, Firefox, Safari and Edge.
- Improve conversion rate and revenue.
Since the team was aware of a number of issues at various points in the buying journey, we started the project with a UX walkthrough. The group consisted of six people: myself; a developer; a marketing manager; two customer support workers; and a note taker. We mapped out some typical user journeys, four in total, consisting of our two most popular product categories with one variation of each using page links to proceed through the steps, and one using only navigation menu links. We proceeded in unison looking for bugs and usability issues while the note taker logged issues.
Devices used included: an iPhone 5s; an iPhone 6s; an iPhone Xr; a Samsung J5; and a Samsung J5.
Product Page Header
I also did some research into best in class product page headers to identify design trends emerging across websites with lots of traffic. This included looking at: how product galleries work and what gestures they recognise; whether thumbnail images are used on mobile; where the price is located; and what kind of inputs are used.
Next, I did some research into how our immediate competitors had designed their product editors. Our editor had not been changed for quite some time and it was clear that we were making things more difficult for our users than they should be. All our competitors had product editors that fit onto a mobile screen without needing to scroll. Our editor needed at least two scroll gestures to get to the bottom of the editor. Our controls where stacked vertically so that you had to scroll down to edit the product, where as our competitors unanimously had their controls stacked horizontally so the product could be seen and edited at the same time.
I worked alongside an analyst to get some data from our site, including a fallout funnel showing both mobile and non-mobile data, and a table showing visits, orders, revenue and conversion rate. Two points in the journey that stood out to me where users dropping out at the product page and at the first step of the editor. The editor in particular had the highest fallout, so it was clear that this is where the majority of effort should be focused. We also compared this to desktop behaviour.
Customer Journey Map
I created a customer journey map based on the notes from the UX walkthrough. Given that we did not conduct usability tests with actual users, we had to make a few assumptions about what the user’s goals were, but since the scope of this project was to identify sticking points and bugs within the purchasing journey on mobile, we decided this was okay and would be addressed later on by conducting usability tests. The main focus of this customer journey map was the pain points.
We organized all of the issues that we found by severity and how simple they would be to fix in order to obtain the minimum viable product.
Low-fidelity & High-fidelity Designs
I sketched some solutions to the issues we found above, taking research findings into consideration, and used these sketches to create some high-fidelity designs.
I created some wireframes to pass over to dev for building, explaining how controls behave when the user interacts with them.
After these designs had gone through development, we did two more rounds of device testing to streamline the product prior to implementation. Issues were logged and I sketched out some suggestions to feed back to the dev team for the next iteration.
This work was carried out from March – April 2019 and was implemented at the end of April. The table below shows the impact that this work has had on the performance of our website, in particular, our online product builder (IPS). The table compares visits, IPS orders, conversion rate and IPS revenue from 2018 and 2019. Visits are down in 2019 due to a cut in mobile ad spend, but despite this cut in traffic and visitor qualification, orders, conversion rate and revenue were all significantly and consistently improved by the changes that we made. This is indicative of the fact that usability had been successfully improved by the work that we carried out.