News website Mobile redesign

 

Brand
International Business Times

Role
Designer

Tools
Sketch

The Brief

 

With the existing mobile treatment of the successful desktop design, IBT wanted to experiment with a more bespoke design for their mobile presence. Whilst the desktop website converted very well (year on year doubling of traffic), the mobile website felt neglected and needed a bit of love, especially considering the split between desktop and mobile was creeping over 50%.

I was asked to approach the mobile experience from an fresh perspective, potentially treating it more like an app than a responsive bolt-on - there were discussions of this being a Progressive Web App project. 

Deliverables

 

To present to stakeholders, I recreated the key screens on the current website, which were: Index, regular article, video article, gallery, search results, video home page and menu.

These were designed in Sketch and then presented in an interactive format, using Marvel.

During the process, I consciously refined the style guide of the existing website, so that font sizes and colours in particular were considered and complimentary. This was also a useful exercise to present the current flaws in the existing website styleguide, with regards to the use of margins, font stacks and colours.

Rationale

 

With the stalkeholders keen to use the full logo, real estate was limited in the header. For this reason, I decided that rather than using a text based menu, the introduction of a prominent search icon and hamburger menu would allow the content to speak without too much distraction. The use of search on desktop was alarmingly low - as low as 1% of all page clicks - but navigation around mobile websites is tricky, because of the amount of information needed to 'fit' into the screen size. For this reason, I believed that search should be used as a method of navigation, supplemented by a fixed bottom navigation bar.

Despite attracting 30m+ monthly viewers, IBT was a relatively unknown news publication. With this in mind, the fixed bottom navigation was chosen to allow recirculation of the key verticals being produced by the editorial team. I also introduced a 'Hot' vertical, to highlight trending stories across the website.

Being bold on colour was a decision I made early on, mainly because it enhances the branding of each editorial vertical, and will allow a quick recognition of sections for users.

For both speed of load and ease of comprehension, I decided to limit the use of images across the design. Although one would normally expect editorial content to be image-rich, for a breaking news website, it is often difficult to find imagery that isn't stock to supplement the narrative of a story. 

Full screens - Apologies about the file size.