Métro Montreal

An easy to navigate landing page with an interactive version of Métro Montreal in order to provide line and station information.

 

Timeline

3 days

Team

Individual

Tools

Adobe XD

My Role

UX Designer 

Skills

User Research, Competitive Analysis, Persona

Low to High-fidelity Wireframes, Prototyping

OVERVIEW

About

This is a design challenge within 3 days. The project is to redesign the landing page of the Métrol Montreal map for the desktop to create an interactive experience with users. 

Challenge

Montreal's subway system consists of 4 lines (Orange, Green, Blue and Yellow). The printable version of the map is a good tool to move within the city, and its black background creates an interesting contrast with the foreground. 

 

When it comes to the digital world, however, there is still plenty of space for improvement.

Quick Peek to the Solution

Design an easy to navigate landing page with an interactive version of the map in order to provide information about accessibility, transfers, operating hours, flash news, etc.

DESIGN PROCESS

Because of the time constraint and special situation during Covid-19, I was not able to perform user testing to collect any feedback or make iterations to incorporate any feedback.

USER RESEARCH

Emphasizing Subway Commuters

To understand the desire and intention of an interactive map mostly be used, I interviewed subway commuters who need to take subways every day or occasionally. Also, I analyzed the online user reviews from trip advisor and other interactive maps in the market to get a better understanding before exploring ideas.

Understanding the Market

While a desktop interactive subway/transportation map is not common, TTC is one of the few that has this feature but doesn't have a very intuitive design. Although it has an instruction at the beginning when opening the map, a lot of users like me don’t read the heavy text. Another reason is that without any CTAs, map control panel or Google Map in the back, it looks exactly like a traditional pdf/image map.  I also studied Google Map, 511, Realtor.ca and Trip Advisor. 

PLANNING

Meeting the Métrol Montreal Website Users

Following the interviews and research, 3 user profiles were identified. Their profiles outline their frustrations and primary goals to guide the ideation and design of the proposed service.

Feature Prioritization

By understanding & gathering feedbacks from different users and doing market research on other interactive maps, I synthesized the findings and translated into the key product requirements to solve the current users' pains in the product scope.

  • Learn subway information including routes, hours, frequency and transfer in an efficient way

  • No miss of transit alerts (station closed, elevator down, etc.) for today and nearby future if possible

  • Find and filter accessible options: elevators, restrooms, and nearby parking

DESIGN

Low-fidelity Wireframes

When it comes to design, the first thing I want to make sure, before implementing any key features, is to have the map look digital and interactive by creating a collapsable control panel, a map control panel and a search box. While my default state is in a white plain background without Google Map to make the routes and station more legible, I added in some animation elements to make it more interactive, which can be seen in the final prototype. 

High-fidelity Wireframes

Following the visual guidance from the current Métrol Montreal website, the low-fi wireframes were digitized into mid-fi wireframes and later polished into high-fi wireframes. Again, given the time constraint and special situation during Covid-19, I was not able to perform user testing for this project. 

Final Prototype

Below is a quick look at the final prototype. To watch the complete one, click on Métrol Montreal Web Link.

THE END

Future Considerations

Given it was a 3-day design challenge, I focused on designing only the core functionality of the interactive map on the landing page. Some future considerations included:

  • Customized alert to daily commuters via email/text subscription

  • Up-to-date information on subway and nearby parking lot occupancy

  • In-depth knowledge of subway transfer to buses, trains and other transits

  • An integrated and thorough transportation map with buses, trains, subways and other transits to “plan the route” from destination A to destination B. This is not very useful in a subway-only map given the limitation of subway lines and stations but would be very rewarding in a bigger map. 

Let's connect

I am actively seeking opportunities in User Experience, User Interface and Product Design. If you are interested in my work and want to chat, please feel free to reach out!