UIUC Bus App

Mocked up in Figma

UI/UX Project - FS24

Individual Project

7 weeks

Students at UIUC frequently struggle with unreliable arrival times, Inaccurate or inconsistent live tracking and needing to switch between multiple apps (Google Maps, UIUC Bus, Illinois app)​



U of I along with the local Urbana-Champaign community boasts one of the top transit systems in the country thanks to the MTD bus system.

The current app that most students use to navigate this system has a outdated user flow, relying heavily on screens full of lists of texts.

Reflection



This was the first UI/UX project I have done. It was also my first time using Figma, which I had a lot of fun with. I love learning new programing and working on this project helped me develop UI and prototyping skills and I had a lot of fun doing it which is what surprised me the most.


I think my favorite part of this project was conducting the research. This project really showed me how much I appreciate the process of researching and learning what's going on with the community and seeing where I can help.

Thank you for your time!

Students don’t need more information — they need accurate, real-time visibility and a simple, visual interface that guarantees they won't miss the bus.

What's the issue?

2 formal user interviews​


Design Process

Design

27 survey responses

informal, informative conversations

Competitive analysis & UI studies


Almost a third of students take the bus everyday to get around campus. That percentage rises during the midwestern winter months with students and local community members reliance on buses increasing.

with that in mind, here are some of the survey results:

Only 15% of students consider their chosen mode of transport (walking, biking, or buses) to be convenient and comfortable. With 39.7% of student falling into the bellow average category.

Only 25.9% of students arrive on time to where they need to be. These delays can be caused by weather, overcrowded buses, and construction.

The solution? create a unified, real-time transit experience that reduces uncertainty and helps students get where they need to be confidently and on time?

Key insights

“I just want to SEE where the bus is and not stress if I’ll miss it.”

this entire app was developed with Figma, from wireframes to the mock ups, here is a screenshot of what my high fidelity prototype looked like behind the scenes. This prototype had 5 of the most popular bus routes and every stop on campus on it.

how does it work?

its simple!


find your nearest stop, pick the bus you want, and your all set!

Research

Integrated Bus ID and student schedule with recommended routes help set this app apart from others on the market.

Demo

Design Process

projects

Why buses?