Redesigning the University of San Francisco mobile app with students in mind.
The USFMobile app was designed to provide students access to key University of San Francisco resources. As a current USF student, I found the app to be inconvenient to use on a day to day basis. In response, I set out to redesign the mobile app into resource that is easy to use for students on the go.
My Role
Sole product designer
Timeline
2 weeks (July 2023)
Deliverables
user research, usability testing, wireframes, design system, clickable prototype
✦ Final Designs
00
✦ Overview
01
The problem
The USFMobile app was designed to provide students access to key University of San Francisco resources. Due to its overcomplicated design, the app is inconvenient and not utilized by most students.
✦ Breakdown of the problem
02
01
Complicated workflows
Critical details, such as course schedules, campus event calendars, and academic resources, are buried deep within the app, requiring users to navigate through numerous screens and menus, leading to a loss of time and productivity.
02
Inconsistent interaction patterns
Users are presented with different navigation methods and interaction styles throughout the app, leading to confusion and a steep learning curve.
03 features
03
Unneccessary features
The cluttered and overwhelming layout makes it hard for users to find the features they actually use on a daily basis.
✦ Setting goals
03
How might we statement
Design goals
01
Straightforward
Simplify complex workflows and reduce the number of steps required to complete essential tasks, ensuring a smooth and efficient user experience.
02
Coherent
Implement standardized colors, fonts, and iconography across the app to enhance user familiarity and navigation.
03
User-centered
Through user testing, prioritizing features that users find necessary rather than what the university finds useful.
✦ Research & key findings
04
I set out to understand user motivations, behaviors, needs and frustrations.
To get a baseline understanding of user motivations, I conducted interviews with 4 current USF students. Additionally, I provided a survey. Here are the results.
100%
of respondents were discouraged by the complex and maze-like interface.
Potential solution
Simplify and break down the complex home page into several key pages.
93%
of respondents felt that the app did not have clear navigation, and they did not want to spend the time it takes to figure it out.
Potential solution
Create a cohesive navigation system with recognizable interaction patterns, allowing users to browse without a second thought.
✦ Ideation
05
Survey respondents emphasized that grades were a feature they frequently used but found difficult to access quickly, so I streamlined the user flow to improve accessibility and enhance the overall experience.
✦ Development
06
Developing my ideas through Mid-Fi wireframes.
Building upon my lo-fi sketches, I began developing details of the interface with mid-fi wireframes. My underlying goal being to create a straightforward and cohesive experience for students, I gravitated toward a clean and modern visual interface. Most importantly, I made sure to prioritize the features students found to be useful, and tried to make them easily accessible.
✦ Iteration
07
Always room for improvement.
On the second iteration of mid-fi wireframes I made some significant changes.
1. Remembering my goal of creating a convenient and consolidated user-experience, I decided to move the bus pass onto the home page, grouping it with the student ID to create a “wallet” feature. This reduced the number of interactions the user would need to make to access a similar feature.
2. Instead of a full view class schedule, I changed it to show upcoming classes, reminding users when their classes start and which classes they have for the day.
✦ Design System
07
Typography
I opted for a sans-serif font for a clean and easily readable experience.
PP Mori SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
PP Mori Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Imagery & Icon
Instead of a color palette, I chose to use imagery of the Golden Gate Bridge, an iconic symbol of San Francisco, encouraging students to explore the city. The icon is the existing USF logo mark.
✦ User testing and validation
08
From the testing, all 5 users were satisfied with the new design, many putting an emphasis on clearness and practicality.
To test my design, I brought back the same USF students from the initial interviews. I let them test the prototype and collected their feedback. Additionally, I had them take the same validation survey from earlier to document changes in user satisfaction with my new design. From the testing, all 5 users were satisfied with the new design, many putting an emphasis on clearness and practicality.
User Feedback
User 01
2nd Year Student at USF
“Really well organized and clear... I’d definitely find this useful for school.”
User 02
3rd Year Student at USF
“Wow, it actually has important stuff in the forefront unlike every other school website or app.”
User 03
3rd Year Student at USF
“I love the explore page! If we had this feature on the current app I would attend more campus events.”
✦ Solution
09
Final Design: Highlights
A home page made for students.
College students are almost always busy and on the go, which is why they need an app that can keep up with their fast-paced environment.
The redesigned home page contains a consolidated carousel of information and resources most used
by students.
The wallet feature allows you to scan into buildings, board the Muni and more, all with a single sign-in.
Shortened user flow by 6 clicks.
Through Academics, users can view their upcoming class schedule, current grades and access the MyUSF Portal in a single page.
The grades feature provides users with updated overall grades, alongside grades for each individual assignment.
It also contains a feature that reminds users what classes they have for the day and how long they have until it starts, making it easier to plan around their classes.
Encouraged to explore.
The explore page contains an array of different upcoming events, including on-campus and athletic events. The scrolling carousels reduce the amount of clutter on
the page and sort events by category, so they easily accessible for users.
Whether students are attending their first day of classes or even attending a campus event, they’ll never get lost with the quick access campus map at the top of the page.
✦ After thoughts
10
What I learned.
College students are almost always busy and on the go, which is why they need an app that can keep up with their fast-paced environment.
The redesigned home page contains a consolidated carousel of information and resources most used
by students.
The wallet feature allows you to scan into buildings, board the Muni and more, all with a single sign-in.
like what you see?
2024 portfolio by anna knick
aknick90@gmail.com