TIMEFRAME
May - Aug 2023
Visual Designer
UX Designer
ROLE
TYPE
Mobile Design
Team Project
LINK
Simplifying User Interaction
The Michigan App serves as a one-stop resource hub for students, staff, and visitors, providing access to campus resources.
Freshmen started with the Michigan App but switched to simpler alternatives as they found it too complex.
To address this, I was part of this campus-wide project alongside four other UX designers to deliver design recommendations aimed at better meeting user needs.
Challenges
The project lacks a clearly defined scope due to the wide range of functionalities and numerous pages within the Michigan app
Creating a unified app to cater to the distinct needs of various user types
Time limitations on redesigning every app feature
Project Timeline
Kickoff
Following the initiation of the project, our team lacked specific goals for the app redesign due to the diverse range of pages and functionalities within the Michigan App. Without pre-existing insights, we conducted a collaborative discussion with our sponsor to explore the primary user interactions.
Gather Insights
Previous user interface of the Michigan App
Early Insights From the Preliminary Research
We gathered app data analysis of current app usage and found out the top three accessed features are class schedules, bus info, and dining services. While mostly students use it, there's also engagement from staff and faculty.
Looker Studio analytics report a current total of 26,264 users.
The Michigan App analytics from Looker Studio
Discovery
Dive Deeper in User Experience
We created a user survey and sent out to fellow interns, students, staff on Slack and email.
We received 30 responses (13 students, 15 staff, 2 other).
Key Insight 1 - Different user roles = different needs
Students, faculty, and staff may utilize the app in varying ways, reflecting their distinct needs and engagements with the campus.
Top 3 features in importance:
Out of 13 students:
Bus (54%)
Dining (54%)
Class (46%)
Out of 15 staffs:
Parking (53%)
Bus (40%)
Featured events (40%)
Key Insight 2 - The app's navigation and transportation features are dispersed across different screens
Users find it frustrating that multiple taps are needed to access bus information, as they are unable to view both the map and bus information on a single page.
“I have no idea how the bus system works”
Users saying
“Tapping on the stops doesn’t show arrival times but rather requires a separate screen”
Key Insight 3 - The app has many hidden features
The app lacks a standardized structure, leading users to overlook various features and struggle to locate them.
“The Michigan app has too many layers and is hard to access the service I want to use”
Users saying
“I didn't know the Michigan app could do what the listed applications could do.”
Insights into App Development Prioritization
The research and evaluation assisted us in identifying issues and pain points within the app. To refine our project scope further, we consulted with developers to gain insights and determine top priorities.
We performed contextual interviews with the app developers involved observing and understanding how they prioritize and decide which features should be revised within the app.
Our team had a Zoom call with project sponsor
This process allowed us to gain insights into their decision-making, considerations, and criteria when evaluating and selecting features for improvement or revision.
Digging into the data and problems we identified, two project scopes were proposed.
Taking into account resource constraints and time limitations, we narrowed down our initial scope to address existing issues within the app.
Define the Initial Project Scope
Project Scope 1 - Create a “The Everything app”
The University of Michigan provides numerous services, with several standalone apps catering to specific needs. Initially, we considered consolidating these into a central hub. However, this proved to be an overly ambitious undertaking, exceeding our project scope.
Project Scope 2 - Fix what’s already there
Another scope we came up with was improve existing features and ranking the current features to identify which has highest priority to work on first.
Deeper Insights
Conducting Comprehensive App Analysis
In order to have a clear overview of current Michigan App structure and each connected layer, we created an information architecture diagram to look at the app as a whole.
The app's structure is intricate, with certain pages and information requiring users to navigate through multiple taps to access them.
The Michigan App information architecture (IA)
In the subsequent phase, each team member conducted a heuristic evaluation of the app's features and functionalities. This evaluation identified areas within the app requiring the highest priority for redesign, based on our comprehensive severity rating.
Screenshot of a section of the individual heuristic evaluation form
After the individual evaluation session, our team constructed an affinity diagram grouping all high-rated issues identified within the app. We pinpointed the 'dev quick fix' feature and marked a gear icon on top as a priority.
The Michigan App affinity diagram
How do we prioritize feature fixes and redesigns?
We created an effort-impact graph to prioritize which issue to address within our internship period and decided to primarily focus on the high impact low effort section.
Our Effort-Impact graph
Given their tendency to increase in significance and influence, prioritizing the satisfaction of user needs and streamlining the app structure is essential.
Finding
How do existing app designs ensure clear information presentation?
We examined the presentation of information in various existing apps, including the M-bus app, those of Penn State University and Michigan State University. In addition, we drew inspiration from commonly used apps like Safari, Google Maps, and Apple Maps.
Design inspirations drawn from existing apps
Object-Oriented UX (OOUX)
Our team applied OOUX design principle to structure the interfaces of each page. Define the main objects in the app, establish a clear relationship between these core objects, reorder all the elements from most to least important considering user interaction, and list call-to-actions.
OOUX of the Michigan App features | Link to the OOUX File
The method helps us to understand the relationship between each of the objects as the Michigan App consists of complicated contexts. Also, during this process, we could understand the whole structure at the same time rethink of what users’ requirements and what are the information should be presented.
Reframing the Problem
Complex Structure Hinders User Information Retrieval
The Michigan App offers a wide array of information, including bus schedules, dining options, campus activities, and more. However, the challenge lies in the lack of a clear and standardized method for retrieving this information.
How might we streamline user interaction and simplify the app's structure?
Determined project scope - Combine and Centralize
After going through a thorough research and analysis process, we realized that there are many individual features and currently placed as an individual element could be combined into a single category. For example, the bus, dining, parking, class locations, computing sites locations, etc are all consist of using map and navigation feature, they can be considered one category as “places”.
Redesigned app information architecture
Brainstorm & Discuss
We all do sketches with different ideas and different screens and then sit together to discuss which sketch feature will be show on our final prototype. We carefully evaluate the each design ideas and consider if there are any better options. Then, we put every chosen design sketch on table and start to build low-fidelity wireframe.
Sketches of “places” page
The Michigan App Redesign
We suggest redesigning the home page and places (map) page, along with creating a new onboarding experience that coordinates with the redesigned pages.
Introducing Modular Design
We organized features into “modules” on the home page. Each module has a consistent size and design, and can be hidden, collapsed, or rearranged.
Home Page
Part of the module design
Current Design
Current home page design
After Redesign (incorporate modules onto the page)
Light mode
Dark mode
This modularity design benefits both users and developers.
For the users:
Users are able to customize their home page
Add/remove modules
Rearrange modules
For the developers:
Each feature will be a lot more standardized and component driven.
Editing one module will have no impact on another.
Homepage customization
Communicating the New Change to Users
Springboard their experience by explicitly asking for their role
Explicitly asking the user about their role at the U of M
Helps tailor dashboards according to survey responses by each user role.
Convey App Usage Info through onboarding slides
To assure users (through the first-time onboarding slides and prompts) that:
App is for anyone affiliated with U of M, not just students
The dashboard menu is entirely customizable
We created an onboarding experience for first time users easily understand how the app work while helping us keep track of user roles.
The Michigan App onboarding page
Consolidate navigation features onto one page.
Another major redesign of the app functions is to combine all the location features on to a map based page. Users are able to navigate like a map page, navigating through each feature will only need to stay on this centralized map page.
Places - Map Page
Four tabs on places page
Bus, Dining, and Parking will be displayed on one screen
Consistent design
Users perform the same actions across each function
For the users:
The student class schedule will be utilized in “Places” guiding students to their respective class locations.
For the developers:
We learned from the developers that the app gets charged a fee for the amount of map views, which means refreshing the map page each time will charged the additional amount.
Our design minimizes user costs by avoiding multiple map page reloads and sets the stage for future expansion.
The Michigan App places page walkthrough
Strategy and Next Steps
🔨“When all you have is a hammer, everything looks like a nail.”
As passionate UXers, we understand the value of a holistic approach to product development. In addition to UX, vision, marketing, development, & more must all come together. Unfortunately, this project lacked these crucial elements. So, we took the initiative to collaborate with University of Michigan VP of IT Services, who oversees all those important areas within U-M Information and Technology Services (ITS) to plan for:
People and resources needed to keep the app aligned with user needs (research)
How the app can act as a vessel for the university’s larger goals (eg. Climate action, DEI)
Lessons Learned
Define Project Scope Early. In our project, the lack of a set project scope meant spending a lot of time exploring the app and conducting research to decide our focus. Our broad initial idea made it challenging to complete tasks within the given timeframe. Having a clear project scope from the start is essential to prevent scope creep and stay focused on achievable goals.
Consider Developer Capabilities. Engaging in conversations with developers proved invaluable in this project, as they helped filter out impractical suggestions and provided insights into the development team's capabilities based on their past experiences.
Prioritize Effective Communication. Our team excels in effective communication, a vital element for success. It is imperative to maintain alignment among team members and stakeholders regarding goals, timelines, and progress.
Our lovely team : )