The Problem
The Problem
Embedded Files
Initially, we wanted to create a user-friendly app for University of Michigan students that offers precise details on M-Bus routes and schedules.
There are already existing apps that claim to accomplish this, but their flaws lead to unnecessary stress as users struggle to navigate the apps along with the bus system.
After research and engagement with our users through interviews and usability tests, we formulated the design problem statement stating:
How might we alleviate UMich students’ transportation stress by …
How might we alleviate UMich students’ transportation stress by …
- Improving their connection to the existing bus system through integration of class schedules?
- Providing opportunities to give feedback in order to optimize daily commutes?
- Providing access to accurate bus information in order to reduce wait times and improve punctuality?
Process Overview
Process Overview
Data Collection & Analysis
Data Collection & Analysis
We employed a wide range of data collection and analysis methods, from interviews to personas to affinity mapping, in order to reach total understanding of our problem.
We employed a wide range of data collection and analysis methods, from interviews to personas to affinity mapping, in order to reach total understanding of our problem.
Interviews
Interviews
In order to gather background and context on the issue at hand, we conducted a series of user interviews.
Who?
Who?
Six current or recent University of Michigan students.
How?
How?
Interviews conducted both in-person and remotely.
What?
What?
We asked questions about: participants experiences with the MBus system (habits, likes/dislikes, frustrations, suggestions) and the transportation apps they typically use.
Interview Analysis
Interview Analysis
One of the techniques we used while analyzing our interview data was creating an Affinity Map.
Each person summarized the most important insights from the interviews they'd conducted using digital sticky notes. Then, we grouped the sticky notes according to common themes or motifs.
Themes
Themes
Bus Delays & Unreliability
Bus Delays & Unreliability
Interviewees expressed frustration with consistent MBus system delays and overall unreliability.
Overcrowding on buses, especially during peak hours, contributes to uncomfortable experiences:
Can lead to buses skipping stops, forcing users to walk to their destinations (and often arrive late).
Users recounted stories of being pushed onto crowded buses, where physical discomfort—like sweating and being jostled—worsens their overall dissatisfaction with the system.
Lack of Current Information
Lack of Current Information
Users in Ann Arbor face significant challenges due to insufficient information regarding bus delays, particularly amid ongoing construction on the University of Michigan campus, which heavily impacts bus routes.
Neither the MBus app nor Google Maps provide adequate updates about detours or route changes.
This common issue leaves many unaware of important changes, resulting in confusion and missed buses.
No Way to Communicate Grievances
No Way to Communicate Grievances
5/6 interviewees wanted a way to submit feedback about their frustrations
Currently, the Mbus app does not support any kind of communication network between the user and those behind the screen– the app’s developers or the bus employees.
One interviewee, DA, wished that there was a way to deliver feedback indirectly to bus drivers:
“I remember in the moment wishing there was a clearer way to, like, report an incident like that…in a way that's not like, I don't want this lady to get fired, but it would be cool if I could ask them to talk to her about…treating people that way. Since, I mean, who knows what kind of day she had, but it can be good to bring their awareness back.”
Needs Assessment
Needs Assessment
From our initial interviews, we learned that our users needed:
From our initial interviews, we learned that our users needed:
Usability independent of experience level
Usability independent of experience level
Our app needs to be usable by both those familiar with and unfamiliar with the university bus system.
Accurate and current bus system information
Accurate and current bus system information
Precise Bus Tracking
Notifications about Delays
Bus Capacity Information
Ability to communicate meaningful feedback
Ability to communicate meaningful feedback
A way to communicate feedback about the experience of taking the bus.
Personas
Personas
Our "two" personas are actually just different variants of the same one persona: a student that takes the bus to get to class.
We used what we found in our initial interviews to inform our personas' behaviors, motivations, and frustrations.
Here is how we connected our persona's needs to actionable tasks:
Here is how we connected our persona's needs to actionable tasks:
Information Architecture & Navigation
Information Architecture & Navigation
Now we needed to make sure that the Needs-informed Tasks we discovered during interviews could be implemented in the information architecture of our app.
Now we needed to make sure that the Needs-informed Tasks we discovered during interviews could be implemented in the information architecture of our app.
Sitemap
Sitemap
Since our app is designed for novices who don't have much prior knowledge about the campus bus system, it was imperative that the navigation of our app be intuitive. We also wanted to make sure to incorporate our tasks: real-time bus information, class schedule import capabilities, tutorial & bus route info, and feedback.
Since our app is designed for novices who don't have much prior knowledge about the campus bus system, it was imperative that the navigation of our app be intuitive. We also wanted to make sure to incorporate our tasks: real-time bus information, class schedule import capabilities, tutorial & bus route info, and feedback.
Overview
Overview
The Routes section is where users will spend most of their time.
Purpose: enable users to effectively navigate the campus bus system.
Rationale: By applying information architecture principles, we identified that users would most likely engage with the Bus Route/Map feature, necessitating detailed attention for our sketches and brainstorming.
Preliminary Routes Page
Preliminary Routes Page
Here is where we would incorporate real-time bus information for efficient navigation.
Here is where we would incorporate real-time bus information for efficient navigation.
Features like live maps and route details are essential for planning commutes and ensuring punctuality.
Our interviewees' navigation apps of choice were: Google or Apple Maps, M-Bus, or Magic Bus.
Our interviewees' navigation apps of choice were: Google or Apple Maps, M-Bus, or Magic Bus.
Although our app is designed to be an improvement, we did borrow some helpful features for U-Move such as 'Reasons for Delay' (Google/Apple Maps) and 'List of Routes' (M-Bus/Magic Bus).
A stand-out feature of our app is the option to import a user's class schedules.
A stand-out feature of our app is the option to import a user's class schedules.
Based on the data retrieved from Wolverine Access, it can create optimal routes for the user.
The Tutorial Page is the very first section that users interact with upon opening the app.
The Tutorial Page is the very first section that users interact with upon opening the app.
Purpose: guide the user through the different sections in order to prevent confusion.
Rationale: several interviewees expressed uncertainty when it came to navigating other transport apps. We wanted users to feel secure in their actions, empowering them to accomplish their goals.
The Feedback Page is a way that UMove stands out from other transportation apps.
The Feedback Page is a way that UMove stands out from other transportation apps.
Purpose: provide users with a means to constructively communicate issues such as bus cleanliness or driver experience.
Rationale: Based on our interview data, most users had a strong desire to communicate feedback in a meaningful way.
0/4 transport apps mentioned in interviews do not offer a means to grade bus cleanliness or driver experience.
An Account Page is a common transportation app feature.
An Account Page is a common transportation app feature.
Purpose: to set up the user's preferences for notifications or recommended routes/places.
Rationale: In order to tailor the UMove app to fit our users' unique needs, an account page was necessary.
Interactive Wireframes
Interactive Wireframes
When it came time to create Wireframes, we decided to use Figma because one of our members had prior experience with it while the other 3/4 of our group was unfamiliar with both Axure and Figma.
When it came time to create Wireframes, we decided to use Figma because one of our members had prior experience with it while the other 3/4 of our group was unfamiliar with both Axure and Figma.
We divided up work based on percieved workload using our sitemap as a guide. We created the initial wireframes individually (with the exception of Erin & Gen, who worked together on Routes section planning) and then from there, helped each other out where needed.
Medium Fidelity Page Design
Medium Fidelity Page Design
We conducted a heuristic evaluation to assess our design against established usability principles (Moran & Gordon, 2023).
We conducted a heuristic evaluation to assess our design against established usability principles (Moran & Gordon, 2023).
This process involved evaluating the interface based on the recognized usability heuristics to see any potential usability issues early in the design process.
Our objectives were to create a minimalistic interface, in alignment with Nielsen's Aesthetic & Minimalistic Design heuristic (Nielsen, 2024), that avoids clutter, ensuring ease of navigation on both desktop and mobile platforms.
We wanted to incorporate accessibility, aesthetic usability, and consistency into our design (Lidwell et al., 2003).
Results of Heuristic Evaluation
Results of Heuristic Evaluation
Integrating class schedules enables personalized and streamlined access to relevant information, reducing cognitive load and enhancing user satisfaction. (Rikwar, 2024)
Purpose of app-to-app similarity is to get the users familiar with the app while looking for different features those two apps do not offer. This allowed us to follow Nielsen's second law, "Match Between the System and the Real World" (Nielsen, 2024).
We designed our Set Home pages to resemble the User Interfaces found in Google and Apple maps. We want to give the users a sense of familiarity of the app before we start introducing our unique features to them, following Jakob's Law (Nielsen).
This approach aligns with information architecture principles, which emphasize organizing content to support user goals and context, thereby improving the overall user experience (Philips, 2023).
Practicing the evaluations was a start for some of us to develop strong UX instincts. (Nielsen)
Mid-Fi Wireframe Click Thru
Mid-Fi Wireframe Click Thru
User Flow Diagrams
User Flow Diagrams
We split our user flows into 5 main parts:
We split our user flows into 5 main parts:
- Tutorial
- Saved Routes (later: Class Schedule & Live Maps)
- List of Routes (later: All Routes)
- Feedback
- Account
1.Tutorial User Flow Diagram
The Tutorial User Flow consists of guidelines for the user that explain all of UMove's features that show up in a pop-up window. The user is prompted to move forward through the selection of features by clicking the "Next" button at the bottom of the window.
Once the user has completed every step of the Tutorial, the button's text changes from "Next" to "Finish", and from there, the user is taken to the Home page, which initially was the Saved Routes page.
2. Saved Routes User Flow Diagram
The Saved Routes User Flow takes the user through the steps required to set up their Home and import their classes. From there, they can explore different routes and start receiving corresponding directions.
3. All Routes User Flow Diagram
The List of Routes User Flow starts on a page consisting of map and a list of each university bus route, accessible by scrolling up.
Upon clicking a route, it will appear on the map, including a live tracker of the current buses running. The user can select more than one at a time if they wish to compare routes.
If they would like to learn more about a route, they can click the small (i) next to the route name and it will take them to a pop-up window containing information about that route's schedule, a full map, a quick summary, and a rating based on previous user reviews.
4. Feedback User Flow Diagram
The Feedback User Flow starts by providing the user with three feedback categories: Cleanliness, Driver, or Timing. By clicking on the button associated with the corresponding category, the user is taken to a page where they can rate that aspect of their trip out of 5 stars with an option to leave a more detailed note.
Upon hitting the "Submit" button, the user is taken to a Thank You page, and from there can return to the Feedback home to leave another kind of feedback if they so desire.
5. Account User Flow Diagram
The Account User Flow home screen has two options: Edit Personal Info or Edit Notifications. Clicking either one takes the user to the associated screen for that option. The Personal Info screen contains information such as name or contact information. The Notification screen has several options that can be toggled ON or OFF.
Usability Tests
Usability Tests
Now we needed to make sure that the Needs-informed Tasks we discovered during interviews could be implemented in the information architecture of our app.
Now we needed to make sure that the Needs-informed Tasks we discovered during interviews could be implemented in the information architecture of our app.
Usability Test Preparation
Usability Test Preparation
Research Protocol
Research Protocol
We made sure our interaction with participants mimicked a 1-1 conversation. We recognized that while interactions are lined out, we would have to deviate from the script if problems or questions arise. We conducted all usability tests on Zoom.
Usability Test Script
Usability Test Script
Our Usability Test Script was designed to test our main flows (Tutorial, both Routes sections, and Feedback) to see if major components were functional. We included questions that asked how the users felt about specific features and if they would change anything.
Recruiting Participants
Recruiting Participants
We recruited our participants by sending out flyers on Slack, Discord, and Reddit to find participants who actively use the UMich buses! We also had physical flyers around the CCCB.
How did it go?
How did it go?
Usability Test Results
Usability Test Results
Recommendations
Recommendations
From our usability testing, we gleaned several helpful recommendations on how to improve our application.
Tutorial Page: More In-Depth Tutorial
Tutorial Page: More In-Depth Tutorial
Some of the participants such as P1 didn’t know the tutorial ended.
We needed to add a screen to inform the users they successfully completed the tutorial.
Simplify Route Setup Interaction
Simplify Route Setup Interaction
Overall, we need to fix the prototype to improve the flow to increase clarity for the next testing by:
Highlighting the route icons/names.
Enhancing route visualization and mapping.
Clarifying function of “Favorite Routes”.
Fix Bursley-Baits glitch if possible .
Iterate Map Format and Layout to Be More Unique
Iterate Map Format and Layout to Be More Unique
Clearly Articulate the App’s Unique Value Proposition for the Users.
Move away from a design similar to Google.
Improve Feedback System Usability
Improve Feedback System Usability
There was confusion on why cleanliness was a heart so we decided to change Cleanliness icon as P5 pointed out.
P5 wanted to give feedback for passengers in the bus.
Ensure All Buttons Work as Intended
Ensure All Buttons Work as Intended
Feedback: Driver Feedback doesn’t work.
Tutorial: Next button.
Additional Considerations (not yet mentioned)
Additional Considerations (not yet mentioned)
Improve Visual Hierarchy and UI Clarity
Account page: P5 requested Lost and Found Feature
Improve Notification Settings Clarity: provide descriptions of each type of notification so users can understand what information they will receive.
Design Iteration
Design Iteration
Based on the results of our usability testing, we made the following changes:
Based on the results of our usability testing, we made the following changes:
Clarified Navigation Between Route Planning Sections
Clarified Navigation Between Route Planning Sections
Before
Before
Complex Routes Page: Users found the combined "Listed Routes" and "Class/Favorited" sections unintuitive.
Unclear Map Icons: Side buttons and icons on the map lacked clarity, causing user frustration (Sharp et. al, 2019).
After
After
Enhanced Navigation: Separated the single routes section into three distinct parts for improved clarity.
Reduced Confusion: Removed side map icons and limited navigation to bottom navigation bar only. (Rikwar, 2024).
Changes to Sitemap & User Flow
Changes to Sitemap & User Flow
Preliminary Sitemap / Final Sitemap
Preliminary Sitemap / Final Sitemap
A common problem during usability testing was confusion about the two Routes sections-- "Saved Routes" and "List of Routes".
A common problem during usability testing was confusion about the two Routes sections-- "Saved Routes" and "List of Routes".
Users didn't understand how they were connected or how to navigate between them.
After usability testing, we simplified the Routes section by dividing it into three sections:
After usability testing, we simplified the Routes section by dividing it into three sections:
"Saved Routes" became
My Classes
Live Map
"List of Routes" became
All Routes
The purpose of the reorganization is to enhance user navigation and efficiency.
We also renamed the sections in order to reduce confusion. We didn't want to have names that were too similar or vague (Csontos, 2019).
Revised Routes Page
Revised Routes Page
Revised User Flow
Revised User Flow
On the My Classes page, students can select "Import Class Schedule", which will make a pop-up appear that asks for permission to import the user's class schedule from Wolverine Access.
After selecting "Import Calendar", the user's schedule is automatically imported and used in order to create a list of routes sorted by the relevant day of the week. The user can scroll through the days of the week, and if they select "view", they will be taken to a more detailed view of that specific route that includes editable fields for their starting point and destination(s). If they were to choose one of the routes, they would be taken to the "Live Map" page.
The Live Map page would show their route step by step, including any relevant information about detours or delays. They could also view the same overview as from before by scrolling up.
Removed 'Set Home' Feature
Removed 'Set Home' Feature
Before
Before
Unnecessary 'Set Home' Feature: Presetting a home location was deemed unnecessary.
After
After
Removed 'Set Home': Eliminated the 'Set Home' feature, expanding the calendar functionality.
Made Class Schedule UI More Familiar
Made Class Schedule UI More Familiar
Before
Before
Confusing Layout: Class Schedule navigation wasn't immediately obvious for our usability test participants; too much information in small area.
After
After
Adopted Familiar UI Patterns: Incorporated user interface elements similar to those in Atlas to increase intuitiveness.
Simplifying navigation and employing familiar design patterns enhance user experience by reducing cognitive load and improving usability (Rikwar, 2024).
Users often overlook non-essential icons, so streamlining these elements aligns with best practices in user interface design.
We also:
We also:
✔️ Added a "Tutorial Completed" notification
✔️ Changed cleanliness icon from a heart to a smiley face
✔️ Fixed Bursley-Baits glitch. The screen no longer flashes when this route is selected
✔️ Removed "Favorite Routes" function to enhance the Import Schedule function
Visual Design (color, imagery, consistency, typography, etc.)
Visual Design (color, imagery, consistency, typography, etc.)
In order to make our app visually cohesive, we established a series of stylistic and formatting rules in our Style Guide.
In order to make our app visually cohesive, we established a series of stylistic and formatting rules in our Style Guide.
Color
Color
Our design system incorporates the University of Michigan's school colors, maize and blue, to ensure brand consistency.
To enhance readability and align with industry standards in transportation applications, we've added neutral grays and blacks, creating a cohesive and accessible user interface.
Additionally, each bus route is color-coded to match existing transportation apps, aiding students familiar with the school's system in quickly associating routes.
Typography
Typography
Implementing a well-structured typography system in Figma enhances readability and establishes a clear visual hierarchy, guiding users through content effectively. We went with Lato for our typeface since it is easy for users to read.
Content Color Block Styles
Content Color Block Styles
Combining our color and type systems to understand what combinations of background and text will work best for legibility.
Buttons
Buttons
Our use of components and buttons streamlines the design process by enabling the creation of reusable elements, such as buttons with multiple states (default, hover, active, disabled), ensuring consistency across the app.
Grids
Grids
Utilizing mobile grids in Figma enables us to create responsive layouts that adapt seamlessly across various screen sizes, ensuring consistent alignment and spacing of elements.
Our approach enhances the user experience by maintaining visual harmony and usability on mobile devices.
High Fidelity Prototype
High Fidelity Prototype
Demo Videos
Demo Videos
Tutorial
Tutorial
My Classes (Import Schedule)
My Classes (Import Schedule)
All Routes
All Routes
Feedback
Feedback
Conclusion / Final Thoughts
Conclusion / Final Thoughts
Our challenge was to design a transportation application that enabled University of Michigan students, staff, and other affiliates to get to their campus destinations with minimal stress. Through user interviews, tests, and design iterations, we were able to refine our ideas and create an experience that is intuitive for even the most beginner bus user.
Our challenge was to design a transportation application that enabled University of Michigan students, staff, and other affiliates to get to their campus destinations with minimal stress. Through user interviews, tests, and design iterations, we were able to refine our ideas and create an experience that is intuitive for even the most beginner bus user.
Although we won’t be developing this app further than the prototype stage, we have made a lot of progress since September. UMove has gone from an idea to semi-functional in the span of a few months!
Although we won’t be developing this app further than the prototype stage, we have made a lot of progress since September. UMove has gone from an idea to semi-functional in the span of a few months!
Here are a few more considerations about our app from beyond the scope of this project.
Here are a few more considerations about our app from beyond the scope of this project.
Considerations
Considerations
Limitations / AKA: what we did NOT Implement
Unfortunately, we could not:
Include a hover aspect to our navigation system
Reason: It was super glitchy within Figma, and it messed with almost all of our frames when implemented
Include all routes for the selection route dropdown
Reason: Figma difficulties
Include all routes available in Ann Arbor (UMich Buses & City Buses)
Reason: Time constraints
Priority was Central and North Campus
Positive:
Positive:
Our application will mean that it is more accessible for students to navigate the bus system on the University of Michigan campus.
This may decrease pollution and traffic because commuters would be more likely to take the bus with an easy to understand application
Impact
Impact
Negative:
Negative:
People could abuse the feedback system. Users could potentially give harsh or unnecessary feedback to drivers, impacting the overall score of the bus route.
This could make drivers upset, especially if they get harsh criticism that is not warranted.
Final thoughts...
Final thoughts...
We learned a lot about the general workflow of a user experience-centric project such as this one, especially when it comes to collecting user input and adjusting based on that feedback.
We learned a lot about the general workflow of a user experience-centric project such as this one, especially when it comes to collecting user input and adjusting based on that feedback.
We also gained much experience working with other people, troubleshooting when necessary in order to communicate as effectively as possible.
We also gained much experience working with other people, troubleshooting when necessary in order to communicate as effectively as possible.
We all look forward to further progression of our academic careers, we are so excited to keep pushing forward, learning as much as we can in preparation for our future work in user experience design.
We all look forward to further progression of our academic careers, we are so excited to keep pushing forward, learning as much as we can in preparation for our future work in user experience design.
Thank you for taking the time to read about UMove! We sincerely appreciate it.
Thank you for taking the time to read about UMove! We sincerely appreciate it.
Contributions
Contributions
Team 6
Team 6
Erin
Erin
Managed All Routes user flow and design. Worked with Gen to design user flow for Live Map section. Spearheaded management of assignments and ensured each team member was accountable for their assigned roles. Workshopped colors for style guide. Assisted with Figma usability, organized tasks and workload, completed and presented* Problem Statement, Solution Overview sections of Final presentation slides. Contributed to user flow organization, information architecture, interviews, usability testing, & personas. Created theme, managed style cohesion, and edited Case Study website.
Gennifer
Gennifer
Worked with Erin to specify the “Routes” and “Live map” sections of the UMove App. Created the style guide for typography and grid systems. Designed the import class schedule, bus options, and live map. Contributed to user flow organization, information architecture, interviews, usability testing, & personas. Collaborated with Erin & Isaac to refine the Problem Statement and develop the Design Evolution segment of the presentation slides. Designed the format of the slides and ensured the entire presentation was cohesive. Coordinated with the team to ensure all of our assignments were completed timely.
Bella
Bella
Designed the Tutorial section of the prototype along with the Feedback section. Helped with Figma usability, set up Zoom appointments, and assisted with Account page. Completed the Final Design presentation slides along with the Impact slides. Conducted usability tests, and assisted with all homework assignments.
Isaac
Isaac
Worked on the Account, worked on the buttons for the Feedback and Account page, including the"Select options" feature. Presented the findings to the stakeholders and class. Contributed to HMW, user flow organization, information architecture, interviews, usability testing, & personas. Ensured all assignments were submitted on time and helped other team members during the design process.
Sources
Sources
Philips, M. (2023, May 11). A guide to information architecture. Medium. https://blog.prototypr.io/the-comprehensive-guide-to-information-architecture-29b09695fbcb
Moran, K., & Gordon, K. (2023, June 25). Heuristic evaluations: How to conduct. Nielsen Norman Group. https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal principles of design. https://arc345ergofactors.files.wordpress.com/2016/03/william-lidwell-kritina-holden-jill-butler-universal-principles-of-design-rockport-publishers-2003.pdf
Csontos, A.-Z. (2019, May 20). User attention: 10 psychological facts to help you design better UX. UI/UX design and research agency. https://www.uxstudioteam.com/ux-blog/user-attention
Nielson, J. (n.d.). Jakob’s Law of Internet User Experience (video). Nielsen Norman Group. https://www.nngroup.com/videos/jakobs-law-internet-user-experience/
Nielsen, J. (2024, February 20). 10 usability heuristics for user interface design. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/
Rikwar, H. (2024, February 7). What are user interface (UI) design patterns? - updated 2024. The Interaction Design Foundation. https://www.interaction-design.org/literature/topics/ui-design-patterns
Sharp, H., Rogers, Y., & Preece, J. (2019, May 29). Interaction design: Beyond human-computer interaction, 5th Edition. Wiley.com. https://www.wiley.com/en-us/Interaction+Design:+Beyond+Human+Computer+Interaction,+5th+Edition-p-9781119547259
Clip Art/Icons sourced from Canva and Figma
Page updated
Report abuse