Mockup - App Home Screen


Bus App
Project Overview
The best products don’t focus on features. They focus on clarity... The same applies to good case studies.
I set out to follow this principle when designing a bus app that was simple to use and intuitive for app users of a Midwestern bus transit company in the state of Michigan. The app would allow them to personalize each bus trip in a pain free way.

Teamwork
Project Teams
Tools: Illustrator, Figma, Rotato, Google Suite Team: 1 UX/UI Designer My Role: UX/UI Design Timeline: 4 Weeks, 2 for Discover and Define and 2 for Design and Testing

Lets Brainstorm About a Solution
Problem Statement
The city of Grand Forks, Michigan is expanding bus service. The increase in routes has caused confusion for riders. This is especially true of the Washington and State stop, where 7 buses service that stop. Our goal for a positive app design was based on 3 primary requirements as stated by the client. They are the following.
1.) Riders are having trouble as they can't tell when each bus is arriving at the Washington and State bus stop.
2.) Users want to know exactly how much time they have to get to the Washington and State bus stop before the bus they need arrives.
3.) I needed to allow users to tell when each of the 7 bus lines servicing Washington and State was arriving along with the future arrival times for each route.

Waiting to Board!
Target Audience
Any current or future riders within the city
People who have ridden the bus at least a few times during the past year
Those 18 or over who regularly take the bus to work or school
Anyone wanting to get to their destination in a more timely manner

Pain Free Bus Riding
Solution
The end impact of the project was a bus app that is intuitive and allows the user freedom of choice to make personalized, pain free decisions while scheduling a bus trip.

Design Process

Time to do Some Research
Research Methods Used
Competitive Analysis
Surveys
Personas
User Interviews
Empathy Map
Journey Map
User Story

Competition
Competitive Analysis
The link below illustrates 2 main competitors that were analyzed against Bus Bliss. I chose City Mapper and Move It. Click the link below to see the strengths and weaknesses of each competitor and areas of opportunity.

Bus Bliss Survey
Surveys
After the project kickoff, I wanted to streamline the research process. Understanding the target audience and their challenges was a top priority. First, I built an online survey, made up of a combination of multiple choice and drop down choices, and shared it in various relevant communities. In just a few days, I received 29 submissions. Based on these, I was able to identify 5 common pain points, which lead to the next step.

Survey Results

Survey Results

Survey Results

Survey Results

Survey Results

Survey Results

User Thoughts
Respondent Quotes
These are key respondent takeaways from those individuals that completed the user survey regarding Bus Bliss.
User Interviews
During the ideation phase of the project, I conducted 2 user interviews to build new personas and to inform the design. I then prepared an interview script with 10 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. In 3 days, I recruited and interviewed 2 users remotely, one a student, and one a working employee. I referenced the user interview findings here and throughout the entire design process. Below are some of the questions that were asked.
How do you feel about current apps and materials available?
How do you feel about improperly communicated routes?
What would you do differently to inform of changes?
Do you think location searching to be valuable?

Let us Use Our Research to Create Personas
Personas
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas for each of our user segments that can be seen below. They were based on user interviews and surveys, and I kept updating them throughout the project as we gathered more data. I used these personas whenever I wanted to step out of myself and reconsider my initial ideas. The initial personas seemed to fall into 2 main groups, those that were tech savvy and those who lacked technology experience. The persona backgrounds were used throughout the design process when considering the flow of what the prototypes would eventually look like.

Personas Created Based on Research

Empathy Map
Empathy Map
I set out to find out how a persona would feel. What might they say and do? I also wanted to explain the pains this persona might experience and any gains they might have along the way.

Empathy Map

All Aboard
Journey Map and Findings
I created a customer journey map to build a better understanding of how customers find and interact with the bus service and to discover opportunities for improvement. The map revealed a few user problems and opportunities at the consideration and loyalty stages of the customer journey. Therefore, I paid special attention to these stages during the design process. Upon completing research I noticed that there appeared to be 2 distinct flows that would affect my design moving forward. These would be the path a lo-tech user would take and that of a high tech user. I applied what was learned and made distinct user stories with user flows.

Journey Map

Enjoying a Ride
The MVP
What is the simplest version of this bus app that can be released?
The MVP can be reflected through our research and 2 personas. We have a tech savvy group and a not as much group. We need to develop 2 flows with pretty simplistic processes and perhaps fewer screens to accomplish the goal of an effective MVP. A search tool and a route planner would come in handy.

User Stories About People Riding Buses
High Impact User Stories
These are examples of what tasks the user would want to do to satisfy what the client is asking. It was important to phrase these a certain way. Typically, we want to say, "As a rider, I want to, so that. Phrasing it this way allows us to illustrate what a user flow might look like.

User Stories

How Might the User Utilize the Product?
User Flow
This is the decision process and the flow a user would take as they work through the app. They would follow one of these decision flows to complete one of the tasks the client is asking for designing this app. This is based on previous findings including the high impact user stories that were previously created.

User Flow

Site Map
Site Map
This is a representation of which screens will be present for the app and how each of these screens can be accessed within the overall flow of the app.

Sketch Possibilities
Sketches and Paper Prototype
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, A/B testing found below, and a heuristic evaluation. They each pointed to the fact that there were too many distractions in the flow. I came back to the sketches throughout the entire design process to make sure that I didn't lose sight of the primary goals and ideas. I minimized the flows to represent what each persona may want to accomplish with the app. These are the sketches I eventually settled on working with as they best represented the personas and flow we wanted to achieve.

Paper Prototype

A/B Testing
A/B Testing
I conducted some meaningful tests with 5 users to determine which screen designs of the wireframe possibilities they liked best. I used a control screen with one variable option to see which one users picked. The settled upon choices that were selected were then incorporated into the wireframes below.

Wireframes
Wireframes and Clickable Prototype
Using Figma, I translated my first sketches further defined through A/B testing into low-fidelity wireframes. Then, I improved them by adding a fun, relevant icons that could be used to get directions. At this stage, the wireframes were defined enough for some user testing. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes. I had to make 3 iterations to eventually settle on the lo-fi clickable prototype you see below. The first images you see are the digital wireframes we decided to work with and then you will also see a demonstration of the clickable prototype below.

Wireframes
Mood Board
Below is the theme I wanted to use to convey for the bus app.

Bus Bliss Mood Board

Color Blindness Test
Accessibility Check
I ran an accessibility check to ensure colors chosen were AAA accessible and color blind safe. The palette chosen passed both tests indicating a high level of accessibility for potential users of the app.

Contrast Test
Accessibility Check - Contrast
Color choices passed as AAA for contrast.
Hi-Fidelity Wireframes and Prototypes
Here are the high fidelity wireframes and prototypes.

User Issue #1
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Figma. At the same time, we started recruiting subjects for a usability test who fit our criteria. We did 3 usability tests in the first round and the same 3 again after iterating on the issues that were identified in the initial testing. The testing was important to illustrate potential issues and errors that might arise while using the application.
Issue 1
An issue surfaced where the users could not understand which routes were being displayed on the map. They also could not identify the stops. This came up for all 3 users during the test. They were readily frustrated that they could not separate out each route.
Solution 1
I created a route trace for each route, separating it by color and placed a key on the bottom of the page. I also made each bus stop larger with a bus icon to illustrate it was a stop.

User Issue #2
Usability Testing (Cont.)
Issue 2
An issue arose where the users could not understand how to make the step by step directions works. They also wondered how to find the arrival times to the stop. This came up in all 3 tests. Also, 2 out of 3 did not like the dotted line route trace.
Solution 2
I eliminated the 2 pages for step by step directions and combined them effectively into 1 page that solved this. I also made the route trace a solid line and clearly displayed the step by step arrival time, making it prominent.

User Issue #3
Usability Testing (Cont.)
Issue 03
All 3 users mentioned they would like to see an all button displayed so they could look at all routes. All 3 mentioned the button for display and were unsure what to do with it. 2 out of 3 users mentioned that the checklist was hard to track while reading it.
solution 03
The solution was to make the checklist more readable by drawing the eye naturally across the page. I also eliminated the button below and added an all routes function.

Finished Home Screen
Usability Testing 2
After doing a 2nd round of testing the original 3 testing conditions were met and no one had any additional problems using the product. The initial usability test concerns were met.
Next steps
01
A further exploration of delivering the product to various transit markets around the country.
02
Make the app completely voice activated. You could fully interact with it vocally.
03
Explore the idea of interactive bus stop kiosks at key bus stops and staging areas in cities.

It is Time to Celebrate!
Things Learned
This taught me a lot about what makes superior navigation for a design. Users want to see exactly where they are going and each step along the way to get there. Originally I made the mistake of having too many pages to link together which made navigation harder to understand. I learned you can make it neat by combining screens. I ultimately set out to create something simplistic with great flow and I felt this was accomplished, allowing the user a personalized, rewarding bus planning experience.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.