Travalot

Transportation App

DELIVERABLES
Discovery and Research
Information Architecture
Brand Development
Prototype 

UX/UI DESIGNER
Wendy Gilbert

TOOLS
Figma
Illustrator
Photoshop 


Overview

I designed a mobile transit app ideal for all commuters. This app allows users to easily select, locate and time their desired bus at a busy station.

Discovery and Research

Problem Statement

The Washington Metropolitan Area Transit has expanded. Due to the increase in bus routes located at the street corners of Washington a State, bus riders need to be able to identify their bus along with the time that it will arrive so that riders can calculate how much time they will have to reach the bus stop.

Who's Travalot?

A public transit app which displays transportation options for all commuters. The app provides real time maps and locations of all modes of transport including bus, metro, ferries and more. Travalot is perfect for anyone looking for the best transportation option in the most easy and convenient way.

Target Audience

Based on the information given to me by the client, and the proto personas I created, I was able to determine the target audience for this app.

• Anyone who does not have their own form of transportation ie. Student   (saving up for their own car)
• Anyone who is environmentally conscious and wants to reduce the amount of carbon footprint
• Anyone who finds that public transportation is the easiest most convenient way to get to work
• Anyone who chooses to take public transportation on a regular basis such as to the store, and family or friend’s house, or to go to a museum for example.

Information Architecture

Competitive Analysis

To find out what does and does not work from the user experience to the overall look and feel of the app, Google Maps and Citymapper were my inspirational apps.

Google Maps

• Vastly used and many people are familiar with this navigation service and you can easily access it on your desktop as well as mobile device.
• You can easily find what you are looking for.
•Google maps not only works in the US but can be accessed in other countries as well.
• While there are not a lot of negatives regarding this service, the ones I did come across were mainly glitches within the software that can be easily fixed.

Citymapper

• Well built user experience and overall ui design based on general reviews and personal tests.
• Works well with directing steps to the destination as well as giving suggestions for boarding and transfers.
• A negative comment that stood out for me was the users not knowing the current capacity of a bus, train or whichever transport service the commuter wishes to use.
• I added in this feature for the bus app, because I know this will greatly help commuters with selecting the bus best suited for them.

User Survey

To gather real data from actual users through surveys, questions that were asked included:

• “Have you used or are currently using any of the following transportation apps?” This helps me understand what people prefer using and why. Google Maps was the most popular.
• “Why do/did you take the bus?” This helps me understand who the users are and why they would take the bus to get to their destination.Takeaways:• Many of the participants use the bus for recreational purposes and they would use Google maps as their go-to app.
• Participants knew how much time they will need to get to the station and how much time they will need to wait at the station.
• Most of the participants commute distance is from 1-10 miles. A lot can happen within that distance, so it is important to be able to stay on top of the commute time.

User Interviews

I then interviewed 3 of the participants to get a better understanding of who they were as a bus commuter. 2 used the bus to get to work and 1 used the bus to get to school. Although their backgrounds are different, they all have the same end goal - to get to their destination on time.

Main takeaway: A lot can happen in 10 miles. Living near the city, 1o miles can mean 45 minutes of commute time if not longer. A lot can happen in those 45 minutes, which is why it is important to be able to stay on top of your time, and know the status of your selected transportation of choice.

Personas

User Interviews

I then interviewed 3 of the participants to get a better understanding of who they were as a bus commuter. 2 used the bus to get to work and 1 used the bus to get to school. Although their backgrounds are different, they all have the same end goal - to get to their destination on time.

Main takeaway: A lot can happen in 10 miles. Living near the city, 1o miles can mean 45 minutes of commute time if not longer. A lot can happen in those 45 minutes, which is why it is important to be able to stay on top of your time, and know the status of your selected transportation of choice.

Biography

Barbara is a natural leader and an avid motivational speaker. She’s always reading news articles and listening to podcasts about what’s going on in the world - from politics to the environment. Staying organized and living the minimalist life helps keep her at ease especially when leading a team of 15 people. She likes to start the day by sharing with the team one positive thing on the white board, whether it’s a quote or event to encourage and set her team’s day. She loves to bake and knowing how her team loves all things sweet, every now and then she finds the time to bring in homemade breakfast pastries to start everyone’s day. Her morning commute on the bus is typically crowded because of rush hour but she does prefer to ride a lighter bus if possible and still get her to work on time. She doesn’t mind making extra time in the mornings as she is an early bird anyways.

Goals

• As the team lead, she’d like to always be the first person to arrive and does not mind being the last person the leave.
• Because she does not drive, she’d like to keep it simple and be able to carry the least amount of things as possible. All projects, readings and other resources are accessible from her notebook or smart phone.
• If she ever runs late, she’d like to be able to relay that information over to the team as early as possible and make sure everyone knows what they need to do until she arrives.

Pain Points

• As the team lead, she’d like to always be the first person to arrive and does not mind being the last person the leave.
• Because she does not drive, she’d like to keep it simple and be able to carry the least amount of things as possible. All projects, readings and other resources are accessible from her notebook or smart phone.
• If she ever runs late, she’d like to be able to relay that information over to the team as early as possible and make sure everyone knows what they need to do until she arrives.

Biography

Ian is a busy student working on his team-based capstone as he prepares for graduation. His team relies on him during group meetings and he cannot risk being tardy during his last few months. He doesn’t like to take public transportation, but he knows he needs it up until he is able to afford his own car. He is always rushing to get ready in the mornings - whether it's gathering his belongings and/or locating his bus at the station.

Goals

• Be able to complete and submit his team-based capstone in time for graduation.
• Start his new job.
• Be able to buy his first car.

Pain Points

• Does not like to rely on public transportation that can risk him being tardy during his last few months of grad school.
• Has a hard time planning out his morning as soon as he leaves his house because he is usually running late for pulling all nighters.
• He’s always having to find his bus as they’re typically lined up with no clear identification unless you’re up close to the bus and the busses usually never waits for later riders.

Journey Maps / User Stories

I then created journey maps for both which talks about their mornings from the moment they open the transport app, to the selection of their bus, to when they jump on the bus and arrive at their destination. The purpose of the journey map was to empathize with the users and find their pain points and challenges. In creating these journey maps, I can story tell what the personas are doing and how they are feeling at the same time. Although there are two different personas and how they approach their mornings, they both have the same end goal - to reach their destination on time using the bus.

Site Map

The site map that I developed which helps represent the structure of the website pages or software screens. This was the final version best suited for the app.

User Flow

I created a user flow for Barbara. The user flow defines a person’s series of steps towards the final action. In this case, a user flow was created to depict from the moment when Barbara locates the bus app on her mobile phone to when she selects the bus she wants to take.

Wireframes

I conceptualized and hand sketched first, then turned them into digital format on Figma. Both versions are detailed enough to where you are still able to identify the components of the app without having to go into high-fidelity versions. I then turned them into clickable prototypes to get a similar experience of using the app.


In my initial wireframe sketches, I included an alert button at the bottom of the homepage but later realized it was an unnecessary use of valuable real estate. I later added a simple alerts icon in the footer of the app where the home page and backwards and forwards arrow are located.

Homescreen wireframe
New Journey wireframe
Previous Journeys Wireframe
Route Details Wireframe

Homescreen wireframe New Journey wireframe Previous Journeys Wireframe Route Details Wireframe

Brand Development

Mood Board

I started out by creating a mood board. I compiled a lot of different pictures, design ideas and color combinations and selected a few from those that were inspiring to me in order to create the branding for my app.

I wanted users to easily navigate through the app comfortably. For accessibility, I chose solid bold colors with high contrast so users who are vision impaired so they can see the app easily. I went with rounded text boxes and cards all throughout along with a very legible font style quicksand as the typeface for the app. The style is very simple and easy to read and directly correlates to the simplicity of the overall use of the app itself.

I decided to design the prototypes before I designed the logo. As a designer, I wanted to get a feel of the app before designing a logo (something that initially grabs a user’s attention usually). I wanted to get the color combinations and flow together first for inspiration.

Prototype

Test the clickable prototype by clicking on the image below.

 

Case study created in 2020

Wendy Gilbert

 

 

Using Format