HTC Website: Redesign Concept

htc redesignI 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:

Home Page

Confusing typo hierarchyThe 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.

Info overloadInformation 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.

inconsistencyLastly, there is a glaring (to me at least) typographical and formatting inconsistency at the bottom of the homepage, and this disrupts the natural flow of a reader.

Product Page

Old product landingThe 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.

Old features

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:

too many clicksIt 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.

Home Page

HTC One mainLess distractions, more impact. With this redesign, the beautifully designed phone couldn’t possibly escape your eyes.

HTC main page bannerWith a distinct typographic hierarchy and clean background, the product banner draws the eye to the phone and marketing punchline.

HTC main page bottomThe bottom of the homepage is also redesigned so that they have a consistent typographic treatment and formatting. Now they don’t stand out individually, but sit neatly, like they’re supposed to.

Product Page

HTC One product landing

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.

HTC One product featuresThe 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.

HTC One product page full


I wanna hear your comments!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s