I really, really love HTC phones (I think they make the best Android phones), but the HTC website has bothered me for some time already, so a few days ago I decided to undertake this short project to re-imagine and redesign HTC’s website, especially its product page. The whole process took somewhere between 4-5 hours.
Let me first start with the problems I had with the current website:
The first problem with the home page is the lack of proper typographic hierarchy in its main product banner, with the product name and slogan having very similar weight and size; they compete for attention and thus disrupt reading.
Information overload also plagues the homepage: the product banner features different, competing attempts to woo the viewer. Basically, complexity is never good for attracting customers. Having 3 different ways of attracting a viewer – through the “Here’s To Change” campaign, the phone features, as well as its accolades – creates a lack of focus. The phone simply loses significance.
The first problem of the product page (I chose the HTC One here as an example) is the presence of too many distractions. The loud background (I don’t even know what the background is trying to convey about the phone) distracts the eye away from the phone. And the many calls to action are practically jumping for attention. White ‘share’ button against dark background (top right)? Blue ‘sign-up’ button – for god knows what service? Plus a white box beside the phone image about the newest version of Android? To top it all off, a HTC Online Support call to action that takes up almost a fifth of the above the fold space? It’s almost like the web designer wanted to distract the viewer away from the product.
The second problem of the product page lies with the layout of the phone features. The many phone features arranged in such a cluttered layout creates a sense of information overload. It also leads to the third problem:
It just takes too many clicks to explore the phone features. From the product page, you’ll have to click on one of the features boxes, which opens up an in-window pop-up with a brief write-up (with really small type), which then invites you to ‘experience’ the feature. That button in turn brings you to another page – with a totally different user interface – which is basically like a slideshow of the phone’s features. And then to find out more about each feature, you’ll have to click the ‘+’ button (and of course, you’ll be taken to another page). Do you feel tired already? It’s almost a chore to find out the features of a HTC phone. It’s like they just don’t get it.
Ok, so after going through the problems with HTC’s website, here’s my solution.
Bringing the focus back to the phone, the redesigned product page features prominently the HTC One. I can’t help but repeat this: if they’ve created such a beautiful and great product, they should bring the focus to the product, not some weird bokeh background or the many peripheral services or notifications.
The product page now shows one great feature at a time. The header dynamically updates with scrolling to create an immersive user experience. No more cluttered boxes and complicated clicks. This is really similar to what Apple has done with their product pages, and the thing is it works. People are interested to know what great features the product has, if only you show them.
Each feature has sufficient body text to explain to the viewer, while even more detailed information is available on a separate page.