Projects

About

Redesign the Illini Bus App

Designing a Story-Driven Website: Combining Narrative and Strategy to Create a User-Friendly Bus App Experience

With user-centered approach, the goals was to create an intuitive interface for effortless financial management while incorporating gamification.

Understand the users behind the journey to design with clarity, empathy, and intent

My Role

UX Designer and Researcher

Duration

8 Weeks

Tools

Figma, Photoshop, Illustrator

Challenge

The existing Illini Bus app and website faced usability and discoverability issues that hindered user engagement. Navigation was confusing, and key information was difficult to find due to a disorganized structure. Limited SEO visibility reduced reach, while the app’s cluttered interface and lack of personalization made onboarding and regular use frustrating for new and returning users.

Results

The redesigned Illini Bus app successfully integrated Google Maps' user-friendly interface and real-time tracking features, providing users with clear, efficient navigation and up-to-date bus information. The simplified, intuitive design was well-received by users, improving overall satisfaction and ease of use, while reducing confusion for both regular and first-time users of the bus system.

Reimagine the transit experience by understanding rider needs and designing a system that feels intuitive, accessible, and seamless.

Why It Matters

A reliable transit app directly impacts student mobility, satisfaction, and campus operations. Improving navigation clarity and real-time accuracy allows users to confidently plan their trips while strengthening trust in the transit system overall. A streamlined, intuitive design increases usage, reduces frustration, and positions the app as a dependable resource rather than a last-resort tool.

Build an intuitive, SEO-optimized website that educates and converts users.

Through a structured design process, spanning research, strategy, and testing, I developed a user-centered website that improved clarity, usability, and SEO visibility.

Goals

• Create an intuitive app that makes it easy to find routes, stops, and real-time bus updates.

• Simplify navigation and information hierarchy to find key features in fewer steps.

• Improve visual clarity, contrast, and accessibility to support usability across varying conditions.

Impact

• Students found it easier to identify active routes and understand real-time updates

• Clearer hierarchy and consistent icons increased trust in the app’s tracking

• Streamlined navigation reduced confusion and improved task completion speed.

UX Process Journey

Through a structured design process, spanning research, strategy, and testing, I developed a user-centered website that improved clarity, usability, and SEO visibility.

Research

Conducted User Interviews, Competitive Research, User Personas, and Pain Points

Strategy

Went into How Might We Questions and Product Goals

Design

Designed User Flows and Wireframes in Figma

Prototype

Created Mid-Fidelity, Mockups, and High Fidelity Prototypes

One Side / Numbers

Open variant

One Side / Numbers

Open variant

Change this to competitive analysis headline

User Persona headline

Pain Points headline

How might we headline

How might we provide personalized routes to fit the user schedule?

How might we design a user-friendly interface that would allow for efficient navigation?

How might we simplify navigation for those that are unfamiliar with the bus stops?

How might we reduce the amount of steps needed to find necessary information?

How might we allow users to pin their favorite stops and places?

User Flow headline

Wireframe headline

Mockup headline

Mockup headline

Prototype Headline

Bringing the vision to life through usability, storytelling, and structure.

The final redesign produced a clearer, more intuitive bus app experience that enabled students to navigate routes and understand real-time updates with greater confidence. Using a user-centered, iterative process, the project addressed key pain points in navigation, visual hierarchy, and trust in live data. Design decisions such as route color-coding, simplified tab navigation, and dynamic status indicators improved efficiency while maintaining a student-friendly visual system. Peer usability testing strengthened the solution, though limitations around notifications and dense map overlays revealed opportunities for future improvement. Overall, this project reinforced the importance of clarity and feedback in real-time interfaces, resulting in a high-fidelity, developer-ready prototype. Future work includes analytics integration, A/B testing, and push notifications to further optimize usability and commuter engagement.