Site Focus: Three.co.uk

Recently, Three.co.uk (the mobile and broadband provider) got a big facelift and had their website redesigned. In this article I describe key elements of this redesign.

When you first load the page, your eyes are not drawn strongly to any particular section of the screen. The design is very flat, something which I will raise further on. The only reason I was drawn to the middle of the screen was because of the movement of the images (the fading slideshow).

Being a wearer of glasses, I tried something different this morning. Visual hierarchy can be determined through colour, shading, whitespace, font sizes and various other things. So I took my glasses off, and saw what stood out the most. The main things that stood out were the logo, the large image in the fading slideshow and then the large ‘The Three Network’ banner a little further down the page. My eyes were not drawn to any other elements on the page on the way down – so many missed opportunities to utilise space.

Now let’s take a quick look at some other elements of the page:

1. To me, the yellow banner seems too much like an advert and makes me want to ignore it. When you hover over it, you will find the package builder tool. Now in the current global situation, everyone wants the most they can get out of as little money as possible, with little waste. Why would you hide a tool which would aid the buyer in such a way?
2. Search is an important feature of any larger website. People do not have the time to find things manually. The search box is very small in comparison to the surrounding elements – and may be overlooked by the average user.
3. The title on each slide of the fading slideshow has impact and draws the eye. This is the key area for pushing latest offers and it’s where Three want to make their sales.
4. The only reason this call-to-action button works is because of the colour contract. There’s a lot of black and white, but no colour. However, this button brings green in to the design. It still doesn’t however shout ‘Click me!’ A more prominent call-to-action is needed here.
5. Large imagery that is colourful and simple can often stand out very easily, especially when surrounded by details images, such as mobile phone shots.
6. This carousel shows the latest handsets being pushed by Three. This area seems very tight, with not much space between the phones and their titles. Another issue with this area, and with the larger slideshow, is the inability to stop the slideshows (by hover would even do) or go back to a previous slide. The user must wait for it to come back around again.
7. Importance can be determined by colour and contrast very easily. It’s easy to see that the title is more important than the text below it. However, this has been done fairly poorly. The contrast of the grey text on the white background is bad from an accessibility point of view; users with visual impairments may struggle to read this text.
8. The words ‘Find’ do not look like clickable buttons or links (no-underline). The design team behind this seems to be taking for granted that the average user knows more than they think. Another issue with this is the spacing between the input field and these ‘buttons’ – the spacing is too much, causing them to look unrelated.
9. As mentioned in previous points, spacing makes another issue here. In the top part of the website, there’s a mix of good whitespace use and bad whitespace use. This spacing here doesn’t make much sense and conflicts with the rest of the design. The other spacing seems in proportion, but this seems like wasted space.
10. So it looks like a movie poster. I like the imagery, but it doesn’t really seem to fit in with the rest of the branding.
11. The space to the left of the SIM card looks like something is missing. They should have had the Three SIM card laying horizontally. The Three logo on a real SIM card is actually in the horizontal orientation anyway.
12. In contrast with issue 9 and too much whitespace, this area of the homepage seems far too tight, possibly overwhelming the user.
13. Users have the ability to search phones by brand, and to find out more about these brands. However, these two blocks of information seem very irrelevant from each other in terms of the design. Bringing these elements closer together may show more connectivity.
14. Nearly finishing off the body of content is an unusual empty area. It doesn’t look tidy, and looks more like they ran out of things to put there so left it at that. Or, there used to be something there in the initial design, but it was removed last minute.
15. The footer is basically a reverse of the top half of the website. It’s white text on a black background. It fits in, it’s clean and informative. Everything the user may want to find, it is here.
16. Maybe they weren’t comfortable with such an open design. An ugly shadow has been added to either side of the layout. This boxes everything in. This doesn’t convey the message of open, free and mobile. To me it says boxed-in, physical connection and wires.

Conclusions

This design has a lot of potential, but there are a lot of things that need re-thinking about. It’s not too late for this to be salvaged. Maybe fixing an element each week, and the public would be non-the-wiser, but getting a more pleasant experience each time without knowing why.

Rating: 5/10.