A Hackathon project created in partnership with Options Sexual Health to tackle challenges in sexual health education and enhance support for their clients.
Role
Interaction Designer
UX/UI Designer
Team
Oliver Taw (UX,UI Designer)
Arriyan Ali (UX Researcher)
Daphene Borrel(UX Researcher)
Bali Oberoi (UX, UI Designer)
Timeframe
10 Days
Apr 2023
Tool
Figma
CareMate
CareMate is a mobile app developed for Options Sexual Health, aimed at empowering empower teens and young adults with knowledge and confidence in sexual health. It provides convenient assessments and information on services, creating a comprehensive platform for education and support.
The Problem
Inaccurate Access to Information
Limited access to accurate sexual health information leads to users being unclear about the services offered. This confusion prevents them from making informed decisions about their sexual health care and choosing the appropriate services.
Decrease in Sexsense Call Service
A decrease in the utilization of the SexSense service has been observed. The challenge is to increase exposure and engagement with the service to boost user adoption and improve overall usage.
Incorrect Booking Appointments
Clients often book incorrect appointments due to a lack of understanding about their conditions and the services they need. This results in mismatched appointments and inefficient use of resources for the organization.
Research data
Our Team interviewed over 30 people within the age group of 17-20 and based on the result
Sex Ed App Convenience
44%
Participants preferred a mobile app for finding sexual health information due to its convenience and ease of use.
Lack Of Sexual Knowledge
65%
Participants reported having below or average knowledge of sexual health, indicating a need for further education and information.
Preferred Access: On Demand
40%
Participants expressed disinterest in attending a sexual health workshop or seminar, citing a preference for maintaining privacy and discretion in how they access such information.
Stigma Around Sexual Health
32%
Participants reported difficulty finding sexual health information due to a lack of knowledge or stigma surrounding the topic.
Preferred Source: Health Care Providers
70%
Participants were not confident in trusting sexual health information from social media, and preferred receiving information from healthcare providers.
user Insights
Our team created a user persona and customer journey map based on the research to provide a clear understanding of the user needs, behaviors, and pain points. This helps ensure alignment across teams.
User Persona
User Story
As a 19-year female interested in discreetly learning about sexual health and accessing related services, I want an easy low-barrier method that provides engaging educational content and resources in a user-friendly manner.
Customer Journey Map
How might we + Proposal
How might we efficiently deliver personalized sexual health education to youth aged 17-20 through the use of familiar technology, leveraging the resources of Options for Sexual Health?
Building on our research, our team proposed a mobile app designed to provide engaging, story-driven content that enhances users' understanding of sexual health.
The app includes personalized health assessments and detailed educational resources, catering to users' desire for privacy and discretion.
To build trust, the app integrates expert-reviewed content from healthcare providers, ensuring users can confidently access accurate and reliable information in a secure and private environment.
By addressing these pain points, the app empowers users to make informed decisions, improves sexual health literacy, and offers a discreet, user-friendly platform for accessing critical information and care.
Ideation
Brand Identity
I was responsible for the interface design and branding of the project. To ensure alignment with the organization’s identity, we followed their brand guidelines for the color theme. I researched various health-related apps such as Flo, Rosy, and Telus Health to get inspirations and to understand successful design approaches and industry standards.
Wireframes
Using Figjam and Figma, I quickly mocked up wireframes to visualize the app’s layout. In order to create a more inviting experience for new users, I decided on a playful theme with hand-drawn illustrations, aiming to lower the entry barrier and enhance user engagement.
Ideating different color palette while staying within the organization’s look and feel
Outlining the mobile app user flow in Figma
Visualizing the user flow with placeholder screens and mock ups.
Naked hand-drawn illustration to convey friendly sexual theme
prototypes
Low-fidelity wireframes
After completing the user flow, I began developing low-fidelity wireframes with a focus on creating a clear, functional layout. Using placeholders for content and UI elements, I ensured that the design accurately reflected the intended user journey and key interactions, providing a strong foundation for the app's structure.
Hi-fidelity wireframes
When I created high-fidelity prototypes, I refined basic layouts into a user-friendly design guided by the brand color that I created in the early stage. I replaced placeholders with real content, incorporated interactive elements, and adjusted touch targets to enhance accessibility, ensuring the final design was both cohesive and functional.
Iterative Design process
Improved Login & Personal Information
During the initial concept and low-fi stages, we prompted users to select their age group and sex upon first using the app, without requiring a password. After user testing, however, we found that users preferred providing more detailed information to receive personalized content based on age and requested a password feature for added privacy protection.
Onboarding & First-Time User Experience
During the prototyping phase, we overlooked the onboarding experience for users. The main menu featured numerous sections and navigational items, which user testing revealed to be overwhelming and confusing for newcomers. To enhance usability, we incorporated a step-by-step onboarding feature in the final design.
Implemented Progress Indicator
In one of the app's features, where users consume health information in the form of Stories, our initial mockup did not show users their current page or the total number of pages. User feedback revealed a desire for clarity on their progress within the sequence. In the final prototype, we added a progress bar at the top of the page to indicate their current step and how many pages remain, enhancing the overall usability of the app.
Final design features
Familiarity & Intuitive Design
Many users feel uncomfortable seeking sexual health information due to stigma or a lack of knowledge. The implementation of the swiping interaction during the onboarding stage, which is a common feature in dating apps, is expected to familiarize targeted users with the app and create a comfortable experience for users who might otherwise hesitate to engage. A user-friendly, intuitive design mimicking familiar social platforms or common mobile app layouts will reduce the learning curve. By creating a non-intimidating and familiar environment, users are more likely to engage with the content and return to the app.
Swiping interaction commonly seen in dating apps helps user become familiar with the app.
Curated Stories (For Health Topics)
With 65% of participants reporting below-average knowledge of sexual health, there is a clear need for engaging and accessible educational content. Curated stories provide credible, expert-reviewed content presented in an engaging, narrative format. Storytelling is a powerful tool for learning, and these stories can make complex sexual health topics relatable and easier to understand.
Expert-reviewed content builds trust with users who are wary of misinformation found online.
Assessment Tool
The assessment tool allows users who prefer discreet access to information to self-evaluate their sexual health understanding or conditions in a private, non-judgmental space. By offering personalized feedback, users gain insights into their own health needs without having to consult a healthcare provider directly, which satisfies the preference for privacy while also enhancing knowledge and confidence.
The assessment tool enables users to discreetly evaluate their sexual health understanding.
Organization’s Services Page
The organization’s service page clearly outlines the available sexual health services and resources, acting as a direct bridge to professional help. This ensures users know where to go if they need support, while reinforcing the credibility of the app by linking it to real, trusted health services. It also encourages users to seek care at their own pace, offering both educational content and access to professional resources in one place.
The organization's services page provides users with discreet access to trusted sexual health resources and support.
Saved Items
The saved items page enables users to bookmark articles, assessments, or service details for later reference. This feature not only enhances ease of use, but also allows users to engage with sensitive content at their own pace and in private. It supports continuous learning and reflection, promoting ongoing engagement with important health topics over time.
The saved items page allows users to securely store and revisit important sexual health information at their convenience.
final product prototype
During this 10-day hackathon, the experience was both challenging and rewarding. Our team focused on clearly defining the problem, conducting user research, creating a minimum viable product (MVP), and iterating designs based on user feedback.
The teamwork was exceptional and fulfilling, especially during our brainstorming sessions, where we leveraged each member's strengths in research, visual design, and interactions. Most importantly, this experience provided me with valuable insights into the challenges faced by vulnerable youth in accessing accurate health information, including stigma, misinformation, and limited access to healthcare.
Throughout the process, I learned to work within the constraints of the organization’s brand guidelines while incorporating my own creativity, such as quirky artwork and gamification elements in the app. Designing for this scope not only expanded my knowledge and design mindset but also deepened my understanding of iterative design.
