Site spotlight: The O2 user experience

Site spotlight, User experience, User journey, Web design

O2, owned by Telefonica, is one of the largest telecommunications operators in the UK and this week they updated their online shop with improved product pages. So what better way to put the O2 user experience to the test than a site spotlight of their new digital offering?

Phones landing page
32 phones are initially presented on this page and there is the ability to search, filter and sort to help the user find the exact phone they want. The site is also responsive which, given the industry the company is in, is an expected yet welcome decision.

There are 7 types of filters that can be applied, however there is a checkbox with no label under “Colour”, the “Feature” section presents limited options, and the “Availability” section only offers “Coming soon” rather than the more useful “In stock”.

It would be nice if filters were added and removed in relation to each other, so a user couldn’t select “Apple” as a brand and “Android” as an operating system.

The O2 user experience phone shop filter phones

The filtered phones can be sorted and are ordered by default to “featured”. This vague language isn’t helpful and it isn’t clear to the user what makes the phones featured, which essentially renders the term pointless. It also seems odd to place battery life, weight, screen size and camera resolution within this functionality as they would be expected to sit under filters.

The O2 user experience phone shop sort phones

In addition to this it would be useful to be able to sort by contract length, best selling and latest releases, as well as sorting by more than one variable at a time.

There is a large search box that is displayed prominently at the top of the page. This is great placement and emphasises their focus on an easy user experience. However, this is thwarted when the search phrase cannot be actioned.

The O2 user experience phone shop search box

Product Page
A product review is immediately offered in the hero area to help convince the user to purchase, the upfront cost and monthly tariff are very clearly presented and the phone colour changes when a new colour is selected.

The O2 user experience phone shop product page

However, it is stated that the phone is “Also available on Pay & Go” but there is no click through link to this page.

The user can browse a gallery which displays attractive lifestyle imagery to scroll through but a 360 degree view is only available when the user plays the accompanying video.

The O2 user experience phone shop gallery

The “View our tariffs” call to action is large but the colour doesn’t contrast enough with the colours used throughout the site so it blends in. It also breaks the flow to have this button aligned to the right and would likely have a higher conversion rate if it were to swap positions with the button besides it.

More detailed product information is presented for the remainder of the page which is easily navigated by fixed navigation, although the links look too much like text so initially it is not obvious they can be clicked.

The O2 user experience phone shop product information

This translates well when viewed on a mobile and it is evident that the user experience has certainly been carefully considered when scaled on a smaller screen.

The O2 user experience phone shop product navigation mobile

A nice feature is the “Recommended Tariff” section which also clearly lays out what is included in the package and breaks down the costs.

It is also worth noting that when returning to the phones landing page the previously applied filters are no longer actioned and instead they must be re-applied and the phones subsequently re-sorted.

In conclusion…
The O2 user experience has a strong foundation but the improved pages would have benefitted from more user testing before they launched to prevent major issues such as a broken search box. It will be interesting to see where the brand takes their digital side this year and if they make the required tweaks once they have more data on how their users are interacting with their new pages.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>