Campus Connect
End-to-end design for a college carpooling mobile app.
Role
UI/UX Designer, Researcher
Tools
Figma, FigJam, Zoom, Google Workspace, Discord
Duration
8 weeks
January 2024
Skills
UI/UX design
UX research
Background
In collaboration at Creative Labs, a student-led design organization at UCLA, Clearify aims to solve the common issue in the online skincare market: the overwhelming task of understanding and comparing skincare ingredients.
As a part of Clearify’s design team, I contribute to the design system, prototyping, wireframing, and social media designs to ensure a seamless and intuitive user experience.
As a part of Clearify’s design team, I contribute to the design system, prototyping, wireframing, and social media designs to ensure a seamless and intuitive user experience.
Overview
Project Context
Navigating the overwhelming amount of skincare information online can be daunting for consumers.
The skincare industry, with its rapid growth and vast product offerings, often leaves consumers feeling overwhelmed, particulary when shopping online. Users frequently struggle to understand complex ingredient lists and discern which products are suitable for their specific skin types and concerns, such as sensitivity, acne-proneness, or allergies to certain ingredients like sulfates or parabens. This complexity is heightend for those new to skincare, who find navigating through the options confusing.
How might we simplify the process of selecting skincare products that align with individual needs and preferences?
How can we make online skincare shopping less confusing and overwhelming for consumers?
How can we make online skincare shopping less confusing and overwhelming for consumers?
Solution
Together, we created Clearify, a browser extension that simplifies the skincare research process by offering more personalized and concise product analyses, pulling from the community-trusted EWG database through Cosmily API calls.
Clearify simplifies skincare shopping, making it more accessible and less stressful. This browser extension creates a detailed cosmetics report from the ingredients list of a product. The analysis screen highlights the benefits and potential hazards of the product and assesses its compatibility with different skin types. With Clearify, users receive a personalized approach to skincare shopping, saving time and reducing the need to switch between multiple tabs for skincare research.
Clearify simplifies skincare shopping, making it more accessible and less stressful. This browser extension creates a detailed cosmetics report from the ingredients list of a product. The analysis screen highlights the benefits and potential hazards of the product and assesses its compatibility with different skin types. With Clearify, users receive a personalized approach to skincare shopping, saving time and reducing the need to switch between multiple tabs for skincare research.
User Research
Competitive Analysis
Current skincare analysis tools lack a balance between clear information presentation and user-friendly interfaces.
By examining both API resources and existing skincare analysis tools, we identified common analysis features and pinpointed opportunities for Clearify to enhance the current skincare research experience.
Competitor Strengths
• Visual Aids: use of icons and color coding allow for more digestible analyses and add visual appeal
• Personal Analysis: inclusion of notable ingredient benefits and skin type suitability offers greater personalization by catering towards specific skincare needs and goals
• Personal Analysis: inclusion of notable ingredient benefits and skin type suitability offers greater personalization by catering towards specific skincare needs and goals
Competitor Weaknesses
• Unclear Ratings System: individual ingredient ratings and overall product scores vary across sites due to inconsistent and vague codifications.
• Text-Heavy Pages: information overload creates visual confusion, which can overwhelm and deter users away from a site.
• Organization & Layout: optimizing page layout to better reflect users' greatest skincare concerns could increase usability and user satisfaction.
• Text-Heavy Pages: information overload creates visual confusion, which can overwhelm and deter users away from a site.
• Organization & Layout: optimizing page layout to better reflect users' greatest skincare concerns could increase usability and user satisfaction.
User Surveys
Survey results reveal a potential market gap.
We conducted a survey to better guage users’ skincare shopping behaviors and needs. In total, we were able to get 22 responses from university students.
Insight 1
Half of respondents (50%) find it important to know product ingredients (rated 4 out of 5), yet over half (54.5%) rated the ease of understanding the impact of ingredients as a 1 or 2 out of 5, indicating an educational gap and a need to better communicate ingredient effects to users.
Insight 2
Common skincare concerns include moisturizing (72.7%), acne-fighting (63.6%), and UV protecting (63.6%). Respondents also noted the importance of finding products with clean, non-harsh ingredients that are compatible with their skin types (e.g. dry, sensitive, oily).
Insight 3
Most users have not encountered or used tailored skincare apps or extensions to find skincare. Instead, they relied on social media and word of mouth for reviews and recommendations of skincare products.
Ideation
User Flow
By utilizing the key insights from our survey, we created a user flow to serve as the backbone of our Minimum Viable Product (MVP). This approach enables us to swiftly deliver a functional product that addresses the primary needs of our users, while allowing for iterative improvements based on user feedback.
Design System
Unifying style to build a minimalist, cohesive brand identity.
Clearify's visual language was crafted to convey security and foster confidence in the digital skincare space. Our design aims to create a serene and dependable environment where users feel assured in their skincare choices.
Featuring a modern aesthetic, Clearify's design system utilizes a soothing green color palette and clean typography to communicate reliability and ease. Strategic use of space enhances readability, while consistent UI elements ensure a seamless, intuitive, and welcoming user experience.
Featuring a modern aesthetic, Clearify's design system utilizes a soothing green color palette and clean typography to communicate reliability and ease. Strategic use of space enhances readability, while consistent UI elements ensure a seamless, intuitive, and welcoming user experience.
Testing and Iterating
Designing Wireframes
The evolution of our design relied on user survey responses and usability testing within our team due to the short project timeline. However, the quick turnaround of feedback allowed us to iterate continuously and prioritize a seamless and intuitive user experience.
Input Screen: Minimizing User Effort
A common theme across all wireframes for the input screen was simplicity. How can we streamline the input process so that users expend as little effort as possible attaining product analyses? Ultimately, we opted for a singular input field, clear calls-to-action, and minimal branding to stay consistent with Clearify's clean visual identity.
Output Screen: In-depth and Personalized, Concise Analysis
Because skin type compatibility was a primary user concern as indicated from our user survey, we placed a skin type suitability graphic at the head of the analysis screen. Thus, users receive personalized insight first thing.
After A/B testing, users pinpointed 2 additional concerns, which confirmed our initial approach to the output screen:
After A/B testing, users pinpointed 2 additional concerns, which confirmed our initial approach to the output screen:
1. “Potential harmful ingredients” section: confusion over the combination of the red-green color coding and “[ingredient]-free” wording revealed a need for clarification. Thus, we simplified the section header and removed the “[ingredient]-free” language.
2. “Beneficial product effects” section: adding icons for each potential product highlight aided easy identification of the positive effects of a skincare product.
2. “Beneficial product effects” section: adding icons for each potential product highlight aided easy identification of the positive effects of a skincare product.
Attribute Screen: Further Ingredient Analysis
For each highlight, we developed a page detailing the ingredients involved. We created various iterations, including color-coding the hazard levels of these ingredients and incorporating a dropdown menu. Our goal was to reduce cognitive load while being intentional about informing our users.
Enhancing Clarity
• Eliminated rating systems to minimize confusion and the friction of needing to learn what each rating indicates
• Reduced information overload by removing the redundant ingredients list within the output screen
• Maintained a consistent, left-aligned layout with clearly marked sections for ease of readability
• Reduced information overload by removing the redundant ingredients list within the output screen
• Maintained a consistent, left-aligned layout with clearly marked sections for ease of readability
Usability Testing
In refining the final wireframe for Clearify, we conducted an internal round of usability testing, utilizing our team due to time constraints. This allowed us to quickly gather and implement feedback on the new features and changes made from the earlier iterations. We created a small set of tasks to test the user’s ability to navigate the app and asked about overall first impressions. This first round of testing within the team was crucial in providing good insights for changes within our initial user flow. Here are our testing observations and iterative changes:
Skin Type Analysis Usability
• Our team expressed that while the skin type suitability was helpful, the presentation required clearer delineation between suitable and unsuitable types, especially for quick scanning.
Highlighting Key Benefits
• The 'Highlights' section needed to better showcase the positive attributes of the skincare products without overwhelming users with too much information at once.
Balanced Information Density
• We made sure users could easily process the most important details without feeling overwhelmed.
• We added a checkbox option to view the number of ingredients that contribute to each highlight.
• Our team expressed that while the skin type suitability was helpful, the presentation required clearer delineation between suitable and unsuitable types, especially for quick scanning.
Highlighting Key Benefits
• The 'Highlights' section needed to better showcase the positive attributes of the skincare products without overwhelming users with too much information at once.
Balanced Information Density
• We made sure users could easily process the most important details without feeling overwhelmed.
• We added a checkbox option to view the number of ingredients that contribute to each highlight.
Final Design
Reflections
Keeping an open mind and staying flexible.
Given the limited time frame, this project required flexibility and open-mindedness to address the constant flow of feedback from the team. The fast-paced setting taught me to iterate rapidly and efficiently. I also gained a newfound appreciation for the power of close collaboration.
Next steps...
With more time, I would incorporate even greater personalization into the extension:
Pre-analysis skincare quiz for users to denote their skincare concerns to a greater level of specificity.
In turn, the extension would carefully curate product breakdowns by highlighting particularly beneficial and irritative ingredients for users to look out for.
In turn, the extension would carefully curate product breakdowns by highlighting particularly beneficial and irritative ingredients for users to look out for.
Comparison feature for side-by-side product analyses.
Allowing users to compare two skincare products at once would streamline the research process even more and help users make more informed choices.
Allowing users to compare two skincare products at once would streamline the research process even more and help users make more informed choices.
Background
This project was created during my participation in Design Co Studios’ UX Project Design course at UC San Diego. My team and I researched and designed a college ride share mobile app to help university students at UCSD have a more efficient, pleasant, and community-centered way of commuting.
After initial conversations, my team and I wanted to create a solution to help UCSD students that were frustrated with commuting and transportation systems while promoting a sense of community. I contributed to the overall design process including wireframes, rapid prototyping, and usability testing. Moreover, I conducted user research through surveys, interviews, personas, hot ideas, competitive analysis, storyboarding, and UX flows.
After initial conversations, my team and I wanted to create a solution to help UCSD students that were frustrated with commuting and transportation systems while promoting a sense of community. I contributed to the overall design process including wireframes, rapid prototyping, and usability testing. Moreover, I conducted user research through surveys, interviews, personas, hot ideas, competitive analysis, storyboarding, and UX flows.
Overview
Project Context
Students find it challenging to commute to their destinations in an efficient, cost-effective manner.
During preliminary interviews with prospective users, specifically undergraduate students at UCSD, numerous individuals voiced challenges associated with commuting affordably, citing concerns related to expenses incurred through rideshare services for non-car owners, parking fees for those with cars, and frustrations with the perceived sluggishness and lack of route clarity and punctuality of public transportation options such as buses and trolleys. This sparks the question:
How might we develop a comprehensive transportation system to assist students without cars in accessing affordable and efficient commuting options?
Solution
Together, we created CampusConnect, a mobile app to help university students have a more efficient, pleasant, and community-centered way of commuting.
Drivers
Enter your destination and take friends along with you for the ride.
- Enter your destination like any mapping platform
- View your upcoming rides
- Chat with your riders
- Carpool to your destination with new friends!
- Leave a review
Riders
Enter your destination and browse available drivers.
- Enter your destination like any mapping platform
- Preview and accept available drivers to your destination
- View your upcomming rides
- Chat with your group
- Carpool to your destination with new friends!
- Leave a review
User Research
Competitive Analysis
Competitive benchmarking revealed pricey and unsafe commuting options competing on identical feature sets within the market.
In the ridesharing market, Uber and Lyft stand as major competitors, each boasting extensive market presence and a range of services catering to diverse user needs. Both companies employ dynamic pricing strategies and offer user-friendly app interfaces, striving to enhance the overall experience for passengers and drivers alike. However, affordability remains a concern for students and low-income individuals, as peak demand pricing can make ridesharing services relatively expensive during certain times.
Free public transport and buses offer an attractive cost advantage, but there are many drawbacks. These drawbacks include slow speeds, lack of punctuality, inadequate communication regarding routes and delays, cleanliness concerns, and occasional safety risks. Despite their affordability, these factors may deter passengers seeking a more reliable and comfortable transportation experience.
Free public transport and buses offer an attractive cost advantage, but there are many drawbacks. These drawbacks include slow speeds, lack of punctuality, inadequate communication regarding routes and delays, cleanliness concerns, and occasional safety risks. Despite their affordability, these factors may deter passengers seeking a more reliable and comfortable transportation experience.
With these products already available, why are people still frustrated with commuting?
User Surveys
Interviews and 39+ survey respondents shared the struggle of commuting without a car and rideshare apps.
To understand the challenges of UCSD students regarding commuting and transportation systems, my team sent out a survey to UCSD students. Our survey was divided into three sections: general questions about commuting, questions for those with cars, and questions for those without cars.
Defining Personas and Goals
To further compile our survey results, we created two user personas to highlight common pain points we found.
Brainstorming
How do we support for the ideal solution scenario?
Consideration for our persona's context directed a user flow focusing on minimum steps and time.
We mapped out key path scenarios that gets our users to their most prominent use cases within the least amount of steps.
Iterations and Low Fidelity Prototypes
Final Design
Onboarding, Profile, Messages
Drivers
Riders
Demo
Reflections
Many firsts with user research!
Working on this project with a larger group of designers was a new experience for me. It was also my first time going through the full UI/UX process, from user research to design. I realized the importance of understanding the user's needs and pain points before jumping into designing. Interviews, surveys, and iterations played a crucial role in shaping our designs. Given more time, I would refine our final designs and create a more cohesive design system. Conducting additional usability testing would also be beneficial. I learned that planning user flows and translating them into designs is more time-consuming than anticipated, and I would have liked to spend more time brainstorming to ensure a smoother transition from flow to design.
Background
This project was designed for USC's 2024 CreateSC Designathon hosted by Innovative Design. At this event, students team up in small groups to design to design the best solution to the prompt: Develop a mobile application platform aimed at enhancing accessibility and enriching the entertainment experience for individuals needing medical accommodations.
With my partners Stephanie Mae Mauricio and Nitya Khanna, we designed Nimbus in just two days to enhance accessibility for live entertainment experiences. By providing real-time information on lights, crowd density, and noise levels, along with highlighting paths to exits, quiet areas, and bathrooms, Nimbus ensures comfort and manageablity for neurodiverigent individuals and those prone to overstimulation at live events.
With my partners Stephanie Mae Mauricio and Nitya Khanna, we designed Nimbus in just two days to enhance accessibility for live entertainment experiences. By providing real-time information on lights, crowd density, and noise levels, along with highlighting paths to exits, quiet areas, and bathrooms, Nimbus ensures comfort and manageablity for neurodiverigent individuals and those prone to overstimulation at live events.
Overview
Project Context
Neurodivergent individuals face significant challenges in navigating and enjoying live events due to unpredictable sensory stimuli and a lack of accessible information.
Many neurodivergent individuals, including those with autism and sensory processing issues, struggle to navigate and enjoy live events due to unpredictable sensory stimuli such as loud noises, bright lights, and crowded spaces. This lack of accessible information about the event environment can lead to heightened anxiety, discomfort, and the need to leave the event prematurely. Addressing this challenge requires a solution that provides real-time, user-friendly information to help these individuals manage sensory inputs and navigate the venue with greater ease and confidence.
How might we support neurodivergent individuals in navigating and enjoying live events despite the challenges posed by unpredictable sensory stimuli?
Solution
Introducing Nimbus, a mobile app to help neurodivergent indviduals navigate and enjoy live events. By providing real-time information on lights, crowd density, and noise levels, along with highlighting paths to exits, quiet areas, and bathrooms, Nimbus ensures comfort and manageability for neurodivergent individuals and those prone to overstimulation at live events.
- Enter your destination like any mapping platform
- View your upcoming rides
- Chat with your riders
- Carpool to your destination with new friends!
- Leave a review
User Research
Competitive Analysis
Initial Research Reveals Barriers to Accessibility at Live Events
Given the project's short timeline, we conducted rapid yet comprehensive online research by exploring news articles, reviews, social media discussions, and user feedback. Our focus was on understanding the challenges faced by neurodivergent individuals—such as those with ADHD, autism, and anxiety disorders—when attending live events like concerts, conventions, and festivals.
Through our research, it became clear that neurodivergent individuals often face significant barriers to enjoying live events. Despite their desire to explore new music, connect with other fans, support artists, and be part of an in-person community, their experiences are often disrupted by sensory overload and lack of accommodations. Loud noises, crowding, and intense lighting can lead to overstimulation, making these environments feel overwhelming and, in some cases, intolerable.
User stories from platforms like Reddit, particularly in communities such as r/neurodiversity and r/ADHD, highlighted these struggles vividly. One user described the experience as feeling "like prison," where the combination of noise, physical contact, and flashing lights created an environment in which they felt trapped and unable to move. Another user shared their distressing experience of being forced into an ADA (Americans with Disabilities Act) line at a convention, despite their disability being related to neurodivergence rather than mobility. The incident triggered a severe anxiety response, causing them to take medication and use earplugs to cope with the environment. This situation underscores the lack of understanding and accommodations for neurodivergent individuals at such events.
Through our research, it became clear that neurodivergent individuals often face significant barriers to enjoying live events. Despite their desire to explore new music, connect with other fans, support artists, and be part of an in-person community, their experiences are often disrupted by sensory overload and lack of accommodations. Loud noises, crowding, and intense lighting can lead to overstimulation, making these environments feel overwhelming and, in some cases, intolerable.
User stories from platforms like Reddit, particularly in communities such as r/neurodiversity and r/ADHD, highlighted these struggles vividly. One user described the experience as feeling "like prison," where the combination of noise, physical contact, and flashing lights created an environment in which they felt trapped and unable to move. Another user shared their distressing experience of being forced into an ADA (Americans with Disabilities Act) line at a convention, despite their disability being related to neurodivergence rather than mobility. The incident triggered a severe anxiety response, causing them to take medication and use earplugs to cope with the environment. This situation underscores the lack of understanding and accommodations for neurodivergent individuals at such events.
Pain Points
Based on our initial research, we identified these pain points to address and integrate into the design of our mobile application.
Given the project's short timeline, we conducted rapid yet comprehensive online research by exploring news articles, reviews, social media discussions, and user feedback. Our focus was on understanding the challenges faced by neurodivergent individuals—such as those with ADHD, autism, and anxiety disorders—when attending live events like concerts, conventions, and festivals.
• Sensory Overload: Loud noises, bright lights, and crowded spaces can cause overwhelming sensory experiences, leading to stress, anxiety, and discomfort.
• Inadequate Accommodations: Event staff often lack understanding or training to properly accommodate neurodivergent needs, resulting in situations where attendees feel misunderstood or improperly supported.
• Limited Accessibility Options: Current accessibility measures, like ADA lines, often don't account for non-mobility-related disabilities, leaving neurodivergent individuals without suitable options.
• Negative Social Interactions: Public incidents, such as being forced into inappropriate lines or spaces, can trigger anxiety and feelings of exclusion, making the event experience distressing.
• Difficulty Navigating the Environment: The absence of clear guidance to quieter, safer areas can make it challenging for neurodivergent attendees to find comfort during overwhelming moments.
Brainstorming and Rapid Prototyping
Key features we aimed to include:
• Interactive map showing quiet rooms, exits, bathrooms, and live crowd density
• Real-time updates on lighting strobe levels, noise levels, and crowd density
• Review section to hold venues accountable for accessibility
• Search functionality to find and explore different venues
• Safety measure requiring a confirmation number before viewing venue information
• Real-time updates on lighting strobe levels, noise levels, and crowd density
• Review section to hold venues accountable for accessibility
• Search functionality to find and explore different venues
• Safety measure requiring a confirmation number before viewing venue information
Final Design
Onboarding and Profile
Home, Search, and Venue Information
Demo
Reflections
My first Designathon!
Participating in a Designathon for the first time was an incredible learning experience. I gained valuable insights into the fast-paced nature of product development, where we had to quickly brainstorm ideas, collaborate effectively with our team, and rapidly prototype and design our application. It was inspiring to see the creativity and innovation from all participants and such a diverse array of mobile app designs.
Reflecting on the experience, I wish I had more time to conduct thorough research with user surveys and usability testing. Gathering real-world feedback would have been beneficial in shaping the app's features and ensuring it truly met the needs of its users.
Given more time, I would focus on enhancing the reviews section to better hold venues accountable for their accessibility, and further refine the map feature to provide even more precise and helpful information for users navigating live events.
Reflecting on the experience, I wish I had more time to conduct thorough research with user surveys and usability testing. Gathering real-world feedback would have been beneficial in shaping the app's features and ensuring it truly met the needs of its users.
Given more time, I would focus on enhancing the reviews section to better hold venues accountable for their accessibility, and further refine the map feature to provide even more precise and helpful information for users navigating live events.