Mobile Experience Redesign - The Globe & Mail
(Please note this was my final project for the MDEI program at the University of Waterloo in 2016)
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.
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.
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.
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.
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.
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.
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.
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.
- 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.