The previous web shop was performing poorly from a sales perspective, was hard to maintain, and it was clear the design was far from optimal. Analytics data also showed unusual behaviour, such as early drop offs.
less data entry
It was clear just from looking at the web shop as an expert that it had quite a few design flaws. We cover those findings in this section.
The device listing page, as part of the MVP, had the least changes to it. The major addition was to add the USPS to both reassure and help persuade the customer.
Filtering and sorting would of course be useful, but the product range at the time wasn't so large. We did of course ensure the order of the products made sense, and asked the editors to continue that content strategy.
The button to proceed to the next step was difficult to find. It had a number of problems:
The price is also not shown at this step however the choice the user makes for storage can impact the price significantly.
Again the call to action has the same hidden place, although once they manage to get to this stage, it's less of an issue.
The price listing, found under 'mer info' (terribly descriptive), also wasn't getting much usage. One would expect due to its placement, poor information scent, and lack of signifier for interactivity.
The selected surf amount defaulted to the 'recommended' amount but this was arbitrary. It was never the lowest amout either, which meant that the default price was higher compared to defaulting to 1GB.
Finally, is 429kr just for the subsription or the phone too?
In general the overview page has some rather pecculiar usage of space and very little visual hierarchy, resulting in it not being overly clear as to where to focus one's attention.
The key call to action, to proceed with the order, again has a strange placement. This time bottom right of the page, employing copy that could be improved and having very little weight on the page; I would prefer it to stand out more.
Having long explanitory text just before an interface is always a good sign of the team having confidence in what they have delivered. Clicking 'Ändra' presented a complex form, where we had to convey the concept of moving your number to Tre, or if you have an existing service, and wan't to extend your agreement.
Without invoking 'Ändra', the assumption was that it is a new customer, even though retention is easier than aquisition. Even still, the customer must check "Bekräfta" before they are able to complete complete this step and proceed.
The checkout form was too long, especially as much of the information could be obtained from the personal number. In addition the input field hints are unhelpful and do cause usability issues as at first glance it would appear the field has a value entered into it.
The input field border was also too faint, and would not be seen by those with some visual impairments, or those with poor screens, both contrast or broken, or in bright sunlight.
The call to action to place the order could be a little more potent on the page too.
When reviewing the purchase flow one of the things that stood out was how long it felt to complete. When looking at it more closely, it was surprising to find that the phone customisation and subscription selections were on different steps. This meant the user couldn't see a total price until after they finished their phone customisation.
The other different was that the checkout was over three steps.
We prototyped the new approach using Axure RP, which allowed us to work concurrently on the protype and also make something that was highly interactive. It went as far as even calculating the correct prices. The prototype is responsive, and had a mobile and desktop version for each page. We of course started with mobile.
Below is an early iteration of that prototype which still has some bad design practices within it as we were gradually evolving the components and design patterns.
The main introduction at this listing step was the USPs to help persuade and reassure the visitor.
Major changes were introduced at the configuration step:
We used this prototype to develop an internal concencus, and also to test with customers. We iterated on it numerous times to account for our findings. For example, we couldn't use this simplified presentation of the discounts, and instead had to keep it as it was. In addition, some functionality was descoped, such as modifying the selections within the cart page itself.
The MVP shop was released in November 2017 and in February 2018 my role in improving our online sales, and how the company works with UX in general, was acknowledged at a company event at Hovet.
"Craig is responsible for ensuring our user experience is as fast and easy as possible. He was a major contributing factor in designing and implementing the updated purchase flow on tre.se, which contributed to +220% in sales, compared to the previous version. He constantly challenges everyone to deliver the best possible solution for our customers"