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
Prototype
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.