.png)
I re-imagined and redesigned the UCSD Mobile App with a project team selected from a pool of applicants to create a product with social impact.
Team Lead; team of 4
Product Designer
UX Researcher
Winter 2022-23
~12 weeks
User Research
UI/UX Design
Product thinking
Figma
Illustrator
Figure 1. Sneak peek at the final high-fidelity screens :)
Here at UC San Diego, it is important for all Tritons to stay connected to their university—a difficult task to navigate with such a large campus and student body. The current UC San Diego mobile application attempts to tackle this task, yet falls short of achieving its full potential. From personal frustrations with the mobile application to findings gathered from in-depth user research, our project investigates the varying frustrations, desires, and perspectives of students across campus, as well as how to best suit their needs with an improved application.
The core ambition driving the creation of an all-encompassing UCSD app is to keep students informed and connected to campus. However, the current UCSD App is hindered by both front-facing design and back-end software issues—there are a myriad of available functions but a small percentage of actual usage and accessibility. The unclear user journeys and reduced understanding of app functionality is problematic for students who are unfamiliar with the school and the app.
Figure 2. Screenshots of the 4 main pages within the current app.
Long vertical scroll on home page leads to scrolling fatigue and reduced discoverability. Lack of logical categorization & ordering lends itself to memory-lapse slips.
Campus map occupies an entire tab in navigation bar, yet has low importance—users favor Google or Apple Maps.
Notifications also occupy a significant portion of the app, but are hardly used in comparison to other features.
Profile page doubles as settings, which yields confusion. Items contained are nonstandard and unrelated, minimizing familiarity and usability.
We strived to understand user's experiences more deeply and comprehensively.
We conducted contextual interviews using the master-apprentice model, combining both dialogue and observation into our learning. We held 20 interviews total; interviewees spanned 6 grade levels for an accurate assessment across a broad demographic. We asked 5 initial questions, instructed them to do 4 tasks on the app, and followed with 5 post-task questions. View a summary of our biggest takeaways below, and view the complete original data here.
COMMON ERRORS
Scrolling past items
When completing tasks, 10 out of 20 users struggled to locate features due to poor organization
Confusion regarding sign-in
7 out of 20 users had trouble completing the tasks due to not being logged into the app prior to completing them, showing lack of guidance
Notification settings
In attempts to manage notification settings, 8 out of 20 users erroneously clicked into the notifications tab on the bottom nav bar
TRENDS & PATTERNS
Only used for COVID
10 out of 20 users stated they only use the UCSD app for COVID-related purposes, indicating low discoverability and functionality of other features
Discovered unused features
13 out of 20 users discovered new features during our prompted task completion, previously unaware that they were offered
Dissatisfaction w/colors
6 out of 15 users did not like the lack of color and bland color scheme, and 2 users found areas hard to read—indicating poor accessibility
SUGGESTIONS
Clearer cards & categories
13 out of 20 users suggested clearer cards to visualize sections instead of scrolling vertically to search; desire for more recognizable categories
More distinct sections
11 out of 20 users wanted easier navigation; more distinct sections to better understand what's offered
Integrate other apps
8 out of 20 users brought up the idea of including features from other tangential UCSD apps into the mobile app
Problematic user journey
Figure 3. Typical user path taken to locate Student ID.
GUIDING QUESTION 1
How might we better connect students to campus through functionality and purpose of the ucsd app?
GUIDING QUESTION 2
How might we increase comprehensibility of the app to help users navigate with greater ease and efficiency?
To broaden our understanding of university mobile apps, we referenced apps from other notable institutions such as UCLA, Stanford, and RISD. Between these apps, we took note of their features and identified each of their strengths and weaknesses. Conducting competitive analysis not only helped us better understand where the UCSD app stands in the market, but also provided inspiration for our redesign.
UCLA Mobile App
Stanford Mobile App
RISD Mobile App
Figure 4. Gallery of apps occupying similar markets used for reference in redesign.
Figure 5. Feature comparison chart delineating key characteristics of each app.
Paper wireframing was our first step in generating solutions. We each drew up our own conceptual models—the more diversity, the better. Sketching on paper allowed us to think at a high level about organization and user flows. Designing individually allowed us to toss out a large net to catch all of our ideas before narrowing down.
In a busy quarter where the team only met once a week, I delegated individual tasks to motivate team members and encourage individual thinking outside of group work.
Figure 6. Initial exploratory wireframes for ideation; from 3 team members.
After deliberating a bit on our initial ideas, we moved to a whiteboard to collaborate together and iterate on a larger canvas. Based on commonalities across our original sketches, we decided to split the app into 4 sections: Home, Search, Related Apps, and Profile. We narrowed down on ideas, fine-tuned the specific features we felt should be added or removed, and decided where we would allocate them.
Figure 7. Our final whiteboard wireframes, with consolidated ideas.
DESIGN SYSTEM
TYPOGRAPHY, COLOR PALETTE, COMPONENTS
User interviews showed a strong desire for better use of color in
the UCSD app—we chose the university colors (two primary blues and two secondary yellows) to use throughout.
Figure 8. Style tile.
FINAL frames
Figure 9. Our final hi-fidelity screens.
FINAL PROTOTYPE—click around!
IMPROVED user journey
Figure 10. User path to locate Student ID in the redesign.
APP walkthrough
Figures 11-14. Navigations through final high-fidelity screens.
01
Navigate UCSD resources with ease.
After logging in, users are presented with personalized information under “My Cards” for easy access and categorized campus information under “Resources”.
Application settings, notifications, and “Card” options are intuitively represented by icons on the home page.
02
Find what you're looking for.
The search functionality provides an easy way for users to discover UCSD-specific information. Anything related to input queries will surface as a result, including pertinent apps, related articles, and UCSD websites.
03
Discover and access other important UCSD Apps.
New UCSD students are often overwhelmed by the amount of must-have mobile apps they are suggested (or otherwise required) to download. Here, users can easily access and understand the full inventory of recommended tangential apps for student life.
04
View your personal information and ID card.
The profile section allows students bypass the often tedious search process required to obtain their personal information. Their student ID card is presented at the top in plain sight. Quick-access links to core UCSD websites are also provided to navigate to efficiently.
my REFLECTIONS
01
Good leadership requires balance.
Though I had a clear idea of what good leadership entailed from an external perspective, applying those lessons to myself was challenging as a team lead in this project. I felt grossly underprepared at times, and overly ambitious in others. I tried to imbue a sense of psychological safety with a low-stakes team environment, but in the end, I grappled with apathetic attitudes from teammates.
In retrospect, I should have been more in-tune with my teammates, leading by motivating them rather than just by example.
02
Missing: User testing and iterative design.
Mostly due to our time constraints, we were not able to flesh out a thorough round of user testing. Since we only completed one iteration of design, there are definitely areas of improvement that could have been elucidated by user feedback on our first prototype. This project feels somewhat incomplete as a result; without evaluation and refinement, we weren’t able to perfect it to the level I would have hoped for. On the other hand, I now have a valuable lesson to carry forward with me into future projects.
03
People loved it :)
In the final project showcase, over 200+ members attended to see what all the project teams had produced. People we presented to all unanimously believed in our project and wanted to genuinely see it come to fruition—“When’s this getting made?” “Pitch it to the original creators!” This overwhelmingly positive response reaffirmed the user need and validity of our solutions, which left my entire team with a sense of satisfaction and fulfillment. From start to finish, this project reminded me of why I care about product design: its power to positively impact lives.
Project showcase!
thank you to my team and the greater ACM community for a wonderful experience :)
