Overview
The client is a transportation agency and they needed a mobile app developed for their commuters. Before the creation of this app, commuters used the website to access route information. The client desired to have an app that shows the existing routes and new routes to commuters and how much time they have before the bus arrives.
Goals for Let's Go
To create a mobile bus app that provides commuters information about existing and new routes.
To provide riders with accurate times of when their bus will arrive.
My Role in the Creation of Let's Go
I was responsible for the entire creation of this project. This includes all of the elements that are presented in this case study.
Discover Phase
Competitive Analysis
Moovit: A transportation app.
Strengths:
The main search field in focus. Times and prices are clear. Once an option is selected, a map shows the user visually the route. Shows step by step directions from current location.
The main search field in focus. Times and prices are clear. Once an option is selected, a map shows the user visually the route. Shows step by step directions from current location.
Weakness:
Suggested routes screen confusing visually because there are only thin gray lines separating the options.
Citymapper: A transportation app
Strengths:
Finding a destination and setting favorite places is simple. Having a navigation map on the main screen is handy.
Finding a destination and setting favorite places is simple. Having a navigation map on the main screen is handy.
Weaknesses:
The search fields are too similar in color to the map. Green icons below are too similar to background. Too many icons at bottom and a more button for additional icons.
Survey Insights
The most important features to a user of a transportation app:
Interview Insights
4 people were interviewed.
Participants want to know how much time they have before the bus arrives, to have the ability to find the best bus route for their desired locations and know how long it will take to get to a particular bus stop.
They also would like to see a bus tracker or real time information, to know when a bus is running late, navigation map and have an in-app way to pay for bus.
User Personas
From the research gathered I developed user personas that provide insight into who the potential Let's Go app users are.
User Empathy Journey Maps
From the user personas and the research gained, I created user empathy journey maps.
Define Phase
User Stories
The user stories presented here were created based on the research I conducted in the discover phase which gave me insight on how the users would navigate the Let's Go bus app.
User Flow
This user flow shows the path a first time registered user would take to navigate to their desired location.
Site Map
Based on the clients needs and the desires of the research participants, this site map reflects a screen for everything specified.
Wireframes
The first version of the wireframes for Let's Go bus app. They reflect the capabilities of what the client wanted: A way to provide commuters information about existing and new routes and to provide riders with accurate times of when their bus will arrive.
These wireframes also have the features the research participants requested: ability to create a profile, find out the typical traffic at the bus stop, a bus tracker, a favorites screen and a way to find out information through the chat. This is all provided easy to locate buttons to navigate the screens.
Wireframes
Low Fidelity Prototype
This prototype reflects iterations that were completed based on feedback from the client and further refining of how the user can complete the desired tasks.These iterations were taken on to further refine the buttons to make them more identifiable to the user. Icons were added to replace words on the buttons to make them more accessible.
Further Iterations
This is further iteration of my low fidelity prototype to show the progression. This is closer to meeting the clients needs and users desires. It is a more developed app at this point and the connections have been made between the buttons and screens. After having much feedback provided to me it was shown the chat button was more visible near the top of the screen and the pay feature was placed in the bottom navigation to make it easy to pay for bus fare on any screen.
Develop Phase
Branding
To gain inspiration and to assist with developing the Let’s Go brand, I created a moodboard. This contains the colors, shapes, a cityscape that I ultimately included when creating the Let's Go bus app. The colors-deep blue/purple and green give a calm and peaceful feeling which can be relayed to the user; the colors promote calmness as they are handling their busy schedule and planning their bus trip.
Typography
The goal when choosing fonts for the Let’s Go bus app was to pick two fonts that are in harmony visually and easily readable. Segoe Print bold is personable and has a handwritten feel, yet is easy to read. The sans serif font Microsoft Tai Le Bold is a good complement, professional and easy to read as well.
Color Palette
From my moodboard, I pulled these colors and tested them for accessibility and contrast. I wanted to counter the stress of finding a bus route and navigating ones busy life with soothing colors. White and black text work well on both of these colors so these were chosen for that purpose.
Logo and Name Development
From the beginning, I thought Let’s Go would be a great name. Initially, I sketched the logos in Illustrator and developed the smaller one using Segoe Print with arrows. I used Microsoft Tai Le for the larger logo design. The goal was to use one of the fonts to develop the logo so there would be a visual connection.
Final Name and Logo Design
Final name and logo design. The logo was created with Segoe Print in bold to match the font for the name. It is arranged to appear as one image with arrows added to show direction. Let’s Go is a transportation app so using arrows to portray movement is effective at communicating what this app is for to the user.
High Fidelity Prototype
First Version
This is the first version of my high fidelity prototype and reflects all of the iterations of my wireframes. In addition, I have incorporated the color palette, typography and other features. I utilized a cityscape of a midwestern city in the background and overlaid with blue/purple and green. This assists in further communicating with the user that this is a transportation app. It also fuses the calm colors with the city background, psychologically communicating to the user that this app will relieve the stress from finding their bus route/stop.
Deliver Phase
Refining of Prototype
This reflects the multiple iterations of my high fidelity prototype as a result of feedback received from external sources, before my usability testing. The fields for the users were transformed into more rectangular shapes so the user can differentiate between the buttons and the fields to type in. The search field was made larger for more room to type. White was added to the icons on the buttons to make them more visible to the user.
Usability Testing
3 people participated in the usability test.
100% were able to easily find the chat, favorites and pay screens.
33% had difficulty understanding the login screen because the text for the username and password fields were already filled in.
33% had difficulty knowing what to do on the main screen when it was time to use the search field.
100% had difficulty accessing the peak rider info and knowing where to find it. It appeared the peak rider info button did not work on some screens.
66% had difficulty working the bus tracker screens and one participant mentioned the buses should have numbers on them so it is clear.
100% were able to reach the navigation screen by selecting a route and then pressing play, but it was mentioned by two participants that they were unsure what the bus eta meant and the arrival eta.
Results and Outcomes
After conducting the usability test, I made changes based on the results to make it more user friendly and accessible:
The search button now says “Where do you want to go?” so it is clear to the user where to put in their desired destination. The input fields for create username and password are no longer populated so the user has to click in that area to populate them, then select submit. All buses on all screens were made larger and more identifiable. They have numbers identifying them as well now. The peak rider info buttons were assessed to make sure they all work.
