What is All Aboard?
All Aboard was created to make it easier to track and arrive at the correct bus stop in a busy metropolitan area. Using GPS, the app is able to correctly determine the time a bus needs to get to a stop and the time it would take for a user to arrive at that specific bus stop.
Roles + Responsibilities
- Sole researcher, Visual Design, Prototyping, User Testing
- Figma, Google Slides, Google Forms, Notion
Audience
- Ages 18-50
- Business travelers + Students
- Gender: All Genders
- Common job titles: Student, Manager
The Problem
Enable bus riders to confidently understand the full system of bus routes and receive real-time updates about their buses and stops.
The Solution
I created a simple bus transportation app that had all of the client’s business requirements. I decided to add a favorites section to the business plan, which makes it easier for the user to locate their most-used bus or bus stop.
Discovery + Research
These findings during the discovery phase drove my user-centered process. I utilized competitor reviews and user surveys and realized that there was an opportunity to create an app that these users needed and add a feature that other competitors weren’t utilizing.
The user survey was sent out to members of a Discord community and through a Slack channel. The survey had 10 participants.
User Survey Testing
Most participants use Map Applications, like Google Maps and Apple Maps, as a way to find out public transportation times.
- 88.9% of participants have missed their bus or train.
- 57.1% of those participants missed it because of incorrect arrival times.
- 55.6% of participants use public transportation for business.
50% of participants often feel frustrated by public transportation/apps.
User Pain Points
Users need to be able to find their bus and bus stop, know when their bus will arrive at the bus stop, and also be able to know how long it will take them to get to their bus stop.
Competitive Analysis
I chose Moovit and CityMapper as my two competitors for the analysis. I really love both of the apps and their ease of use. The main takeaways I found were that Moovit had it all, but lacked the option for a light version. This in turn doesn’t make it accessible for all users. CityMapper, although I loved the contrast of colors, isn’t available everywhere. They also don’t have the capability to have Lyft and Uber rides as Moovit does.
The Information
User Stories
Users need to know when each of the buses arrives at the Washington & State bus stop, how much time they have to get to the bus stop, and ensuring riders can select one of seven bus lines to see a future arrivals list.
User Persona
My research indicated the majority of users were business travelers, with about 40% having children, so Haven represents a working parent that uses public transport as a means to get to work on time.
I chose to do a gender-neutral persona, without much demographic information, as it is important to be as unbiased as possible. When working with personas, designers can get caught up in the demographic information and allow stereotypes and biases to hinder the design process and in turn isolate their users and create a product that is not for everyone.
User Flow
The second step in the process is creating a user flow. These are important in understanding the flow that a user will take through the product and gives a guideline to follow during the iteration process.
In this case, the user finds the arrival of their bus by utilizing the schedule screen. From the schedule screen, the user is able to save a bus or bus stop to their favorites, which then allows for notifications to be sent to their phone. My research indicated that it would be best to have a favorites section, where the user can set a bus stop or bus as a favorite, which would then allow them to receive notifications on when their bus is arriving, as that is one of the main business requirements for the app.
Site Map
The next step in the design process was creating a site map. The site map works together with the user flow and is a simpler version that shows the pages and dynamic data that goes into the website or app. Creating the site map helped me when I began designing the low-fidelity wireframes, as I had something in place to go off of.
Wireframes Sketches
This was the first step in laying out the app design. Hand-drawn sketches were made in a 4-up and in a time constraint to not let the details hinder the thought process. Sketches are incredibly important as this allows the designer to quickly move and change ideas. It would take longer to do this in a digital design tool.
Low Fidelity Wireframes
From the site map, I moved on to Low-Fidelity wireframes. This was my first time working in Figma and working on creating wireframes. My main goal here was to lay out where I wanted all of the data and elements to go.
Low Fidelity Wireframes – Iteration One
After some testing, it was decided to change quite a lot from my original wireframe to this iteration. I added text and buttons to show what the information on the app would look like and moved the search bars to the top of the screen to make it more accessible and easier to understand.
Branding, Logo, + Design
The next step was putting the branding together. I went through a few different logos, one with just text, but landed on this one with the b and o acting as bus windows to showcase what the app is all about. On the original mood board, I had chosen lighter, more muted colors, but realized it was not accessible to all. So I changed the colors to have a more darker hue to help make the branding and app more accessible in that way.
Testing
After creating the high fidelity wireframe, it was time to move on to user testing.
I conducted two interviews over Zoom and Facetime and the interviews were part of the testing for the prototype. Due to COVID and time constraints, it was best to host the testing over Zoom and Facetime. The interviewees were recorded using the prototype and spoke aloud their thoughts as they navigated through.
Zoom Interview One
- This participant joined us on a recorded zoom call and spoke their thoughts aloud as they went through the app.
- There were a few design issues noted, but they enjoyed the favorites section.
Zoom Interview Two
- This participant joined us on a recorded Facetime call and also spoke their thoughts aloud as they went through the app.
- Their favorite part of the app was the large map layout.
Tasks Tested
The tasks that were tested were searching for a bus stop and adding a stop to their favorites. I also tested them on finding the ‘Create An Account’ page.
Attention Areas
Through the user testing, I realized that the logo in the corner of every screen is a bit redundant and I could use that space a bit better.
Logo
- Do not need logo on every screen
- The space can be used better!
Design
- Buttons would be too small for some people to click on
- Not enough gutter space
- Logo and text was cut off
- Not every option had an arrow next to it
Higher Fidelity Wireframes
In this iteration, I moved the logo and welcome message down, made the search bar a bit bigger to help with accessibility, and added arrows to each bus and bus stop.
The Favorites screen and the user being able to choose to add certain buses or stops to their favorites was an extra user story I added to the business requirements. Through the research, I found that the users prefer to get the information they need quickly and after setting a bus or bus stop as their favorite, they could navigate through the app quickly to find the particular bus that they needed.
What I Learned: Design + Usability
One of the most important pieces I learned was that I needed to make sure the gutter length around the screen was between 16-18 ppx. This insures that every user (on any screen) will be able to utilize the app.
Some of the buttons or search boxes on the app were a little small. To create accessibility, we will need to make them a bit bigger for better usability and a better user experience.
Gutter Length
- Logo and Welcome message were cut off in prototype
- 16-18 ppx is needed to increase accessibility and making sure different screens don’t cut off the design
Making Buttons Larger
- Original buttons and search boxes were too small
- Increase accessibility
Placement
- Search bar placement
- Logo and Welcome message
Flow
- Keeping everything uniform helped encourage flow between screens
- Adding hearts to favorite buses/stops helped the user know it was an option
What I Learned: The Conclusion
- The first wireframes were very plain and simple, as I went along in research and interviews, I was able to pinpoint the needs of the user and create beautiful high fidelity wireframes.
- Understanding how system design (user flows) play a huge role in building a strong foundation to build off of for next steps (site maps, mid-fi fidelity prototypes, etc…)
- Iteration is key, you don’t always solve everything first the right time, user testing will surface usability and user flow errors that need to be addressed in higher fidelity designs.
Prototype
Previous post
Eco-llection App
Next post
The Honey POP Website Redesign
Everything is very open with a really clear description of the challenges. It was definitely informative. Your site is very helpful. Many thanks for sharing!