USF Mobile App Development
Streamlining the university app experience.
OVERVIEW
Six fewer clicks. A faster path for students. This is how I redesigned USF Mobile.
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.
Timeline
2 weeks (July 2023)
My Role
Sole product designer
Deliverables
user research, usability testing, wireframes, design system, clickable prototype
Tools
user research, usability testing, wireframes, design system, clickable prototype
IMPACT
50% fewer steps
Reduced grade-checking flow from 4 clicks to 2 (50% fewer steps)
8-10 seconds
estimated saved per task
5/5 test users
reported the new flow was easier to use and preferred it over the current app
FINAL DESIGNS
OVERVIEW
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
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.
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
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
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
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
Problem: User retention
Solution: Simplifying the complex existing user flows.
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
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
Always room for improvement.
On the second iteration of mid-fi wireframes I made some significant changes.
Problem:
Solution: 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.
Problem:
Solution: 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
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 & VALIDATION
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
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
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