OBJECTIVE

Combine the existing Gulf News desktop website to its Mdot site version into one responsive website that will cater to desktop, tablet and mobile.

SOLUTION

Implemented a site using the Bootstrap framework and used its responsive capabilities. The desktop website is now 1140 pixels wide compare to the 960 pixels from the old website.

OBJECTIVE

Make the brand consistent from the newspaper, desktop and mobile web and the app.

SOLUTION

First we completely changed the typography, from Roboto Condensed in the web and app, to Glosa Text and Glosa Headline which is what the newspaper has been using.

We also maintained a sans serif option for text using Montserrat.
Elements in the paper like Quotes and Numbers have been revised to look consistent as well.

OBJECTIVE

Increase page scroll depth and readability and engagement in Sections and Article pages.

SOLUTION

Reduce the clutter on the article page. We have removed the additional 3rd small column we had from previous site.

Increase the body copy font size from 14 pixels to 18 pixels and a line-height of 30 pixels.

OBJECTIVE

Build stronger sections, and refresh the color schemes used

SOLUTION

Our sections have been rearranged according to data gathered in relation to what our users want to read and what we can provide.

We also removed all color coding for sections and subsections and restricted it only to our main sections.

CONCLUSION

The objectives listed above are the main objectives that we set for the website in terms of the design. To add, we also looked into a proper typographic scale that is suited for a content-heavy news website like gulfnews.com.

We also had other objectives that we tackled as we went along with the project. However, with these core solutions already in place, it was much easier to create design solutions.