Mobile Map Application:
UX Research & Prototyping
Union Map is a concept for a mobile application that aims to improve navigation within the station
Context & Challenge
-
My first ever UX-specific project was an app design to help people navigate construction at Toronto’s Union Station
-
Union Station has been updated a lot since then, and so have my design skills. So, how might we iterate on this experience to improve navigation within Union Station?
Scope
-
This project was a career development endeavor, undertaken solo with the intent of further sharpening my interaction design skills
-
This project took place over two months, between August and October 2022
A basic overview of the flow from version 1 of this app
Key Roles & Skills
-
UX Research: testing hypotheses and product designs
-
UX Design: information architecture, wireframes & mockups
-
Illustration: isometric map creation
Tools Used
-
Figma: wireframing and prototype app design
-
Adobe Illustrator: isometric map creation
-
Whimsical: outlining information architecture
Process
Problem Definition
Research
User Analysis
Design Ideation
Testing &
Reanalysis
-Reanalyze first version
-Define a new direction
-Moodboarding
-On-site primary research
-IA's, sketches & mockups
-Branding & web design
-Product management
-Sales & marketing
-What can be improved?
-What has been achieved?
(repeat process again for v3)
Results
-
Prototyping: A prototype flow was created and tested, ready for a potential third iteration of the app
-
Professional: I have grown my own research and design skills through high-level, real world challenges
This example flow shows how the user taps on a list item, a dialog for secondary action is shown in this case, and then location pins are displayed
Process In-Depth
Problem Definition
Previous App Feedback
-
Graphics do not aid the user in understanding their general elevation
-
Union Station is no longer under construction, and app no longer has to offer piecemeal instructions for flexibility
Goals for this Iteration
-
Provide the user with a comprehensive bigger picture of the layout of Union Station
-
Bring the station's map arsenal up to speed with contemporary designs for complex 3D spaces
Version 1's step-by-step instructions
Research
Primary research was conducted, aiming to gain inspiration on how other 2D projections of multi-level 3D spaces are laid out
Moodboarding
Examining existing maps of Union Station, other major transit hubs, and maps of similar spaces, like malls, museums or zoos
Union Station 2019 Map
Union Station 2020 Map
Union Station 2021 Map
Mall Isometric Layout
Insights
-
Current Union Station maps are plentiful, and out-of-date versions are used simultaneously alongside newer maps
-
Other transit hubs employ interactive maps to help the user navigate multiple levels
-
Malls, museums and zoos often use an orthographic projection to visualize depth
Opportunities
-
There is a need for an updated map that does not rely on multiple "current" versions to be comprehensive
-
Adding a layer of interactivity to map location selections can afford the user additional functionality
-
This method of projecting 3D space onto a 2D screen can be used to simultaneously display multiple floors
On-Site Qualitative Research
Walked around Union Station for an hour listening in to the roaming customer service people answering questions, as well as interacting with a few customers, and trying to way-find via signage myself.
Union Station overhead signage
Union Station overhead signage
Insights
-
All questions for roaming customer service had to do with platform wayfinding
-
Signs do not make it clear that each platform has several different entrances
Opportunities
-
Finding a platform will be a crucial affordance to incorporate into the design ideation phase
-
Making the user aware of the multiple locations for each platform entrance will allow the user to assess their options
User Analysis
Personas
-
One of the more prominent insights from this process: two distinct user personas have been revealed.
Clarisse Alexander
prompt traveler
"I am on time and eagerly awaiting information on which platform to board"
Age: 35 years
Location: Ajax, Ontario
Uses Union Station for: Commuting to work
Bio: Clarisse is a manager for a bank in downtown Toronto, and commutes every day from 40 minutes away in Ajax. She has taken the GO Train for 15 years and knows it very well.
Goals: On her return trip to Ajax, she wants to know where her platform is, and all options to board the platform depending on her location.
Frustrations: Even though she has used the GO Train for a long time, Union Station keeps changing and she never feels comfortable about knowing where platforms are located.
Amy Tran
time-to-kill commuter
"I hang out at Union Station, alone or with friends before waiting for transit"
Age: 21 years
Location: Toronto, Ontario
Uses Union Station for: Commuting to school
Bio: Amy lives around Union Station and takes the subway to school. She often arrives early and walks around to take advantage of the shops, retail and other services.
Goals: Amy wants to make sure she doesn't get bored while waiting. It is important to her that she takes advantage of all the amenities and facilities on offer at Union Station.
Frustrations: It is difficult to keep track of the places to eat and shop because Union Station is so sprawling and the signage can often be confusing.
User Journeys
The prompt traveler
User unsure of platform location
-user gets platform # information from platform display screen
Download the
Union Map App
-signage advertises Union Map App and the user downloads/opens app
Select point of
interest
-user selects platform number as provided on platform display screen
Presented with
map overlay
-user's selected platform
locations are displayed on the map
Navigate to point of interest
-user navigates to point of interest using text & spatial landmarks
The time-to-kill commuter
User wants to shop or get info
Download the
Union Map App
Select point of
interest
Presented with
map overlay
Navigate to point of interest
-user is roaming the station curious as to what to do
-signage advertises Union Map App and the user downloads/opens app
-user selects a point of interest from the list of options within the app
-user's selected
location is displayed on the map
-user navigates to point of interest using text & spatial landmarks
Design Ideation
Wireframes and mockups were constructed in order to afford the user the functionality outlined in the research and analysis phases of the process.
Information Architecture
Problem
-
As per the user journeys, this app is intended to often operate immediately the first time the user needs it
-
The hierarchy/presentation of potential destinations is especially important in this situation, in order to minimize confusion
Solution
-
A card sorting exercise was conducted to provide insight as to the categorization of destinations
-
Three test subjects were asked to categorize potential points of interest, as well as name the created categories
-
Platform destinations were omitted from the exercise as those locations are overtly contained within a single category
Example of a test subject's sorting of points of interest, along with potential names for these categories
The proposed information architecture of the app, as informed by the card sorting exercise
UI Component Selection
Problem
-
Now that the flow and proposed functionality of the app has been outlined, it is time to decide on the UI components that will afford this functionality to the user
-
Some components (GO Train-Select Platform) have additional selection functionality that needs to be accounted for
-
List items with no additional selection requirements must be able to coexist with those that need an additional selection
Solutions
-
Google's Material Design guidelines were chosen as a framework for the UI
-
Material Design meshes well with the map theme, as it is meant to evoke the physical world
-
It features comprehensive documentation on how components are used and sized
-
-
Below are the components trialed for the secondary selection of certain list items
Expandable cards were mocked up but not chosen. The checkbox on these cards indicates multiple selections can be made simultaneously, which is not how the destinations list is intended to function
A dropdown with a scrim was trialed to briefly take the user away from the main selection while the secondary selection is made. It was not chosen as longer option lists have the potential to fill the entire screen, overwhelming the user
The chosen solution was a full width dialog with horizontally scrolling choice chips (radio buttons). This has the added benefit of hiding the selection state of the radio button during this intermediate level of selection.
Testing & Reanalysis
User Testing
-
Three test subjects were guided through an example flow of selecting a GO Train platform
-
All users remarked about the lack of "you are here" functionality
-
Some users commented that the text labels for landmarks had legibility issues
-
Some users asked for more comprehensive wayfinding features, like unselected landmarks being omnipresent
Next Steps
-
A future version 3 of this app will need to test the incorporation of "you are here" features, such as unique numbers present on all ads for this app that can be entered to provide an origin location for navigation
-
Zoom and pan features of the map need to be developed further for user accessibility
-
Other interactivity features such as reexamining the scaling of text labels and highlighting of select landmarks will be considered for the next version