top of page

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.

Mockup Metro Montreal Clear.png
My Works


3 days




Adobe XD

My Role

UX Designer 


User Research, Competitive Analysis, Persona

Low to High-fidelity Wireframes, Prototyping



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. 


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.

Curent Maps.png

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.


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.

Design Process.png


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.

Screen Shot 2020-08-02 at 11.31.47
Screen Shot 2020-08-02 at 11.35.06

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, and Trip Advisor. 

Screen Shot 2020-08-02 at 11.45.01


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.

Screen Shot 2020-08-03 at 4.31.26 PM.png
Screen Shot 2020-08-03 at 4.32.51 PM.png
Screen Shot 2020-08-03 at 4.33.47 PM.png

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


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. 

Screen Shot 2020-08-03 at 4.53.03 PM.png

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. 

Screen Shot 2020-08-03 at 4.59.32 PM.png
Screen Shot 2020-08-03 at 5.00.22 PM.png
Screen Shot 2020-08-03 at 5.02.41 PM.png
Screen Shot 2020-08-03 at 5.03.17 PM.png
Screen Shot 2020-08-03 at 5.04.00 PM.png

Final Prototype

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


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. 

bottom of page