Mobile Wireframes & Content Strategy

Wireframing Objectives (and format)

The goal of this step in the project is to develop a detailed mobile-format layout that supports the homepage's mission (as identified in the Discovery phase).

Note that in this phase we have focused on the design of mobile wireframes--this strategy allows us to focus on creating a site that will be performing well for mobile users and for those using the website in non-ideal circumstances. Once these designs are established, we can then elaborate our testing for larger screen sizes.

As mentioned, the mission we're trying to accomplish is:

  • To communicate our brand, values, research strengths and impacts to audiences that may know nothing about us.
  • As an entry point into McGill's web environment, to encourage any visitor to find and engage with the McGill content most relevant for their needs.
  • To support recruitment objectives by orienting prospective students, both in terms of what to do now and what to look forward to on campus.

We understand that a large proportion to users who come to McGill's homepage to form their first impressions are prospective members of our community. These users have a specific need: to determine whether McGill is the right fit for them. Our goal is to give these users interesting, well-organized content that will encourage them to pass from the homepage to other McGill content that is most relevant to them. In order to achieve this, we want to offer a feature set of the homepage to facilitate that kind of deeper exploration, since we know that the homepage will not be the final destination for most visitors.


Our Process

We wanted to follow a process that would leverage the results of the Discovery phase and combine those results with the collective wisdom of the Web Evolution team and our consultants, mStoner (specialists in higher education).

To do this, mStoner led McGill front-end development, web support, design, communications, and content specialists in a condensed version of a design sprint that consolidated all outputs of Discovery Phase (including research, analytics data, and design direction) and used them as the focus of a series of exercises over a 3-day period. These exercises helped us to understand and discuss the available data and to identify the challenges and opportunities most relevant to our project.

Over the course of the sprint, each member of the team then produced 8 rough sketches and one detailed storyboard illustrating design concepts that could meet those challenges and leverage opportunities in a concrete way. The team reviewed, discussed and revised their ideas, which were condensed into a single set of wireframes.


The Deliverables

The wireframes needed to present a clear portrait of what and how we would communicate on the homepage, so that we could accurately plan the design and feature development. This included detailed content (actual words), realistic menus*, and instructions for the interactive elements on the homepage. The final suite of mockups includes:

  • The main homepage, which showcases our brand, supports recruitment initiatives and creates a connection between McGill and the world beyond our gates
  • The search interface, which we identified as a priority during the Discovery phase and which needs to provide a seamless experience from the homepage
  • Variations of the homepage layout to respond to strategic priorities that we already know will be important for us to respond to (major philanthropy campaigns, large-scale events, emergency communications, tributes, etc).


The Primary Homepage Wireframe

The homepage will be used to clearly communicate the McGill brand and to help users move on to the content that's most important or relevant to them. Here's a breakdown of the homepage's major components:


  1. Large photo to show a window into what’s going on around campus, to be changed on regular basis, showcase what it’s actually like to be on campus
  2. Marketing language that is consistent with all of our other communications
  3. Since the photo may show special events or be tied to a particular (seasonally or strategically relevant) topic, an “info" button allows visitors to get more info about the photo shown, adding an additional layer of meaning to the content.

  4. Under that is the search feature. This feature represents the best opportunity to serve the most people with the content that is most relevant to their needs.
    More about the search feature.



  5. Below the search feature, users will find the "Most popular" region, which provides some of the most commonly searched for links (e.g. emails), followed by a "Recommended now" area that can direct people to big news/high profile McGill events. (In many cases, we expect people to arrive on the homepage having heard about these through another communications initiative.)


  6. Below this, you'll find the "Program exploration" feature, which capitalizes on prospective students' first priority - to understand whether McGill offers their program of interest - and gives it a personal angle and connection with post-graduation and career outcomes. This helps prospective members of the community imagine themselves on campus and imagine whether McGill would be a right fit for them, and allows us to communicate our expertise and the quality of our learning community. 


  7. The "program exploration" feature uses two basic formats, the "profile" type (shown in #6) and the "quote" type. This allows us to share powerful words or testimonial that compliment the featured program. 


  8. In the area above the footer, we provide a selection of links curated to users who self-identify as a specific audience. We know that many users expect this type of presentation, and that it will be particularly useful to members of the McGill community as a more targeted (and therefore more useable) version of the "quick links" menu on the existing homepage. 

  9. Below are institution-wide links that people of any audience might expect: News, events, tours, general inquiries.

  10. At the bottom is a more robust version of the footer, which we plan to scale across the WMS (after the launch of the homepage) to provide access to essential/expected institutional information and create coherence across those websites.

  11. The new footer includes the emergency numbers and copyright notice, which we consider essential but which don't require particular emphasis.


The Takeaways

In elaborating the content strategy, layout and interactions of the homepage, we wanted to emphasize the following:

  • The homepage should tell a thoughtful, cohesive story about McGill. Any user, on any day, should understand who we are, our values and strengths based on a single homepage visit.
  • We don't want a "static" homepage, but we do want to make sure that all users get a well-considered, consistent brand experience. In other words, the actual content (photos, profiles, quotes) may vary, but the "work" that content does (ex. provide a window into life at McGill; showcase our programs/activities) should remain consistent and aligned with our overarching priorities
  • We can enrich the brand experience and make it more meaningful by connecting strategic content with current events. Each content region was built with the idea of efficiently serving a purpose (ex. showcasing our programs/activities through the activities of individual people) while providing the opportunity to create deeper connections (ex. featuring people whose area of expertise is in the news, or who are speaking at important events). The content itself should be able to stand alone and do a good job at its stated purpose, but (we hope) will be curated with an awareness of and connection to events beyond the homepage. 
  • We wanted the homepage to be as short, clear, and targeted as possible - to maximize the utility and clarity of the page. That means paring down, making the most out of each content piece, and providing opportunities to explore beyond the homepage.
  • We determined that news and events weren't adding value for our target audiences, and the homepage was not an effective way to promote news and events. For this reason, the homepage links to - but doesn't show - news and events. Since news and events are critical pieces in our communications landscape, we want to invest in a better place (and better tools) for promoting them. For this reason, our next major project after the homepage redesign will be improving Channels news and events


Additional wireframes

We encourage you to view the video at top for a complete presentation of all the wireframe interfaces and an explanation of the features and rationale behind them.

Back to top