Mockups (Version 1) and user testing

Mockups (Version 1)

We explored the content strategy that helped determine the homepage wireframe layout in our last presentation: Mobile Wireframes & Content Strategy.

The mockups you'll find below represent the next step in the redesign, combining the visual design elements and wireframe layouts to create a realistic simulation of what the mobile site will look like. We then added a limited amount of interactive instructions to turn the mockups into a functional prototype that we could use for testing. Please note that menu titles and links shown below represent our best guess before obtaining user feedback; now that tests have been completed, these are one of the first things we'll change. 

Want more detail? Enlarge or interact with the mockups.


User Testing

The mockups above (and the prototype they link to) were generated to allow us to test the design and architecture of the new site prior to development. As mentioned in previous phases of the project, we are following a mobile-first approach that allows us to focus on our top priorities and the delivery of a superlative experience for users on small screens (as well as user with other constraints, like use of assistive technologies, which in many ways mirror the mobile experience). 


The Objectives

Our goal at this stage is to test the design and architecture of the homepage with real users. 

We want to make sure that the homepage responds to user needs, perceptions, and expectations. Our testing questions and tasks focused on gathering data to help ensure that:

  • The navigation menu is organized in a clear and logical way (using groupings and vocabulary that make sense to our users)
  • The interactive features (menu, search, program spotlight) feel approachable and respond as expected
  • Users understand the content and perceive it as interesting and relevant

To the extent possible, we also wanted to make sure that our design choices result in a clear, authentic representation of our brand and values. (Since not all of our test subjects were familiar with McGill, and since we'll be revising the aesthetic direction following a rebranding in mid-2019, this wasn't the main focus of our testing activities.)


The Process

With the help of mStoner and several participants from the Web Services Group, we ran two types of exercises:

Open card sorting

6 prospective students from Dawson College reviewed and organize menu links in a way that makes sense to them and aligns with their priorities.

Activity format: 

  • Participants are given cards printed with the names of links that we anticipate featuring in the main menu.
  • In small groups, participants sort the cards into categories and add, remove, or duplicate links to make sure that the menu and categories are relevant and complete.

One-on-one interviews

We conducted in-person interviews with 18 participants, including prospective undergraduate, graduate, and faculty/staff applicants; current staff, and students.

Activity format:

  • Participants identify their needs and background, and complete a series of tasks using the homepage prototype.
  • Participants share their opinions on ease of use, branding, and changes that would make the prototypes more useful and appealing to them.


The Highlights

Our observations and notes indicate that we have improvements to make to menus, labeling, and button styling 

› The "Popular" and "Recommended" labels don't give sufficient context
› Many participants liked the "Program discovery" profile content but struggled to frame/contextualize content
› Interactive elements (especially buttons) could use more emphasis
› We have changes to make to the main menu and the audience-based links in the lower region of the page
› The contrast, scale, and spacing could be adjusted to improve legibility and ease of use
› Next time, we should have more (and more realistic) content and images in order to help test users explore content and interactions more fully

Note that we're focusing on observations here; our next step will be to generate recommendations and potential solutions based on the user testing data. 


Back to top