The Story
My project group was tasked with creating an application for social good in our city (Charlotte, NC). Transportation on our university's campus is a pain point for students, faculty, and guests alike; this issue is due, in part, to the ten percent growth we have experienced in just five short years—making UNC Charlotte the fastest growing school in the UNC system. So, we decided to fix it.
One of our main objectives was to simplify the transportation experience on campus. A complete route often includes multiple transportation methods (bus, light rail, biking, walking), but that means users have to download and manage multiple apps. What's worse is that the apps available for navigating are not very intuitive or usable.
I had the lead role in this project team of four and my responsibilities included UX research, UI design, usability testing, and final presentation.
Needfinding
We began this project with a needfinding phase which was critical for understanding the problem, existing solutions, and potential users. The goal of our needfinding effort was to answer the following questions:
— What methods of transportation do college students use?
— How satisfied are college students with available transportation?
— What are the concerns college students have with available transportation?
— How do college students travel, individually or in groups?
— At what times of day do college students travel?
— How frequently do college students travel in/out and around campus?
In order to gather as much information as possible, we used three different needfinding methods: (1) Online survey, (2) Observation, and (3) Competitive analysis.
Method 1 — Online Survey
The goal of this online survey was to gather all data reporting from users about their transportation habits in/out and around the UNC Charlotte campus, including methods, frequency, and time frame. We also wanted to find out about their satisfaction level with available transportation and possible concerns they may have with existing systems.
In order to reach a larger audience, we wrote a short, ten-question survey and had a total of 65 responses out of the 72 UNC Charlotte students invited to participate.
Method 2 — Observation
This goal of this observation study was to gather data concerning the transportation habits of users in/out and around the UNC Charlotte campus by observing bus stops, light rail stations, pedestrian traffic, road traffic, parking, and other forms of transportation used with a technique called "deep hanging out"—spending time in the vicinity of the subjects.
Method 3 — Competitive Analysis
The goal of this competitive analysis was to gather data concerning how similar existing applications are designed and how they function. The analysis included three mobile apps: UNCC Next Ride, Social Bicycles, and Light Rail.
Personas
Based on the needfinding results, we set up three personas. We referred to them throughout the entire application design process.
The information about each persona focuses on their goals and frustrations which drastically influenced our design decisions.
Problem Activities
Scenario 1
"When Lindsay first started her semester in August, she was totally new to the UNC Charlotte Bus System. She installed “UNCC Next Ride” and was waiting at a bus stop but was unaware of the name and location of the stop. She opened the application and viewed her current location and the information about the bus stop and route for which she was waiting."
From this scenario, we learned that our application needs to be intuitive for new users because the first use of the app may be during an in-the-moment scenario. Users open the application because they need to know where they are and how to get where they need to go.
Scenario 2
"One day, Siddharth was traveling from the Portal bus stop to Woodward for his class. When he reached Portal to catch the bus, he used the UNCC Next Ride application to find an available bus and the ETA of that bus. After entering the bus, Siddharth minimized the Next Ride application to check some emails and before long, he realized that he had missed his stop and traveled way farther than his destination."
From this scenario, we learned that our application needs to provide en-route alerts when the user is approaching the next stop or turn in their route. Without these alerts, users might miss a step in their route guidance which causes time loss and frustration.
Goal Setting
We defined the following design goals for our project based on the results from our needfinding efforts:
— Users can receive route guidance for a route which requires multiple
— transportation methods via one single application
— Users can quickly find the best route to various locations on campus
— Users can compare the travel times and availability of various transportation
— Users can be well-informed of en-route information via notifications
— System can automatically make predictions about helpful route guidance
— information
In terms of usability, we decided our application should be:
— responsive (across device sizes)
— accessible
— usable indoors and outdoors
— intuitive for new users
— efficient for existing users
Wireframing
In order to rapidly gain feedback from stakeholders and save time during the overall design process, we first created wireframes to roughly layout the interfaces in a low-fidelity and easy to change format.
We created our wireframes using Sketch and annotated them after each iteration of testing and design updates.
UI Design
After we finished revising the wireframes, we transformed those wires into high-fidelity interfaces in Sketch. To maintain a consistent visual design, we used symbols, text styles, and design patterns in Sketch which were shared between team members using Invision's Design System Manager (DSM).
Once we completed this process, we synced our design to Invision and developed an interactive prototype to use for testing—which I will discuss next.
Usability Testing
To evaluate our high-fidelity prototype we conducted a usability test with five participants who represented our target users. The type of analysis we used was in-person observation and we recorded each session with permission from the participants.
Once recording started, we greeted the participants, explained the process, asked them to complete a set of tasks using our prototype, and asked a list of followup questions.
List of tasks:
1. Find the address of Colvard Hall.
2. List all the different ways (routes) you can get to Belk Hall.
3. What is the wait time for the bus?
4. Begin navigation to Belk Hall.
5. Return to the home screen.
6. Go to the “My Account” page.
Results:
Findings:
— The limited interactions available in our prototyping tool caused issues
— Users missed the ability to navigate through the card list using map markers
— Some users struggled to notice the bus wait-time alert on the route result screen
Design Implications:
— We researched other prototyping tools to use moving forward which better
— facilitate the types of interactions in our application (such as the sliding card list)
— The map marker icons were redesigned to stand out more as clickable items
— The font-size was increased on the bus wait-time alert
Lessons Learned
Rapid prototyping is critical in designing user interfaces. Without this technique we would not have been able to test different types of route option comparison so quickly.
Always listen to your users. Sometimes when designing an application, it's easy to get caught up in your own needs and goals as a designer or simply overlook missing components because you've been looking at the same screens for so long. The users are ultimately who you are designing for, so if they don't understand something it doesn't mean they are stupid—it means the design is flawed.
