One Track

One Track is a regional mobile app designed to suit the needs of bus commuters. Easily find bus lines, timetables, and departure times.




Date & Duration: October 2020, One Month

Role: UX Researcher, UX Designer

Deliverables: Hi-Fi Clickable Prototype for Mobile iOS

Methods Used: Usability Testing, Interviews

Tools Used: Figma


Deliverables:






Background

As a course project, I was tasked with creating a mobile bus application for a city's transportation department to serve thousands of bus commuters.


The main concerns were identifying the desired bus line and determining the remaining time until the bus departed.







Empathize



To begin gathering insights, I sent out surveys to understand behavior surrounding bus commuters. I received responses from 20 qualified participants, and conducted five telephone interviews. Through these interviews, I was able to extract some data to begin generating project artifacts.


Interview


From the surveys and conversations, I drew up an empathy map to consider the thoughts and feelings of commuters when using their bus system.

Quotes


“I’m concerned with ensuring I arrive to work on time.”


“How much time do I need to get to my stop?”


I will just take an Uber or Lyft if the bus is running late."


"If I miss my normal bus I'll just opt for the metro instead of waiting for the next one. Stops are infrequent."

Proto-Persona


From the interviews, customer journey map, and data collected from the surveys, I made some personas to illustrate the type of user who might benefit from this application


Carousel imageCarousel image


Define




Moving into the define phase, I realized that this application would have the following audience:


  • Useful only exclusively to regular commuters (And therefore did not need to compete with Google Maps, Waze, City Mapper)

  • Useful only regionally

  • Needed to provide the primary function of showing bus timetables (Not concerned with destination guides)


It was through these realizations and my user interviews that I was able to develop a final persona, and define the problem statement before moving on to the ideate phase.


Problem Statement: How can this application provide updated, easily accessible departure information to frequent bus patrons?


Persona


This persona, Alexa, reflects the habits that most interviewees exhibited; riding the bus out of necessity and ease, normal stressors like the prospect of getting on the wrong bus, and always considering alternative transportation methods.

Ideate



In this phase, I began putting together ideas for the layout of my app. It started with several iterations of wireframing until I felt comfortable with the design as a solid minimum viable product.


My goal was to develop something succinct but complete to begin user testing.


User Flow + Site Map


To guide my designs while ideating, I put together a user flow diagram of what would be the quickest path to completing the two tasks: selecting a bus line, and selecting an available departure time from the timetable. Having an explicit countdown to the selected bus line departure was a client requirement, so I wanted to ensure that this was built into the main user flow.



Client Application Specifications


1. Easily pick out their desired bus line from a busy bus hub serving seven bus lines.


2. View how much time was left before the desired bus departed.


3. View future bus stop departure times for the desired bus line.


Carousel imageCarousel image


Prototype


In this phase, I built on my wireframe models to develop a high fidelity prototype to begin user testing.


Wireframes:


Version 1


The first iteration of the user flow incorporated familiar elements that users of other transportation applications would recognize.

Version 2


In the second iteration, I changed the theme, placing a greater emphasis on differentiating between buttons and text fields.


I also moved the search function to the bottom of the screen to make this important feature easier to reach with the thumb, and in keeping with recent design trends.

Design Decisions


1) Given the knowledge that all surveyed and interviewed users already used at least one navigation application when traveling or commuting, I wanted to design my app to be as close to industry standard as possible to alleviate any friction or unnecessary cognitive load.


2) As I discovered in my initial survey response, the targeted user that would gain the most benefit from this application is the user who commutes almost every work day via bus, as this app is primarily a means of seeing the departure times of buses. The primary function of the app is not to provide navigation.


3) Keeping this in mind helped me design an efficient user flow, and really focus on ensuring that this feature was the most prominent and the most straight forward.


This user flow is the crux of the application. I chose a very simple path for the user to select the desired bus line, direction and time.


Test




I observed different users via zoom, asking them to complete three different tasks based off of the prototype I had developed.


Test Findings


  • All were successful in completing the main task of finding the next departure of a specific bus line, but two participants were not successful in one of the secondary tasks.


  • I discovered that users were not differentiating between the “Search Location” feature and the “Timetable” feature. I also observed that those who did successfully complete both tasks in the manner I had envisioned, still hesitated and seemed unsure of the path.


  • As this feature was somewhat connected to the “timetable” feature, which was the main point of the application, I decided to redesign the home page.


The prototype shown above of the two user flows are the flows that the users were having trouble differentiating between.


Prototype & Test



In an effort to simplify the prototype to ensure I was wholly focusing on the client’s initial request, I made two large design changes.


Prototype


I scrapped all extraneous features on the home page, leaving the only option to use the search button, or enter into the side menu. I also combined the user flows that users were having trouble differentiating between, to allow users to either search a specific destination, or a particular bus stop.


Test


I retested the redesigned model on three new users.


Results


They each were able to complete the tasks without issue.

Recap & Results

Objective


Provide a means to access departure information


Important Considerations


  • This application would be best served to focus on the needs of existing commuters.


  • It would not focus on providing additional information about surrounding points of interest, or alternative transportation method like so many other transportation apps.

Conclusion


Through the process of learning about the user, creating solutions, and testing, I was able to create a simple but effective design. The user testing proved successful in uncovering an important design weakness, and allowed my second iteration to solve this design problem.