Globe & Mail Redesign

 
 
Overview of the redesigned system

Overview of the redesigned system

These mock-ups were for project that asked students to rework a news app and focus on systems and type hierarchy. I researched some apps and found the Android Globe and Mail app to be in the worst shape.

Every typeset used in the mockup

Every typeset used in the mockup

My Typographic system is based off of clarity. Each section of information should be marked by a new style with shared common themes in the app. I used 2 Fonts through the app, Volkorn and Roboto. Both google web fonts that simplifies the app and made me think more to make different parts of information to stand out. I relied too much on colour early on in the apps process so I tried to design to be able to tell everything apart without needing the colours. A self imposed limit that made me work within hierarchy much more.

Original Android Globe & Mail app 2016

Original Android Globe & Mail app 2016

Pencil sketch to explore the space use of the original app

Pencil sketch to explore the space use of the original app

I studied the Metro and New York Times apps to get ideas how other News aggregates present themselves. The most important lesson I got from these two in contrast was which theme I preferred. I decided on the light theme that NYT presented because it was easier to read and didn’t squash the titles. By the time I did my study on the Globe and Mail I saw it’s short comings and decided to choose it to redesign. I found a lot of simple Navigation things wrong along with a litany of problems with the chosen Typography and not to mention a majority of its front page was taken up by adspace.

Article detail closeup

Article detail closeup

This is a close up of my Grid System and Type system. I Relied on horizontal increments along with type weight to carry the most of the visual difference. These subtle changes work much better I believe than the old system of much different typefaces clashing to differentiate. My other major change was the order of the information. The old system thought it best to go; Title, Image, Hidden Caption, Author, Location, Newspaper, Date then finally the story. This was messy and unnecessary. The way it laid it out it made you read all the information after the caption as part of the story since it was laid in the same font. I reworked this layout to have the unnecessary to the article information skip-able subconsciously.

New type Grid that parses information visually

New type Grid that parses information visually

Old type Grid that doesn’t divide different information

Old type Grid that doesn’t divide different information

I made multiple mock-ups for different articles just to show how my system could work with any given information. I then went and created a Video test animation to demonstrate the usability of the app. This includes the loading page, the front page and what a scrolling article would look like.

 
leaficon.png