Mobile Experience Redesign - The Globe & Mail

Introduction

As part of my final industry project, my team and I (total of 3 people including me) were working with Globe & Mail's ROB Magazine to re-design their mobile experience and suggest a social and publishing strategy. The Globe & Mail is the largest newspaper and publishing company in Canada, while the Report on Business Magazine is their main financial/business print magazine that gets published once a month and is the largest financial magazine in Canada. The objective of the project is to determine how to make the ROB Magazine, a print and bespoke magazine, come alive digitally, especially on mobile. More specifically, the objective is to create a new user experience, new layouts and figure out the features, constraints and requirements to do this.

The process

Research

We started off our process with competitive research and market research. We wanted to see what the competitors are doing, what some of the best practices in the industry are and how that works for each competitor. We made a list of the best examples we could find and presented them to the client with some ideas. After that, we did an internal analysis and research to reveal some of the issues that are currently faced by the readers of the ROB Magazine and really find out where exactly we could recreate the experience so that it becomes the best possible for our users.

A screenshot of the spreadsheet with a few of the competitors we listed and their analysis.

A screenshot of the spreadsheet with the different points of the internal analysis for the mobile experience of the ROB Magazine.

Whiteboard sketches

After establishing the best practices in the industry and the pain points and frustrations when it comes to the mobile experience of the ROB Magazine, we started brainstorming about solutions. We decided on what screens needed redesign and what new features should be included in the new user experience. Each one of us started sketching their own version on the whiteboard and then we each presented our concept to the team and got comments and feedback.

Some of the screens we drew for displaying the featured articles.

This is the horizontal view of the previous sketches.

Another set of whiteboard sketches, this time about the recirculation of articles, or how to display upcoming articles.

And the horizontal view of the recirculation screens.

Digital Wireframes 1

Following the rough whiteboard sketches, each one of us took to their laptops and started designing the digital wireframes of those screens so that we can more elaborately communicate the message of the screens and their functionalities that we had in mind. I used Sketch 3 to design my wireframes, a tool that is an industry standard and very easy and intuitive.

The first version of the homepage, with the featured article in a prominent location and then the rest of the articles under each section.

The second version of the homepage, with a carousel of the featured articles and then each section/category visible and expandable.

How the first version would look like if the user scrolled down the page.

How the first version would look like if the user clicked to Show More.

How the second version would look like if the user expanded one category.

Below are the respective screens in horizontal view:

Digital Mockups - Designs

After completing the first wireframes, we sat with my team and commented on our designs. We also got feedback from our client and we moved on to design the more detailed mockups. I used a combination of Photoshop and Illustrator to bring these designs to life. Here are all the designs I created for every respective wireframe presented above.

Two versions/iterations of the vertical homepage.

The different versions when clicked to expand.

The three respective versions of the homepage when viewed horizontally.

The carousel with the featured articles would be static on the left side as the user scrolls through the categories and their articles on the right side.

Ways to show upcoming articles inside another article.

How the design evolved over iterations.

First iteration of the screen sliding in when the user clicks on the arrow to see more articles.

Second iteration after testing.

Second Round of Features & Screens

This round includes a major redesign of the homepage of the ROB Magazine mobile site and the article pages, including how every element is being displayed. Again, we started off with some whiteboard sketching, then wireframing on Sketch 3 and finally designing hi-fi mockups on Illustrator and then importing all the final designs into InVision for a round of usability testing.

Sketches of the homepage

More options

One of the sketches for how the articles will look like.

Wireframes of the articles in Sketch 3.

How images and infographics can be displayed.

The horizontal view of the article screen.

All the features are there, with the subscribe label taking up half of the width now.

The image is not taking up the whole width, for better experience while reading.

The homepage

In horizontal view.

Featured articles as tiles.

All the departments and the rest of the articles when you scroll down the homepage.

After we were done with the wireframes, we got feedback from the team and the client and moved on to design the hi-fi mockups in Illustrator, to depict the changes and iterations so that we can test them out with users. Below are the mockups for the homepage and the article screens:

Finally, I also designed a couple of the interactions that users can have with the mobile site while reading the article. For example, below you can see the screens when readers click on the image or the infographic tile. We wanted to not interrupt the reading experience of the user with images and graphics, but have them subtly on the side with the option to expand. I also designed an icon to put on the images that would denote that they are clickable and expandable.

Usability Testing

The usability testing is one of the most important steps in the design process. It helps validate or disprove assumptions and guide the team towrads the right decisions. We imported our hi-fi mockups and designs into InVision, linking all the screens together and we conducted usability tests with real users.

You can find the first working prototype here: 

Vertical view: https://invis.io/SD7WIZ9PK

Horizontal view: https://invis.io/NX7W53774

Note: The designs I created, are the ones that contain the main featured article (Shane Smith) and all the screens that have to do with that one (i.e. clickable images, infographic, icons, subscription labels etc)

Feedback and Final Iterations

We conducted usability testing on our prototype with real users. What we got out of these sessions was extremely helpful and eye-opening and we were able to modify our designs based on those testings to provide the ideal and best experience.

Main Points:

  • The subscription label was largely overlooked and ignored by the users. That prompted us to re-design the label, incorporating some of the feedback we got, after asking the users what they thought about the banner/label. We changed the color, the wording and also made it extend from one end of the screen to the other. That was immediately more noticeable.
  • Some thumbnails were not understood as clickable, so we made them bigger, introduced arrows and shadows to denote that they are clickable and expandable.
  • The favorites icon changed to a heart icon.

Due to the limited timeline (3 months) of our project, there was not enough time to do further usability testings on the final iterations. Normally, it would be a must to continue testing our assumptions and iterations, changing or modifying accordingly and constantly having in mind the user and their experience.

Using Format