Role
UX/UI Design
User Research
Information Architecture
Visual Design
Prototyping
User Testing
Scope
Run a design sprint to produce an MVP
Design the user interface for launch
Implement bus tracking feature
Mobile App Design
2020
Mappy App
Summary
Mappy is a mobile bus application that helps bus riders in metropolitan areas know exactly how far away each bus is from a stop, allowing for better planning of commutes by bus.
Overview
My client is the transportation agency for a midsize metropolitan area in the Midwest. The city has a network of public buses. They currently list the expected bus schedule on their website and post it at each bus stop.
However, if you have ever used a public bus, you know that expected bus times are rarely accurate, as things like traffic, the need for longer stops to assist passengers using wheelchairs, or taking a bus out of service for maintenance can impact the schedule.
Scope
-
Complete the user interface for launch
-
Complete branding and style guide for launch
-
Implement features for locating bus stations and arrival times
Constraints
-
Time: Mappy 1.0 had a two week turnaround time for completion
-
Budget: Zero budget was allocated toward user research which meant being resourceful in crafting materials and in participant selection
The Problem
Before the new routes were added, riders could simply rush to the stop when they saw a bus coming—but that doesn't work anymore because it might not be the bus that they're expecting. The city has developed a way to know how far away each bus is from a stop, but they aren't sure how to share that information with riders.
The Solution
Mappy is a mobile bus application that helps bus riders in metropolitan areas know exactly how far away each bus is from a stop, allowing for better planning of commutes by bus.
Mappy tells riders precisely when each bus will arrive at a specific stop as well as shares information on bus routes and stations.
User Research
User Surveys
Data for the target audience was collected through a survey on Google.
Questions such as age, education, marital status, and profession were asked in order to help define our target audience.
Due to budget constraints, Surveyswap was utilized for gathering users to be surveyed.
Audience
After conducting surveys to over 30 bus riders, we gathered and analyzed our data to summarize our findings.
Key Takeaways From Surveys
-
66.7% of bus riders are between the ages of 25 and 35
-
The majority of those surveyed ride 2-3 different buses four or more times per week
-
Of all bus riders surveyed, 40.9% have trouble remembering bus times and, out of these, 63.6% believe that using a digital device/app would help with their bus riding experience
User Interviews
Survey data can tell us the ‘what’ or ‘how’ but they often do not provide context for ‘why’ users feel or behave the way they do. The user interviews gave us greater context into the motivations, frustrations, needs, and goals of our users by allowing them to express themselves at a greater depth than a survey would allow.
Key Takeaways From Interviews
-
Knowing the bus arrival time, the direction the bus is headed, and the number of stops until the final destination ranked among the most important for users
-
The first thing users want to see when they open a bus app is an input form where they can type in their final destination
-
Users would want information organized by the nearest bus stops
The Process
Personas
Through our user research, we defined two main personas that would embody our primary use cases.
Competitive Analysis
A competitive analysis revealed the strengths, weaknesses, similarities, and differences between transit app competitors.
Key Findings
-
Too many features can be confusing for the average user
-
Too much information may disrupt the user flows
-
Mappy has an opportunity for positioning itself as the most user-friendly and efficient bus app
User Stories
We begin by tapping into the psychology of our users by labeling tasks that would be of utmost importance to them when using a bus app.
In order to achieve that, we created a spreadsheet with possible tasks that users could complete within the app and labeling them in terms of importance. This would help guide our design process and keep us focused on the most important tasks.
User Flows
As the design process progresses, things become less abstract and more visual. Through the use of user flows we were able to map these pathways and better visualize our users’ experience.
Journey Mapping
We utilized journey maps to further visualize our users' touchpoints as they interact with the app.
By applying empathy to each of the phases of their experience, we asked ourselves what could be better designed in order to facilitate the overall experience and make the app more engaging.
Branding & Styling
Since users will depend on this app for their day-to-day transportation, we decided to capitalize on the use of warm and inviting colors. The goal was for Mappy to behave like a helpful friend and feel as least intrusive as possible.
Moodboard
Creating a mood board allowed us to collect thoughts, ideas, color schemes, and moods in one place and define a coherent design concept without the risk of losing sight of the bigger picture.
Style Guide
A style guide was created to serve as a visual design foundation and bring cohesion to our UI.
Iterations of Visual Design Direction
User Testing
Once our prototype was designed, we moved into the testing phase. This was an important step as it allowed us to test our design assumptions and catch any usability errors in real-time.
Test One
We conducted usability tests for looking up directions and choosing a bus route. We concluded the following:
-
All route information could live on the map without a full-screen takeover
-
Users prefer to visualize destinations directionally on the map
-
Seeing the map made users want to engage
Test Two
We conducted usability tests for the login flow. We concluded the following:
-
Users were confused between inputs and buttons
-
The Login button was not clear
-
Varying button sizes added mental calories to user decisions
Test Three
We conducted an A/B test on the bus icon. We concluded the following:
-
The bus numbers were of higher importance than the icon itself
-
By highlighting the bus number we were putting user needs first
Conclusion
Outcomes
-
After extensive prototyping and testing we understand our users’ needs, goals, and motivations
-
Achieved a working MVP to help bus riders manage bus times
Lessons
-
There remain areas that could use further testing such as visual design and accessibility
-
User testing is vital at every step of the design process because they test our assumptions
-
Consistency in iconography and elements across the app are important in building trust with the user
Recommendations for Mappy 2.0
-
Conduct an A/B test for a visual design direction that is more aligned with our product’s story
-
Establish intuitive interactions that are validated by user data
-
Incorporate imagery and original icons for personality and brand presence
-
Conduct further research for other possible use cases
