PEEPS
Fostering connections for the UC San Diego student community with their campus, the San Diego area, and fellow students.
UX DESign
ui design
ux research
Project Details
DUrATION
9 months
December 2022 - June 2023
my role, team Members, Tools, & Category
My Role
UX/UI Designer
User Researcher
Tools
Figma
FigJam
Adobe Illustrator
Team Members
Rickie
Madison
Laura
Category
Team Mock Project
Link to prototype
Problem
Solution
Be Able to Discover So Much More
Find new & fun activities to partake in through socials
Filter, search, & learn more about various on-campus clubs/organizations that interest you
Gain more insight on a variety of courses & professors within all departments
Empathize
Reflecting on social, environmental, and health challenges, we honed in on leveraging digital solutions. Amidst this exploration, we identified a prevalent need within UC San Diego: the struggle of adjusting to college life post-pandemic, compounded by campus culture dynamics and the difficulty of finding communities. Drawing on personal experiences, we embarked on crafting an app to bridge these gaps. Through sketching stakeholders, features, and pillars, we crystallized our vision for an end-to-end solution.
To help diminish this negative stigma of UC San Diego while also attempting to support students on their college journeys, we reached a potential solution of creating a guidance app.
By offering students an opportunity to expand their horizons and discover both our campus and the vibrant city of San Diego, it serves as a tangible showcase, illustrating to students the full extent of what our university has to offer in every facet.
Research
A helping hand that is always present both on and off campus.
Following in-depth user research, I employed data-driven insights to align with the aforementioned mission statement by actively assisting students in bridging the divide between themselves and their community. PEEPS is a platform that helps college students tackle academics, involve themselves in extracurriculars, and find fun and unique social activities.
Main Insights
Through stakeholder interviews, we unearthed a common thread of struggle among our targeted audience—difficulty in campus involvement due to limited resources and promotion.
Amidst these challenges, we found a glimmer of hope: a common commitment among students to engage in enriching activities weekly. This sparked our determination to bridge the gap between intent and accessibility, propelling us towards crafting a solution that resonates deeply with our campus community.
Limited Resources and Promotion: There was consistency in stakeholder interviews, revealing how students struggle in accessing campus resources due to inadequate promotion. Despite a strong desire to engage, students encounter frustration and hardship in navigating the pathways to these resources.
Commitment to Engagement: All participants expressed a dedicated effort to engage in weekly activities, whether social or career-oriented.
Campus Living Dynamics: Disparate experiences emerged between on-campus and off-campus students, particularly regarding social integration. While on-campus living fosters a sense of community and facilitates friendship formation, off-campus students are challenged with forging new connections.
Mobile Accessibility Preference: The majority of interviewees expressed a preference for a mobile application, emphasizing its convenience and practicality for on-the-go access to resources and information. This insight informed our decision to prioritize mobile functionality in our app design.
Armed with these insights, we embarked on the next phase of our design journey, leveraging user personas and storyboards to shape a solution that addresses the unique needs and challenges of our UC San Diego community.
User Personas
Lola is actively seeking different ways to enhance her participation and engagement within various facets of the student community.
Luca is trying to find ways to explore the city of San Diego to better acquaint himself to not only his environment but the community as well.
Storyboarding
We created two storyboards to illustrate the user journey and potential use cases for the unique features we hoped to implement into our design.
Furthermore, these also act as a clear reference for us as we proceed with wireframing and low-fidelity designs, embodying the precise outcomes we aim for users to achieve when fully experiencing the platform after it's fully developed and launched.
User Flow
Prior to beginning design iterations, we laid out a comprehensive end-to-end user flow that encapsulates the entire process step by step.
We streamlined the main features to depict what the users will see on each page. It is a rough blueprint as to what will be the core features of our interface and gives us a sense of direction for the design.
Wireframing + Lo-Fi Prototype
After gathering insights from preliminary user research, we held multiple team meetings to delegate tasks for the app's creation.
We focused on creating wireframes for key features: profile, home, and discover. Each team member took charge of a specific page. I led the development of the discover page, aiming to enhance user exploration. I crafted wireframes and designs tailored to our users' needs and our app's objectives, fostering engagement on and off campus.
After multiple revisions and team discussions, I finalized a user-friendly lo-fi design tailored to our audience. Key features of the version 4 wireframe include:
Academics page: Search courses by department with detailed information, access student reviews for professors, and save favorites for future reference.
Extracurriculars page: Search campus clubs by interest or category, view club details and involvement opportunities, and save favorites.
Socials page: Explore San Diego activities like dining, hiking, and landmarks, access details and reviews, and save favorites for later.
Moodboarding + Style Guide
In our journey to design an intuitive and visually appealing app, we embarked by crafting a mood board to both finalize our style guide and ignite inspiration to guide our creative direction.
We started by creating a mood board to inspire the aesthetic of our app, gathering diverse graphics to capture our vision. I was particularly drawn to vibrant elements from state park images and the clean interfaces of apps like Mercari and Shop.
Our team decided on pastel colors like pink, orange, and purple to create a welcoming atmosphere. Additionally, I researched the psychology behind these colors—pink for kindness, orange for optimism, and purple for wisdom—aligning our choices with our desired user experience seamlessly.
Before finalizing our design, we focused on standardization by creating a comprehensive style guide. Our app name, "PEEPS," symbolizes our goal of building a close-knit on-campus community where students can seek advice and recommendations. Drawing inspiration from our university mascot, Fluffy the Sun God, our logo embodies warmth and hospitality, reflecting the core values of our platform.
Hi-Fi Prototype
As we moved from low-fidelity to high-fidelity, we began integrating our style guide to unify our work.
I concentrated on refining the "discover" section, leveraging my understanding of visual hierarchy to maintain consistency in typography and color scheme. My goal was to ensure its cohesion with the team's overall designs.
More modernized navbar setup
Based on various designs on the market currently, numerous platforms have implemented a more simplistic interface. Following similar practices, we moved forward with a revamped navbar.
Reorganized the Profile & Discover buttons on the navbar to increase practicality & intuitiveness for users based on feedback.
Updated club/org page view
Combined aspects from both my personal iterations on the club/org page with another designer on my team to create a more unified and developed interface.
Adapted to a more modern looking interface.
Replaced less beneficial sections with information more sought out by students.
Visually cohesive and appealing
Implemented realistic visuals to achieve a more cohesive, appealing, & relevant look overall.
Incorporated auto layouts as a way to maintain tidiness within the overall design.
Added PEEPS logo & shifted the "Back to discover" button to the top-right as a means to increase visibility for users.
User Testing
Following adjustments to our high-fidelity designs, we contacted the primary stakeholders we interviewed during our initial research phase to gather direct feedback for further improvement.
In our initial user testing round, we identified areas for improvement and made several changes for better usability:
Revamped the "Bulletin" section layout on the home page
Unified the club/organization sub-page design for consistency
Implemented profile switching functionality for club/organization organizers based on stakeholder feedback
After implementing these changes, we conducted another user testing session with the same participants. Most users were satisfied with the final prototype, though minor errors required attention:
Fixed button issues that redirected users to the wrong tab.
Added gradient accents to improve the app's aesthetics
Reflection + Takeaway
This project covered everything, from collaborating with fellow designers to create a unique, effective, and engaging platform, to seeing our ideas, hard work, and efforts materialize.
The Value of Collaboration
Collaborating with my team emphasized the value of seeking input and presenting design rationale, boosting my confidence in decision-making and refining my ability to communicate and justify design choices.
Goals for User-Centered Design
Moving forward, I plan to conduct further user research and use methods like A/B testing to drive ongoing improvements. I also aim to implement a notification system that offers personalized updates and reminders, boosting user engagement and creating a more customized experience.
Expanding Design Skills
Deepened my design skills, focusing on components, auto layouts, & standardization. Exploring Figma tools was key to my growth, emphasizing the importance of mastering design tools and experimenting with their features.
