Overview

My role: UX/UI Designer

Deliverables: Competitive Analysis, Survey, User Personas, User Flow, Sketches, Wireframes, and Hi-Fi Prototype

Timeline: 3 weeks

Problem

Many of the routes stop at the same bus stop, making it hard for riders to know what bus is theirs and when it will arrive, and how much time they have to get there. 

We know already that public transit trackers offer many opportunities, but do not in fact solve the issue of when the bus will arrive and how much time beforehand. In short, we have developed a way to know how far away each bus is from a stop, the question is "how can we create an innovative way to share this information with riders?" It is also good to note that complaints have been directed towards the bus stop at Washington & State which currently has 7 bus lines. 

Brief:

1. Ensure that any rider can tell when each of the buses arrives at the Washington & State bus stop.

2. Ensure that all riders can tell how much time they have to get to the Washington & State bus stop before the bus they need arrives at that stop.

3. Allow riders to select one of seven bus lines to see a list of their future arrival times at the Washington & State bus stop.

Audience

The target audience is students and middle-aged individuals, ages ranging from 18-35 or older.

Solution

Based on the brief, I created an onboarding process that requires the user to share their location. From there, an interactive map with the nearest bus stops at Washington State from their location appears. The user can see when the bus is arriving and how much time they have to get to the bus. Each bus line and stop is color-coded and matches the bus lines shown on the interactive map. In addition, lrt. provides the user with live directions to help guide them to their destination. I also created a way for users to see any future bus arrival times through the interactive map.

Process

The first research method I explored is a competitive analysis. I analyzed what other companies in the industry were doing that I could also implement into lrt. These are valuable in gaining insight on key features that are working for other companies and what is not working. The competitive analysis really developed the inspiration for lrt. I compared two other transit apps — Moovit and Transit. From analyzing both apps, I gathered, for example, that each app had a way for users to save a location to their favorites and so I knew I wanted to make sure I had that as an extra feature.

Competitive analysis

Survey

I had 17 participants and was able to gather information on who my target audience was going to be and what they initially wanted to see be improved in public transportation. From the results, 62.5% were individuals aging around 18-24 years old.

Based on the results, I learned a couple of main frustrations with the transit system that people had as well as features on a transit app that is already liked. Some screening questions that were asked:

1. Do you take the bus?

2. How often do you take it?

3. Would you prefer not to take the bus?

4. Would you consider the bus affordable?

You can see here the top main frustrations found are over-crowding, availability, and simply a confusion of use. Features that individuals found helpful on a transit app are alternative routes that are usually listed, bus ETA listed, and an Interactive map. This is where I got the idea to implement the interactive map since users were already familiar with it!

User Persona

From the data collected from the competitive analysis and user surveys, my next research strategy was to design a user persona. These are useful in keeping the user and the target audience in mind when designing. By taking the time to create personas, you can think about who you are designing for, what they may be thinking, feeling, or doing, and figure out their main frustrations and motivations. We are able to better empathize with our users in the process as well. For this project, I started with creating proto-personas to then after gathering research, created a persona. Meet Lola, Mazy, and Max.

User flow

I went through a couple of iterations on the user flows. By creating a user flow, I was able to see the app from start to finish and see a potential path a user would go through when using the app and if it fulfilled the business requirements.

Sketches

Next, I believe I gathered enough information to start brainstorming visual ideas and sketch wireframes. I was able to implement The Crazy 8’s sketch method, to help get inspiration onto paper. This image is my first shot at what my app could potentially look like. This process aided me in laying out my ideas before going into creating digital wireframes. I was able to brainstorm different ideas for screens and get feedback from my peers and mentor.

Prototype

Wireframes

Thus, leading to my actual digital wireframes. This was my first version of the wireframe out of about 3 different iterations. Throughout the process, I added a login page, a location tracker, and an end page, that way the user can experience the app from start to finish. In the digital wireframes, you can see the sketches are quite different from the final version. The main purpose of creating wireframes is to nail the functionality and structure of an app, without getting distracted by any design elements. Because I have personally never used a transit app or have ridden a bus in a large city, I had to dig deep into the research aspect before starting on the digital wireframes. I watched a lot of youtube videos and blog posts!

Usability Testing

Before I get into the usability report and results, I want to show what the prototype looked like to the user before I made iterations of it.

Findings

1. I found that the majority of test users thought the material was hard to comprehend. Because the bus routes and #s looked identical, it was difficult to differentiate one from another (Solution: Implement color-coding, make the app more glanceable).

2. The live directions screen towards the end had a 67% misclick rate along with the favorites tab. Users seemed to not know what to do next or if it was the end of the app (Solution: Enlarge checkboxes on live directions, have a location already present on favorites tab).

3. The last problem spotted is the beginning of the prototype, mainly the login page. There was an 85% success rate so not terrible but I still saw room for improvement in this area You can see though that the users were looking in the right areas so what got them stuck? (Solution: Remove double-login, have user and password already present on screen).

Prototype

Finally, you’ll see the iterations after the usability test and the app prototype!