Money talks.

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.

Three Sweden

CLIENT

2017

YEAR

UX Lead

ROLE

Key results

50%

fewer screens

71%

less data entry

+220%

sales conversions

Understanding what went wrong?

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:

1. It's placed in the top right, which is an uncommon place for such a button, and not a place users look at very often.
2. The button also blends in with the orange bar, and looks more like a banner.
3. The text of "next" isn't so clear either.

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.

Designing a new web shop.

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.

Of course the problem we were trying to solve, a customer choosing and customising a phone and subscription, was not new ground. We did some extensive market research across operators in the Nordics and wider Europe to get inspiration.

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:

1. We combined the phone and subscription configuration steps into a single step.
2. Reduced the amount of colour being used on the page, and only used colour where we wanted to draw attention to particular elements.
3. Set the smallest storage size and surf amount as the defaults to show the lowest price possible.
4. Added subtext which stated how much extra it would cost per month to upgrade to a higher storage or surf amount.
5. Changed terminology for links, to improve information scent, such as "prisinformation' versus 'mer information'.
6. Added rounded corners to the buttons as that was is known to result in a conversion uplift (we actually went more aggressive with the changes here and made the enter button fill orange to make it stand out even more).
7. Introduced a basic summary with the key stats at a glance but still offered a more detailed view for those more technically savvy.

We drastically reduced the amount of input fields, and also rephrased the question around what to do with the phone number. Instead we now automatically detect if the person is an existing customer.

We also generally did some layout and visual hierarchy optimisations based on typical user behaviour.

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"