Terminus: Bus Tracking

Case Study By John Lattanzi

09/14/2020

Overview:

Project Summary:

I was tasked with designing an app that would better allow users to figure out when the right bus is coming to them. The goal was to utilize research from daily commuters and users who use the bus for other purposes to better define a way to make the bus times more accessible to them. The process involved a month-long process utilizing the Double Diamond design process that focused on iteration and making this app the best it could be. I successfully implemented ideas that were intended to increase the functionality of this app while maintaining accessibility and usability standards. Furthermore, I utilized visual design techniques to make this app one people enjoyed using.

Client: Transportation Agency for a Midsize Metropolitan Area in the Midwest. They have a network of public buses and are expanding their bus lines and transit system soon.

Product: Mobile Application for Bus Tracking

Project Dates: August 17, 2020 - September 11, 2020

Tools:

• Figma

• InVision

• Photoshop

• Miro

My Role:

I managed the full process of this case study from UX Research to Wireframing and Prototyping to Visual Design.

Responsibilities:

UX Research

• Drafted a full Research Plan

• Compared competitors in a SWOT analysis

• Conducted User Interviews

• Formed User Stories to better prioritize business requirements

• Crafted User Surveys

• Created personas, empathy maps, and journey maps

• Tested for accessibility standards

Problem Statement:

To start, these are the issues the client came to me with:

• Many bus routes stop at the same stops and riders need to know which is the right bus

• Riders are complaining about Washington & State due to the amount of buses there (7 lines now go there) and inaccurate times of those buses

• The city has developed a way to know how far away each bus is from a stop, but isn’t sure how to share that information with riders

To achieve success in this project, these were my business requirements:

• Ensure that any rider can tell when each of the buses arrive at the Washington & State bus stop

• 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 the stop

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

That all being said, the aim of this app is to allow users to find their bus routes more effectively and to give them a more intuitive way of finding their route, the time of the buses, and the way to get to the stop. The current applications struggle with consistency for bus tracking and that has led to a lot of distrust towards bus times that I seek to eradicate.

User Needs:

To improve the user interaction with this application, I needed to provide a clear explanation of how users will find bus times, bus routes, and the way to get to each feature of the application.

Constraints

• One month deadline

• Limited Resources for further development

The rest of this Case Study will be broken down into different parts of the Double Diamond Design Process: Discover, Define, Develop, and Deliver.

Discover Phase

My whole Research Plan is listed below:

Methods of Gathering Research to ensure the work we’re doing is user-focused and designed with them  in mind:

• Surveys

• Competitive Analysis

• User Interviews

Surveys:

The survey I created was to focus on the user’s usage of the bus system, their biggest frustrations, and what apps are already in play in terms of competitors.

I gathered results from 31 people where the majority of responses came from 21-39 year olds who mostly use the bus system for work, general city travel, and errands.

My biggest takeaways were that the biggest frustrations for users were:

• The fact that they trusted the bus system, but not for the buses to get there places on time

• That it was easy to find bus stops, but not the specific times of the buses

Competitors:

According to the poll in the survey, Google Maps was the most common answer people chose. I also noticed TransitStop being listed and chose to focus on it because of its location - it’s the main one in Chicago, another city in the Midwest, so I counted them as the nearby competition.

I then conducted a competitive analysis on these two apps, specifically using SWOT analysis.

The biggest takeaways I got from this were in terms of strengths and weaknesses.

User Interviews

Following my look through these apps and my survey results in hand, I conducted three user interviews with individuals who responded to my survey. 

The themes found in these interviews were a general frustration with the tracking systems, occasional safety concerns that pop up on the bus, and there were a lot of accessibility issues within these apps. These findings supported my research from my SWOT analysis, so I knew what my focus should be moving forward.

So far, this is the information that I knew:

The bus tracking was generally unreliable for users

• The bus tracking was generally unreliable for users

• Users had difficulty navigating the app or looking for new routes

• Difficulty finding specific bus stops

• Trust of the bus systems were high, but there was a lack of trust that they’d get you where you needed to go on time

I took that information and decided to create several user stories that would help me visualize what the users would want in a new app, why they would want it, and what the priority level of that feature would be.

I took this information a step further and created 3 personas that highlighted the biggest frustrations and biggest needs that my research reflected to help me focus on the user’s driving forces moving forward.

Well, I actually went further than that and created them as proto-personas before they were personas and created their journey maps and empathy maps to help me get inside their head.

For the purpose of this case study, I will be focusing on the personas themselves.

The first persona I created was David; he’s a 29 year old freelance photographer in Chicago that is a flexible user for the bus system. The reason I classified him as such is because his travel varies day by day based on where his client wants pictures from, where their office is, and what he’s looking to accomplish for the day. 

Due to how his travel varies so heavily, he is who I based a lot of my decisions off of.

Next up is Julia; she is a 26 year old Marketing Assistant in Milwaukee who uses the bus system every day to get to work. I wanted to make sure I included someone who really only needs information for one bus line at one stop each way of her commute.

Finally, I created Adonis; he is a 37 year old C-level executive for a start-up he created. I wanted his journey to be a little different to encompass the final type of commuter who uses the bus that I got in my survey. His path is that he drives to his parking spot for work, which is a far walk from his office. So, he can either hop on the bus or walk, based on what is most convenient. The bus definitely gets him there faster if it comes soon, but he’d rather start walking if the bus is going to take a long time. Also, he works at a start-up, so he has longer days and wants to get home to his family, so he can spend more time with his kids and coach their sports’ teams.

The clarity that I gained from making these Personas helped me focus on making this app accessible and easy to use for all commuters, where they can find the information quickly.To recap, these were the biggest pain points:

• The bus tracking was generally unreliable for users

• Users had difficulty navigating the app or looking for new routes

• Difficulty finding specific bus stops

• There was a lack of trust that the buses would get you to your destination on time

Define Phase

The next step in this process was to start sketching out ideas on how I could accomplish these goals, help fix the pain points, and be something user-focused.

To do so, I sketched out some drawings, site maps, user flows, and wireframes.

The biggest issues at hand were in reference to the actual timing of the buses, navigation within the app, and accessibility of using the app in the first place for users. To solve these problems, my idea was to:

• Create a new interface that functions similarly to Uber and Google Maps

• Show where the buses are in real time

• Make it clear where the bus stops are and what they look like

• Be able to identify newer (and hopefully faster) bus routes

• A 3-click rule, where you can find any information you want on the app within 3 clicks

These were some of the first sketches I created to go through how I wanted the app to flow and what I wanted the interface and site map to work. As time went on, I went through countless iterations for my user flow until I reached one that fit all my criteria. 

Again, I wanted my app to function based on the 3 click rule, so these were my final iterations for some of the main tasks associated with this app:

Find Bus Stop and Find Bus Route, respectively: 

From there, I created my sitemap to showcase my 3-click rule a bit better.

Onboarding and General Use, respectively:

After creating these deliverables, I went back to the drawing board before creating my wireframes.

It took several iterations of Wireframes, too.

The final iteration of my wireframes started to look like this: 

From there, I took another step back to see if I was actually solving the users’ problems. I believe that the choices I was making were focused on the 3-click rule, making it easier to navigate and find the information you need, using a way of implementing the tracking system the city already has, and utilizing better accessibility practices.

So, I felt my app was on the right track.

Develop and Deliver Phases:

Design

The name I came up with is “Terminus” because the definition is “a final point in space or time; an end or extremity”. The reason that was important to me is because I know no one enjoys taking the bus, the reason they’re taking the bus is because they’re trying to get to a final destination and I want the process of finding the route there to be as easy as possible. The goal is to let people get to where they need to go to finish their tasks, create memories, and live a life they can be proud of. So, focusing on the final destination as an app is where my design process came from.

Additionally, I wanted to go with a muted color palette for that reason. A large chunk of people take the bus in the morning and a very small chunk of those people look forward to tracking the bus times. So, I wanted it to feel trustworthy, reliable, and concise without it yelling at you to be positive on those rainy days. The picture of the campfire reminded me a lot of the mood I was going for - something calm and relaxing with the destination in mind. The complementary colors of orange and blue were great, so that’s where I started.

I created a full Moodboard to showcase my thought process:

As I mentioned, I wanted a muted color palette and a focus on complementary colors. Eventually, I ended with this color palette:

The moods I was going for were trustworthy,  calm, concise, and nostalgic. The color blue in color theory symbolizes that calm feeling and is very reliable and trusting. Orange is known as the color of energy, so I thought a soft orange would bring about a quiet energy to help jump start the morning. Additionally, since this bus company is located in the Midwest, I wanted the colors to be nostalgic, so I thought using the colors of the University of Illinois (orange and blue) would be something people would recognize immediately.

Logo Design

I described why I named the app ‘Terminus’ earlier, but to recap, it was because I wanted the goal of this app to focus on the destinations ahead of you.

Based on the same principle, I chose Merriweather Black as the font for the logo because it was a Serif font, which is known to be more reliable and trustworthy. Also, I thought the way the word looked with this font specifically looked a little more science-fiction, which is what the word ‘Terminus’ itself reminds me of.

Moving on to the logo design, I wanted it to be really obvious that this app was a bus app specifically. I didn’t want any questions as to what this app was meant to be. So, I used a specific bus logo that I really liked and added the ‘T’ for Terminus in the accent color, making this design something specific and unique, but very recognizable right away.

At this point in the design process, I wanted to take a look back to double check that the colors were readable and accessible. So, I tested every combination of colors that I was using for the app to make sure they passed the Contrast Checker feature that WebAIM offers. The main colors were the #112842 (dark blue) and #FFD8AB (soft orange), and they passed easily.

Moving into Typography specifically, I mentioned why I chose Merriweather as the Title font, but I also used it as the font for each title screen for the different pages for the same reason. However, I went with the Sans Serif font Lato to be the font for the general text because I read about how easy it was for people to read and I liked how accessible it was on a larger scale.These are the specifics of what sizes and fonts I would use and at what point I’d use them.

Now, we’ve gone through all the steps to getting to the Prototype, so I think now is the time to showcase the prototype itself.

Validation

To start this part, I wanted to remind you of what the specific goals were for this project.

• Find when all buses came to Washington & State

• See how much time it would take to get to the stop for users

• See the future bus times of each bus line

I returned with this prototype to the users and this was the feedback I received:

• It was very readable

• The navigation made sense

• The 3-click rule worked

• The home button’s location made them think it wasn’t clickable

Takeaways

The biggest takeaway that I received from this process was the reminder that making things simpler is normally the best option. Making this app clear and concise for the user is what made this more successful than anything else - this is because when you focus on the user’s needs, the design and development process is much easier. Additionally, I learned that the iterative process never stops. I have more work to do on this project and I probably always will!

For future iterations, I’d like to focus on some of the lower priority features that I outlined in my User Stories. For example, I’d like a more interactive feature where once you’re on the bus, you can see what restaurants, parks, and buildings you’re driving past. Also, I’d like to implement some safety and sharing options to make users feel the most comfortable possible. Additionally, I’ll play with the design and find a good spot for the home button!

The big question is: Was this a success? Here’s a refresher on our objectives: 

• Ensure that any rider can tell when each of the buses arrive at the Washington & State bus stop

• 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 the stop

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

In terms of the first requirement, I think the tracking system was implemented in a way that was really readable and concise, so I think that checks that box very well. For the second requirement, the app gives you walking directions to each stop, showing how long it takes to get each place, but also shows you your specific location on the map to do so on your own; combining those I think helps the user quite a bit. The third requirement breaks down each buses’ lines and you can see the location of the bus in real time, so they’ll know specifically when the bus will actually get there; that is why I believe I achieved the third objective, too.

Personal Findings

For this project specifically, I learned so much. My skills in Figma grew dramatically, which was great, but I learned more than just technical skills. I approached this with a research mentality that I think really aided my process and made my ability to multitask and focus on the user much stronger. I started thinking more about how users’ mental models would inform them how to use the app and using that and the design thinking process really improved my skills dramatically.

Outside of that, I learned that time management and staying organized are some of the most important parts of any project. That is some of the most valuable feedback I learned throughout this process.