Overview
Let’sGo is a mobile app designed to help Cincinnati residents get from their point A to point B on time and safely. But moreover the app is focused on solving user’s daily problems. As a person who once used public transit daily, I can understand the annoyance that can come with using a service like this. Because of that, Let’sGo is equipped to provide updated information about bus arrival times, display transportation times so that users can plan accordingly and to help users track their routes through stops with multiple lines running through them.
Role:
Sole Researcher/ Designer
Responsibilities:
Discovery and Research, Information Architecture, and Prototyping
Audience:
Users that need to pass through connections that are otherwise confusing to deal with.
Timeline:
4 weeks
Problem
Common issues between users include missed stops, incorrect commute times and confusing lines through stops with up to seven connecting lines through them.
Solution
Let’sGo is the solution to these problems. Wrapped up in an intuitive User Interface, Let’sGo is an app for the people, by the people.
Design Process
This is a diagram that helped me figure out my plan for tackling the bus app. The Design Process figure allowed me to visualize the design process as a whole, leading me to implementing the correct stages at the right time.
Competitive Analysis
I performed a SWOT analysis on two of the biggest competitors in the transportation industry. View the analysis below.
User Surveys
I sent out a 10 question survey on social media. My call to action was answered, as I was now allowed to pursue the extraction of user data.
not only using a bus app, but working for a local transit
I was able to sit down with a few of the users that indicated
they used the bus as a daily commute. One of those users
was a friend of mine, Savannah. Savannah has experience
that I may not have gotten other wise.
company, RTD. They are known for organizing all stops for
buses, light rail trams and trains. She provided specific ideas
User Interviews
User Pain Points
-
Users are often late for their connection.
-
Competitve bus apps don't update well enough when a bus is late or cancelled.
-
Many people find stops with multiple lines running through them confusing.
Summary of Research
After finishing the first round of research, I've found that people are interested in a bus app that can update in real time. Much of the data I found suggested that users would like to interact with familiar stops frequently, and can create saved routes to help themselves get around.
User Persona
Jack Johnson is the user persona. He relies on the bus as a daily rider, and is using the savings from not driving to help get himself through school.
User Flow
Based on the information I recieved from transit users, I created this user flow to identify problem points and to gestate the idea of the user interface for Let'sGO!.
Journey Map
My journey map is an example of how a user experience can turn into a narrative. This journey is focused around my persona, Jack Johnson. He is a student and needs to get to his class on campus from his bus stop around the corner from his house. You can view the steps that he takes below within the table.
Style Guide
This Style Guide sets the design principles for the entire app. From brand personality and typography, color palette and moodboard, and even logos, the style guide has all the information a designer needs to go to work.
Paper Sketches
Paper sketches help the designer begin to ideate and populate the design space. My sketches didn't change a whole lot between first paper sketches to wireframes and onto prototyping. Pictured to the left is the home page, search page, bus line trip description. These four pages are some of the more important to the whole design.
Wireframe Sketching
As you can see, I spent more time on these sketches than I did on the initial paper sketches. I was able to sketch every screen in enough detail that all I really had to do in Figma was recreate my sketches. Even after revisiting these sketches after finishing my capstone, these are the best sketches I've ever done. I'm so proud of how these turned out and the sheer amount of thought that went into them. I hope to carry this energy into every project I do going forward.
Low-Fidelity Prototype
The low-fidelity prototype is usually a monochrome-gray early iteration of the finished product. You should definitely be able to look at the low-fidelity and high-fidelity and see the similarities. I went a little too into detail when I was first wireframing, so my first draft of the prototype is pretty detailed. Here's a link, what do you think?
Pre-Test Iteration
No Drop Shadows!
I didn't have much for pre-test changes, but one thing for sure was drop shadows. I was having a conversation with my mentor and he thought that drop shadows can age a product, and can make it look dated and just not up to current design standards. I heeded his advice and got rid of the drop shadows on the buttons.
Usability Testing
Goal: How easily can you navigate to your destination page?
Two of the three participants were able to navigate quickly using the search bar and following the basic user flow I had imagined to find the destination page. However, the third user mistakenly pressed a button and had to use a back arrow- which allowed me to see that my click boxes on the back arrows were far too small.
Goal: Where can you find the Bus Stop page where each stop’s next line is shown?
With my participants searching through pages and through the hamburger menu, they were unable to find the Bus Stop Page. The only link that leads to said page is on the homescreen, where a bus icon is located.
I will need to label the button or create a separate link in the hamburger menu.
Accessibility
When checking for viability when it comes to visual accessibility, I found that whenever I used colors- I needed to also use icons. This is something I picked up from Google- they're extremely good at using both color and icons to identify buttons and clickable items. These are the results for all types of color blindness. Starting on the top left it's unaffected, tritanomaly, deuteranomaly, protanomaly- and moving to the bottom left is achromatopsia, protanopia, tritanopia, and deuteranopia. The app is still visibile in each of these simulated examples.
Takeaways
I learned a lot from my first app, how to use a new software (in Figma) as well as how to cater to user needs. I had a fantastic time learning about the needs of my users, and I've found a new love for user research. I'm learning more about design with every day. I will take this project as a lesson, and I'll continue to build on the lessons I've recieved thus far. Wether it be the size of click boxes, or type faces, or color pallettes, there is always something to learn from and take away from your user's experience.
​
If I were to start this project tomorrow with the knowledge that I have now, I would worry less about options. I focused so much on what else the user could do with my app, that I didn't spend enough time on what the user expressed as their main feedback.