Problem/Challenge: at the time of this writing (March 2017), the Globe & Mail website (theglobeandmail.com) has had basically the same design since 2009, according to the Wayback Machine archive. While not a bad design, it could certainly be given a more modern look and feel. The current site does not carry much visual impact on its homepage – it's essentially just blocks and blocks of text, with small images throughout. It's also not a responsive design – they use a separate mobile website, which has some usability issues, including horizontal scrolling on the top nav bar. I suspect that a fully responsive design would result in a smoother user experience, and this is what this redesign project imagines.
Research & Process: I began by researching the main Globe & Mail user/audience base. Research revealed that the average Globe reader is generally older. The spring 2008 issue of the Ryerson Review of Journalism referenced the nickname “Old and Male” for the paper's perceived target audience. Only 22% of readers are aged 18 to 34, with those 50 to 64 making up a full third of readership. Thus, many of these older readers likely won't understand minimalistic mobile conventions, e.g., unlabeled hamburger menu... I therefore added a clear “Menu” label to the menu icon, and strove for clarity elsewhere in the design.
I created some low-fidelity wireframes to capture my initial thought process on how to lay out the visuals and information of the Globe & Mail site in a way that modernizes the design but also maintains clarity and professionalism.
After reading Brad Frost's “Atomic Design” book, I felt inspired to think on the “atomic level” for this redesign project and, as the next step, created a style guide before designing any screens. This would help ensure consistency in the design. I selected iconography (credit: Noun Project thenounproject.com) that is bold but also simple and easily understood. For typography, Oswald's classic and strong sans-serif look would serve as a good headline font. This is counterbalanced by the serifs of Merriweather, designed as a body font for its readability on screens – readability, of course, being especially important for a text-heavy newspaper website.
I used materialpalette.com to help generate the colour palette. I chose a grey/red palette because they're both such classic and sophisticated colours, and when paired together they compliment each other well, leaving a very polished effect. The greys reinforce the older, conservative Globe audience base, while the red accent stays true to the classic Globe brand. Finally, I used the Colorable tool (jxnblk.com/colorable) to ensure high accessibility of the main colour pair (background and text colours), meeting WCAG AAA level.
Goals: it's time to modernize the Globe & Mail site with a more visual approach, i.e., stronger use of photography, more beautiful typography, cleaner, less cluttered layout. Instead of a full rebranding, an extension/expansion of the Globe & Mail colour palette would be more appropriate, considering the Globe brand remains strong. A simplification of the homepage layout should be welcomed, as the current homepage has a “present everything at once” overwhelming feel to it and the information could be presented more elegantly.
The UI animations (created with Principle) and micro-interactions are smooth and natural – nothing too jarring, but bring life to the UI in an understated way, which reflects the Globe & Mail's conservative, older target audience. The current Globe site seems to lack any animation, so the addition of these subtle animations in the redesign will help modernize the site.
Article page, desktop & mobile:
Article page, commenting:
Author page, desktop & mobile:
Search results page, desktop:
About Us page, desktop & mobile:
Category page, desktop & mobile:
Paywall overlay, desktop:
Paywall overlay, mobile:
Mobile menu interaction: