ROLE:
UX/UI DESIGNER
TOOLS:
FIGMA, FIGJAM
TIMELINE:
8 WEEKS
PROJECT TYPE:
MOBILE APP REDESIGN
SLO Transit
SLO Transit provides daily bus services throughout San Luis Obispo and Cal Poly, helping riders commute to work, school, and events. However, its current mobile app is inconsistent and difficult to navigate, discouraging use and impacting local sustainability efforts.
We redesigned the SLO Transit app to enhance usability and introduce new features tailored to both first-time and frequent riders.
SLO Transit provides daily bus services throughout San Luis Obispo and Cal Poly, helping riders commute to work, school, and events. However, its current mobile app is inconsistent and difficult to navigate, discouraging use and impacting local sustainability efforts.
We redesigned the SLO Transit app to enhance usability and introduce new features tailored to both first-time and frequent riders.
problem.
The SLO Transit users have voiced many concerns with the service’s mobile application. Riders often have trouble knowing which bus to take to get to their destinations, and frequent users speak about the app’s cluttered and inaccessible interface. Since many people rely on this mode of transportation every day, key information must be clear and accurate.
How might we develop a better, more sustainable solution that decreases rider confusion and increases ridership?
The SLO Transit users have voiced many concerns with the service’s mobile application. Riders often have trouble knowing which bus to take to get to their destinations, and frequent users speak about the app’s cluttered and inaccessible interface. Since many people rely on this mode of transportation every day, key information must be clear and accurate.
How might we develop a better, more sustainable solution that decreases rider confusion and increases ridership?
research.
To understand our target audience and their experience with SLO Transit, we created a customer journey map outlining the steps users take—from boarding to their final interaction with the bus.
We conducted interviews with diverse users, including Cal Poly students and faculty, SLO residents, public workers, and a SLO Transit representative. Common pain points emerged, such as difficulty understanding bus arrival times and selecting the right routes. First-time and infrequent riders also struggled with the app’s lack of guidance.
These insights led us to focus on improving the early stages of the journey—planning and route selection. We translated key findings into "How Might We" statements to guide our ideation process.
To understand our target audience and their experience with SLO Transit, we created a customer journey map outlining the steps users take—from boarding to their final interaction with the bus.
We conducted interviews with diverse users, including Cal Poly students and faculty, SLO residents, public workers, and a SLO Transit representative. Common pain points emerged, such as difficulty understanding bus arrival times and selecting the right routes. First-time and infrequent riders also struggled with the app’s lack of guidance.
These insights led us to focus on improving the early stages of the journey—planning and route selection. We translated key findings into "How Might We" statements to guide our ideation process.
ideation.
After sharing our findings, each team member used insights from our How Might We statements to brainstorm and sketch ideas. We started with written concepts, refined them through sketches, and iterated on each other’s designs. Each of us then created 3-panel storyboards showcasing our best solutions.
To improve SLO Transit’s app architecture, we discussed, critiqued, and voted on key features. Standout solutions included:
A trip overview page with clear iconography and a visual trip timeline
An onboarding feature to guide first-time riders
Photos of bus stops for easier navigation
Finally, we mapped out a user flow, connecting solution sketches in the order a user would experience them. Any gaps were filled with wireframes and illustrations.
After sharing our findings, each team member used insights from our How Might We statements to brainstorm and sketch ideas. We started with written concepts, refined them through sketches, and iterated on each other’s designs. Each of us then created 3-panel storyboards showcasing our best solutions.
To improve SLO Transit’s app architecture, we discussed, critiqued, and voted on key features. Standout solutions included:
A trip overview page with clear iconography and a visual trip timeline
An onboarding feature to guide first-time riders
Photos of bus stops for easier navigation
Finally, we mapped out a user flow, connecting solution sketches in the order a user would experience them. Any gaps were filled with wireframes and illustrations.
prototyping.
After finalizing our user flow, we used Figma to prototype mid-fidelity wireframes, focusing on key features:
Trip planning to help users choose the right bus line and stops.
Trip overview with step-by-step directions for walking to bus stops, boarding, and reaching their destination.
Favorites section on the Home page for saving frequently used routes and lines.
After finalizing our user flow, we used Figma to prototype mid-fidelity wireframes, focusing on key features:
Trip planning to help users choose the right bus line and stops.
Trip overview with step-by-step directions for walking to bus stops, boarding, and reaching their destination.
Favorites section on the Home page for saving frequently used routes and lines.
testing.
Our team conducted 10 usability tests with both inexperienced and frequent SLO Transit users. Testers explored the prototype freely and completed step-by-step tasks in situational scenarios.
Key findings:
Missing pro tips: Users needed guidance on A/B line differences, seasonal schedules, and transit center break times.
Unclear iconography: Favorited lines and bus stops were hard to distinguish due to icon size and design.
Overlooked features: Users missed key functions like trip scheduling and the Safety Tools panel.
We prioritized insights by importance and frequency, then refined our mid-fidelity prototype accordingly.
Our team conducted 10 usability tests with both inexperienced and frequent SLO Transit users. Testers explored the prototype freely and completed step-by-step tasks in situational scenarios.
Key findings:
Missing pro tips: Users needed guidance on A/B line differences, seasonal schedules, and transit center break times.
Unclear iconography: Favorited lines and bus stops were hard to distinguish due to icon size and design.
Overlooked features: Users missed key functions like trip scheduling and the Safety Tools panel.
We prioritized insights by importance and frequency, then refined our mid-fidelity prototype accordingly.
solution.
After user testing and refining the app's style, we built a development-ready prototype showcasing our top solutions. Here’s a breakdown of the redesigned SLO Transit app’s key features:
After user testing and refining the app's style, we built a development-ready prototype showcasing our top solutions. Here’s a breakdown of the redesigned SLO Transit app’s key features:
challenges.
Our work took place over the course of the quarter, with some challenges in coordinating schedules as our team adapted to new work rhythms.
We faced difficulty deciding between using a standard timetable or incorporating live updates and bus tracking, engaging in thoughtful discussions to determine which option would best serve the needs of our users.
Our work took place over the course of the quarter, with some challenges in coordinating schedules as our team adapted to new work rhythms.
We faced difficulty deciding between using a standard timetable or incorporating live updates and bus tracking, engaging in thoughtful discussions to determine which option would best serve the needs of our users.
what's next.
Next steps include collaborating with San Luis Obispo shops and stores to integrate live bus status and arrival time updates, allowing users to receive alerts when their bus is nearby.
With additional time, we would further prioritize accessibility by adding multiple language options and refining our color scheme and icons to ensure they are intuitive and easily understood by all users.
Next steps include collaborating with San Luis Obispo shops and stores to integrate live bus status and arrival time updates, allowing users to receive alerts when their bus is nearby.
With additional time, we would further prioritize accessibility by adding multiple language options and refining our color scheme and icons to ensure they are intuitive and easily understood by all users.
challenges.
Ample’s complete case study was conducted over a span of two academic quarters and we realized really quickly how hard it was to design and prototype this app from scratch.
The scope of this project was very ambitious — we learned we had to scale back our project to focus mainly on the consumer-facing mobile screens over the vendor product.
