A More Convincing Navigational Application
Established on Oct 20, 2022
UX Research/ UX Prototypes Design
What is 'Easy Navigation'?
Easy navigation was created to help users of the NYC subway enjoy navigation features, real-time train information, and access to facilities at the station within a single app. Most users are concerned about the security of riding on the train, and our team decided to link to a third-party app called 'Citizen,' which allows users to see if any criminal affairs are occurring in the area to ensure security while taking the sub.
What if an app lets you buy digital metro tickets, navigate offline, view real-time train info, find wheelchair-accessible routes, and receive live updates on nearby incidents?
Define Problems
Before entering the design phase, our team extensively researched various facets. We examined existing network applications to assess their strengths and weaknesses. Our discussions unveiled prevalent issues, such as inaccurate and inaccessible train schedules that led to tardiness and frustration due to misleading departure and arrival times. We also identified instances of trains bypassing designated stops, causing delays for passengers who missed voice announcements. This resulted in unplanned extra stops and disruptions to original schedules.
Additionally, we have mentioned that the noticeable gap between trains and platforms posed safety concerns, prompting consideration of protective door installations. However, redesigning the installation of the stations shall be something other than our focus as UX Designers. Consequently, we shifted our attention from technical issues to enhancing user experience and decided to narrow the scope and focus on a single subway line as a beginning.
Primary Users of Our App: People Who Take the Metro/Subway As the Main Public Transportation Method.
Our focus was on Jay Street Metro Tech in Brooklyn, New York, encompassing the A-line, C-line, F-line, and R-line for our study module. Since New York University maintains two key campuses in this vicinity, we engaged with professors, staff, students, and local residents. This comprehensive approach ensured diverse data collection. We have assigned our group members to random lines to foster a deeper understanding of users and better empathize with our users. We have documented the issues we encountered alongside what our interviewees reported, capturing available station facilities, including navigation signals, digital displayers for real-time train schedules, and elevators. Additionally, the accessibility of these facility indicators was taken into account.
Empathy Map We Have Conducted After the Interviews
Affinity Map We Have Conducted After the Interviews
A Navigate Signal In Jay St Metro Station
Signals in Jay St Metro Station
An Exit Signal In Jay St Metro Station
An Exit for Jay St Metro Station
A Digital Displayer In Jay St Metro Station
Early Stage of Problem Solutions
We formulated two sets of personas centered around our primary users. These encompass international students, mostly first-year students unfamiliar with taking the subway yet required to take it on a daily basis, and staff members who worked mainly in the NYU Brooklyn Campus but still need to travel between Manhattan and Brooklyn campuses. We provided concise profiles outlining their backgrounds, objectives, challenges, and personal information. This approach aids our app design by thoroughly grasping relevant considerations.
User Personas We Discovered Based on Data Collected
According to 36 responses we collected from the survey, over 97% of respondents use a mobile application to assist with navigation, and over 77% of users use an app to help them when they get lost in the station. Yet, it is still not guaranteed to find the desired exit for most of the time. For the NYU community, over 50% of respondents need help finding the correct exits, 67% need help understanding cardinal directions on signs, and 81% need help tracking audio announcements on subway carts.
Imagine if you forget to charge your phone the day before and the batteries suddenly die. Not to mention the unstable internet connection in the station, it would be great if there was an app to navigate you even if you're offline, Isn't it?
We came up with the following user needs statements...
-
Johnson, who struggles with finding the correct exit out of the subway station, needs to find clear directions in the station because he wants to get to his destination in a timely manner without getting lost.
-
Dr. S needs to find a way to access navigation instructions in the station because she does not want to always have to rely on apps on her phone.
-
Dr. S needs a way to easily access stop information in the subway car because she is short and can’t see the signs over all of the people.
​
and how might we questions...
​
-
How might we help Johnson to find directions in the station better so he won’t get lost?
-
How might we help Dr. S navigate to her destination without having to rely on a phone app?
-
How might we make stop information more accessible on subway cars?
A User Journey Map We Designed
Based on the feedback provided by stakeholders, we recognized the significance of delving deeper into the cultural context of the Jay Street MetroTech neighborhood residents. Given their dual role as both users and a distinct demographic identified early in our research, conducting thorough investigations from this perspective is imperative. This exploration will enable us to formulate more intricate "How Might We" (HMW) questions. To establish a consensus regarding design directions, we engaged in a 'crazy 8' sketch exercise, brainstorming potential solutions grounded in our user experience research. While six of the eight ideas centered around replacing or installing digital displays in various stations and subway cars, which would incur substantial costs, we decided to create a navigational app with five key features, considering our budget constraints.
​
-
Monitoring the current train departures and arrivals in real time.
-
Displaying the subway map alongside a live location feature.
-
Facilitating navigation assistance.
-
Enabling the acquisition of online tickets (individuals without Apple Pay or Google Pay accounts can add payment methods, buy tickets via the app, and activate them for usage).
-
Potentially integrated with the "citizen" app, sending alerts to users in case of hazardous incidents.
​
Dive Deeper On Design
Moving beyond storyboard sketches, we progressed to generating concepts and defining wireframes for prototypes using Miro and Figma. Our project used the well-regarded metro app "MetroMan" as the reference, aiming to craft a straightforward, well-structured metro application incorporating numerous routes and information aligned with insights gleaned from our earlier user research. An additional "safety" segment was introduced within station details, serving as a link to the Citizen app for assessing safety conditions near specific stations. This decision stems from user research outcomes, revealing considerable apprehension about NYC subway safety. This feature empowers users to evaluate security around their destination, enhancing trip planning. Moreover, we integrated exit and entrance data to navigate the intricate NYC stations and avoid confusion. To address accessibility concerns, we allocated a section within station details to present facility information, such as escalators and elevators.
How We Brainstorm Ideas On Miro
Storyboards Of How Our Prototypes Look Like
Low Fidelity Prototypes Design On Figma
First Version of High Fidelity Prototypes Design On Figma
We conducted usability tests to collect input from our colleagues and identified four crucial areas for enhancement based on insights from our low-fidelity prototypes. Many users have complained about the size of the icons and expressed a desire for more prominent logos to enhance visibility. Furthermore, the route lines in the previous version were hard to see due to their thinnest lines; some of our users requested thicker lines and potential highlighting for improved clarity. Additionally, some participants proposed shifting the 'my profile' button forward and changing the button label from 'announcement' to 'alert' to increase visibility. Lastly, there was a suggestion to refine the layout of the 'search exits' page, striving for a more aesthetically pleasing and minimalist design.
Thin Lines from Version #1 Prototypes Design On Figma
Thick Lines from Revised Version Design On Figma
Results
After weeks of development, our team used heuristic evaluation to final review our project, including what we have done right and what we need to make further improvements if another revision needs to be attempted.
Visibility of System Status
When the users click on the button 'Go to Citizen App,' there will be a progress indicator showing the users that the system is processing that request; as soon as the transaction finishes, it will automatically redirect them to the Citizen App.
User Control and Freedom
The interactions between each page were connected with left arrow icons, allowing users to go back and forth in pages, and the navigation menus on the bottom let our users access their desired pages at any time.
Consistency and Standard
Our design is consistent in helping users identify the exact routes and find the proper exits while ensuring safety and satisfaction throughout the trip. In addition to maintaining consistency in the design, our color theme is consistent in orange and gray.
Flexibility and Efficiency to Use
The profile page allows users to add their metro cards by entering the individual numbers of each card and entering their credit card information if they do not own one, allowing users to pay digitally more conveniently.
Aesthetic and Minimalist Design
In our design of Easy Navigation, we have chosen Orange as the main theme color. We consider Orange as part of a warm tone color that stands for a sense of welcoming and we hope this could provide comfort and security to our users while using the app.
Easy Navigation Sticker Sheet
Flexibility and Efficiency to Use
The profile page allows users to add their metro cards by entering the individual numbers of each card and entering their credit card information if they do not own one, allowing users to pay digitally more conveniently.
Match Between System and the Real World
We use natural users' language instead of developer's jargon. The information we provide in the 'Alert' is appropriate without logical issues, which can help reduce users' cognitive load.
Rules that Our App is Currently Unavailable
-
Error Prevention & Help Users Recognize, Diagnose, and Recover from Errors.
-
When inputting the departure and arrival address on the first page, if the users attempt to insert the same locations on both bars, a notice of error window should pop up to warn of the abnormal action. Such as 'Oops, something went wrong...' or a friendly note of 'Please be attentive that you have placed the duplicate addresses in both sections. '
-
​
-
Recognition Rather than Recall
-
Due to time restrictions, we cannot add a feature allowing the users to bookmark or star their previous trip history into 'favorite route,' which can be even more convenient for our users if they want to save routes they frequently take every day.
-
​
-
Help and Documentation
-
We want to add an online assistant 'Help' page, which includes solutions for any possible technical issues in an app, such as having trouble locating their positions, asking for a refund, needing help setting up a payment method, etc. The users may contact us with the provided contact info for more complicated issues.
-
Revised Version of High Fidelity Prototypes Design On Figma
Improvements can still be made to our app in the future, but we are still excited about the opportunity to craft a user-centric application.
A Demo Video for Easy Navigation Prototypes
Collaborated Work with fellow team members: Wai Ting, Adam, Sherry, Ruoxian, Julie.