BACK
A user-first mobile app that redefines how University of Michigan students navigate campus using the public transit system. Currently at 2k+ downloads.
Role & Client
UX/UI Designer
Duration
January – Present
Tools
Figma
Flutter
GitHub
Skills
UI Design
Graphic Design
Usability Testing
OVERVIEW
Background
MaizeBus was created to update the current means of bus navigation on campus; made for students, by students, the app is dedicated to designing and implementing features that make travel frictionless and reliable.
Challenge
New University of Michigan students often struggle with familiarizing themselves with public transportation, especially on a campus as large as Ann Arbor. Common pain points include difficulty with navigation, inaccurate bus tracking, and frequently missed buses. On top of the novelty of college and students' busy everyday lives, travel between classes and events should be effortless and convenient — not stressful.
Opportunity
To tackle these difficulties, MaizeBus' utility emphasizes four main features: transparent, real-time bus tracking for both university and city buses, push notifications for arriving buses, input-based navigation directions, and customizable pages. As one of two UX/UI designers, I'm currently designing new Live View navigation screens to support user perspective and ease of directions.
Process
Project Process
The MaizeBus team meets 3 times a week, encompassing a design meeting, general meeting, and extended work session.
Design meetings use takeaways from general meetings to drive discussions around the optimization of the user experience, the consistency of design standards, and carefully preparing innovative features that are unseen across any other application.
UX/UI, frontend, and backend teams work together to set goals, conduct user research, synthesis, brainstorming, wireframe, and prototype together.
Research
User Research
Usability tests during on-campus tabling sessions have informed three major takeaways in the current and upcoming interfaces:
Many users are unfamiliar with the UofM bus system and abbreviations of specific buses
Navigation gestures are often not intuitive upon first glance.
Users like having alternative ways to enter certain flows.
Synthesis
These insights helped us develop design iterations focused on learnability and flexibility of user control, such as expanding bus names, adding guiding text overlays, and increasing visibility of gesture affordances. Updates to our usability testing guide were also made accordingly to heavily account for the broader UofM population, spanning several grades of students and varying ranges of familiarity with public transportation.
Ideating
Ideation
Ideating and prototyping encompassed an abundance of brainstorming, feedback, and iterating to ensure streamlined usability and consistent stylization.
Final Designs
Final Designs
The following final screens will be launched within MaizeBus v.3.0.
Reflections
Don't always trust the knowledgeable. Test real users.
Previously, our weekly meetings heavily informed the direction and consideration of designs. After conducting usability and A/B testing around campus, I obtained valuable insights as to what actions and behaviors my designs intuitively engaged, as well as challenged. Working so closely within my team created an unforeseen bias when evaluating my designs because they were already high familiarized with not only the bus system but also my navigation interfaces. Asking users about what they assumed when facing specific user flows and screens helped me better understand how they would naturally proceed in an unmonitored and low-stakes setting.
Further Explorations
For my iterations, I've begun taking greater consideration of the user's level of proficiency while using the app. Whether it's about their knowledge of the bus names or how seamlessly they can operate the interfaces of a navigation app, I aim to design such that these new features are easily learnable without complex, explicit directions and therein increasingly intuitive as their usage continues.
