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.

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.

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.

Respondent Quotes

These are key respondent takeaways from those individuals that completed the user survey regarding Bus Bliss.

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.

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.

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.

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.

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.

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.

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.