View Final Prototype →
View Final Prototype
6 Weeks
Timeline
User Researcher, UI Designer, Visual Designer
Role
Overview
Figma, Adobe Illustrator, Maze
Tools Used
Due to an expansion, numerous bus routes were recently added to Ann Arbor's bus transportation system. Many of those routes stop at the same bus stop, Washington & State.
Problem & Project Goals
I was the sole Product Designer for this project, and all research was conducted both remotely and in-person.
Background
View Final Prototype →
View Final Prototype
Figma, Adobe Illustrator, Maze
Tools Used
6 Weeks
Timeline
Product Designer, User Researcher, UI Designer, Visual Designer
Role
Overview
Ann Arbor’s transportation agency is a fictitious business inspired by the real city of Ann Arbor. Ann Arbor But Transit is an app seeking to streamline how our users, the commuters of Ann Arbor, discover their bus routes.
I needed to discover a way to effectively communicate:
- When the next bus will arrive at each stop.
- How much time the commuters have to get to the bus stop.
- The future arrival times of each bus line at each stop.
Discover
I was the sole Product Designer for this project, and all research was conducted both remotely and in-person.
Background
Ann Arbor’s transportation agency is a fictitious business inspired by the real city of Ann Arbor. Ann Arbor But Transit is an app seeking to streamline how our users, the commuters of Ann Arbor, discover their bus routes.
I developed a user research plan to determine clear objectives and identify the potential challenges. My focus was to identify what transit apps bus riders use, understand more about their actions and motivations. To better understand their process and pain points, I also asked them to walk me through their previous bus riding experiences.
Research Approach
Due to an expansion, numerous bus routes were recently added to Ann Arbor's bus transportation system. Many of those routes stop at the same bus stop, Washington & State.
Problem & Project Goals
I needed to discover a way to effectively communicate:
- When the next bus will arrive at each stop.
- How much time the commuters have to get to the bus stop.
- The future arrival times of each bus line at each stop.
THREAT: Allows users to connect with their Google Account.
OPPORTUNITY: Provide more user control by including a bottom navigation bar.
WEAKNESS: Has an overwhelming amount of information: learnability of the app would take time and effort.
STRENGTH: Clear route, pricing and time to destination displayed. Clear delayed notification and has a more information drop down that communicates the reasons for delay. Provides live bus icon on map so that riders know exactly how far the bus is.
COMPETITOR SWOT ANALYSIS
Pain Points
Use of multiple apps to find route, stress about missing the bus, difficulty figuring out which bus is mine at the Washington & State bus stop, frustration when she’s late because of the bus (not her fault)
Needs
- Get to class on time
- Know if bus is delayed
- Be home to take care of siblings
Wants
- Know beforehand which bus she needs to take
- Easily find where the bus is on map
Female | 21 | College Student | Lives in Suburbia | Single | Caregiver
Kari Williams
Persona
Empathy Map
Define
As an EXISTING USER, I want to LOOK UP THE BUS SCHEDULE, so that I KNOW WHAT BUS TO TAKE.
User Story
The actions needed to complete this task:
3. Route to a destination (MEDIUM PRIORITY).
4. Save their favorite bus line (LOW PRIORITY).
- Access to the bus schedules (HIGH PRIORITY).
- Find the nearest bus stop (HIGH PRIORITY).
- Access to the bus schedules (HIGH PRIORITY).
- Find the nearest bus stop (HIGH PRIORITY).
- Route to a destination (MEDIUM PRIORITY).
- Save their favorite bus line (LOW PRIORITY).
User Flow # 1
If the user would like use extra features, they’ll follow the sign-in process.
The first user flow would start the user at the homepage and map. This allows Kari, from our persona, to find their bus schedule without needing to sign in if she is in a hurry. She can then find her preferred bus line and view it’s schedule.
User Flow # 2
This second flow has a similar start, but diverges at the homepage where they search for a destination. They’ll type in their destination on the homepage, then be shown a variety of options. It’s here that they’ll choose their preferred route. If the bus is delayed they’ll be asked if they would like to be re-routed. If not, they’ll be sent back to the homepage where they can find the bus schedules and nearest bus stops.
The app will also include features, such as, giving users the option to be notified when a bus becomes delayed or when it is arriving, allow users to favorite their most used bus lines, and the ability to save frequently visited locations, such as home and work. These features would provide flexibility and efficiency of use for expert users with accounts.
This design gives users access to discover their route in 3 ways:
1. Access to the bus line schedule.
2. Nearest bus stop button & page.
3. A destination search bar.
Solution
View Lo-Fi Prototype →
The results from the user testing helped inform some design adjustments. Users wanted more control and didn’t like the app re-routing them if there was a detour so I removed this feature. I added icons and a route graphics outlining the directions to inform the user where exactly they'll be going. The favorites page was adjusted to include UX copy to communicate what that page is used for. Lastly, users wanted an emergency exit, so I included a go back button.
Based on the competitive analysis, I including a bottom navigation to add more user control. This will help with recognition rather than recall. Making the most important actions visible.
Low Fidelity Prototype
If the user would like use extra features, they’ll follow the sign-in process.
The first user flow would start the user at the homepage and map. This allows Kari, from our persona, to find their bus schedule without needing to sign in if she is in a hurry. She can then find her preferred bus line and view it’s schedule.
User Flow # 1
User Flow # 2
This second flow has a similar start, but diverges at the homepage where they search for a destination. They’ll type in their destination on the homepage, then be shown a variety of options. It’s here that they’ll choose their preferred route. If the bus is delayed they’ll be asked if they would like to be re-routed. If not, they’ll be sent back to the homepage where they can find the bus schedules and nearest bus stops.
The app will also include features, such as, giving users the option to be notified when a bus becomes delayed or when it is arriving, allow users to favorite their most used bus lines, and the ability to save frequently visited locations, such as home and work. These features would provide flexibility and efficiency of use for expert users with accounts.
This design gives users access to discover their route in 3 ways:
1. Access to the bus line schedule.
2. Nearest bus stop button & page.
3. A destination search bar.
Solution
Lo-fi Wireframes | Iteration
View Lo-Fi Prototype
The results from the user testing helped inform some design adjustments. Users wanted more control and didn’t like the app re-routing them if there was a detour so I removed this feature. I added icons and a route graphics outlining the directions to inform the user where exactly they'll be going. The favorites page was adjusted to include UX copy to communicate what that page is used for. Lastly, users wanted an emergency exit, so I included a go back button.
Based on the competitive analysis, I including a bottom navigation to add more user control. This will help with recognition rather than recall. Making the most important actions visible.
Low Fidelity Prototype
The main feeling I wanted to convey through Ann Arbor Bus Transit's branding was trustworthy and life giving. I also drew inspiration from roads, trees, bus route maps, and how the bus routes interconnect with each other.
BRanding & Logo Design
Develop
Important information stands out with an eye catching color, and hierarchy is used throughout the app to clearly communicate information. The bottom navigation helps with the user’s memory load – keeping the most important pages and features in reach. A back button creates an “emergency exit” for the user to go back to their previous page. The take me "HOME” and take me to "WORK" icon buttons and favorites page provides flexibility and efficiency of use for expert users with accounts.
With the application of the Ann Arbor's branding, the user interface starts to take form. The interface is minimal and straightforward, and it provides the information that the user needs in the clearest way possible.
High Fidelity Prototype
Hi-Fi Prototype Iteration
In the in-person usability test, the most significant value add was the behavioral feedback. I was able to see how and specifically where the users struggled with completing the route to destination process.
From the maze usability test I found that users did not notice the "New User?" CTA in the sign-up process, and that users found it difficult to know how to select and start a route in the search process. Great feedback from another user helped me become aware that the icons weren’t familiar enough to know how to use the app.
I conducted two types of usability testing: Remote via Maze and in-person tests. I tested the sign-up for an account process, discovery of the bus line schedule, locating of the nearest bus stop, and the route search process in both of these test.
Usability Testing
Deliver
This research from the usability tests informed the next iteration. I changed a couple of icons, the map/homepage and search bar arrow icon, to better match between system and the real world. To help the users notice the "New User CTA" I made it bolder and underlined it. To help users know where to click to start a route – I included a button “Start Route” in the search destination flow.
Added Start Route Button & Bottom Navigation Map Icon
View Final Prototype →
Lastly, I designed an onboarding flow for users after they sign-up to educate them on how the app can best assist them.
View Final Prototype
- Reassess color palette, to AA Standards, to be more accessible.
- More usability testing – To see if my iterative design is successful.
- Include error message for people who try to sign-in without account.
- Include loading screens – when feedback would help the visibility of system status
Next Steps
PARTICIPANTS: Finding well-suited participants was difficult.
RESEARCH FOCUSED DESIGN: I would get focused on the design application and needed to pull myself back into the research. I balanced my time by time boxing how long I was diving into the user interface design, and zooming back out to the project brief and research.
SCOPE CREEP: I started to implement features that I didn’t have the time for. Next time, I’ll focus on what my MVP is from the beginning.
Challenges
Reflect
PARTICIPANTS:
RESEARCH FOCUSED DESIGN:
SCOPE CREEP:
Bringing patients & caregivers together by making it easier to share treatment information
VIEW HERE →
