UI/UX & SEXUAL HEALTH
How are emerging UI/UX design principles increasing access to sexual health online?

Solo Project, State-of-the-field Survey
Skills Used: Product Design, UI/UX, Prototyping
Date: June 2021
Graphics by Cezar Bruje​​​​​​​
PROBLEM
Teenagers are increasingly turning to digital platforms for information about sexual and reproductive health, due to limited access and extreme social standards. In response to this demand, UI/UX designers apply the design process and UI/UX principles to digital sexual health resources. Successful UI/UX technologies are the outcome of a methodical design process that ensures the users’ needs are met. User research is one of the first and most critical steps in the design process, especially in regards to teenage sexual health education. In order to design a successful product, designers must cultivate a thorough knowledge of teenagers’ habits, comfort levels, existing sexual health knowledge, platform access, and other behaviors. Once a designer has accumulated research, they create a priority and problem definition, design the technology, test multiple versions, and create a cohesive brand. The utilization of design principles allows for the successful delivery of sexual and reproductive health resources across social media, mobile apps, websites, and other technologies.
USER & COMPETITOR RESEARCH
Research on teenage behavior and knowledge/access to sexual health was explored using surveys, interactive E-Learnings [2], statistical analysis, and partnerships with schools for ongoing, targeted research. Work and Co partnered with a local Brooklyn school to gain a complete understanding of their intended users: high school teenagers [3]. Similarly, the creators of Comolehago, a sexual and reproductive health education website, partnered with local schools in Morelos, Mexico [2]. Researchers for the app Real Talk also interviewed middle school students with a focus on digital and social media [4]. These three companies have similar target users (middle and high school teenagers) and similar target issues (the accessibility of sexual health). Thus, it is not surprising that they had comparable approaches to their research. On the other hand, researchers at ASPE found an unexpected “health sex-educator” in television, as many teens brought up the use of condoms with their parents after watching an episode of Friends [5]. While there are numerous conduits of research among teenagers, digital media remains a constant and this user research will prove vital as designers continue the process.
Competitor research is another crucial element of the design process. Designers at Pexxi, a personalized birth control prescription and symptom tracker website, found no competitors that offered both services [6], but designers behind the sex education app Smash! Sex Ed Trivia analyzed features in similar social media and competitor apps including Instagram, Snapchat, Sex Quiz, QuizUp, Adult Sex Ed, and Trivia Crack [4]. Competitor research is utilized as a comparative tool, where designers analyze sites’ and apps’ features to create products that address the users’ needs in regard to the current market.
PRIORITY & PROBLEM DEFINITION
The analysis of the accumulated research involves defining an outline of priority features and a targeted problem. In GHSP’s research on the risk of digital sexual health media, they defined their priorities as privacy, confidentiality, and comfort [7]. These priorities originated from their defined problem: social pressures where “women in many settings, in particular those living in more patriarchal, socially conservative contexts, are also often victims of reproductive coercion, through which their autonomy over reproductive choice is greatly impaired” [7]. Work and Co’s research with teenagers led to an outline of these priorities: an inclusive platform, a plethora of information to answer all questions, complete privacy, and a website instead of an installed mobile application [3]. Researchers at BMC focused on the problem of ineffective visual design, so they arrived at the priorities of “feasibility, acceptability, and attractiveness of potential features … as well as visual design, information architecture, structure organization, labeling of visual components, finding and managing options, and interaction design” [9]. These two companies’ priorities contrast, since Work and Co’s relates to features and the users’ needs whereas BMC’s priorities are more specific to the design and user interface, but are both incredibly important to the success of a digital product.
DESIGN & TESTING
With these priorities in mind, designers implement various features, elements, or themes. Design work is completed through wireframes, low fidelity screens, and high fidelity screens. The early designs are geared towards functionality such as basic content organization and user flows from screen to screen. These screens will often go through a round of user testing. For example, in Work and Co’s trial of a “range of concepts” [3], designers used testing to improve and iterate upon the designs. While curating and designing screens, designers must adhere to their priorities, such as Work and Co’s creation of a genderless AI chatbot that answers any sexual or reproductive health questions in a welcoming environment [3]. This design choice was a response to their user research that pointed towards the prioritization of anonymity and endless questions [3].
 User research on teen sexual education often indicated a need to safely provide information and healthcare despite societal pressures and stigmas [2]. Those social factors influenced the design of apps including Nurx, Biem, and Lemonaid, which provide birth control, STD and STI testing, period tracking, and other sexual and reproductive health access without the judgment or inefficiencies of in-person visits [8]. The comforting designs of data tracking mobile apps Clue and Flo were inspired by the importance of personal reproductive health privacy [10]. When designing these digital products, designers implement features that address their users’ needs and adhere to standards that follow their defined priorities. 
BRANDING & VISUAL DESIGN
Visual design is a critical factor to any digital product’s success. In the sensitive issue of sexual health education, the visual design must specifically inspire trust in the product’s safety and accuracy. The branding of Work and Co’s platform is a successful example of using visual design and user interface principles to develop a product that satisfies users’ needs and appeals to users’ behaviors [3]. They transformed their design for an AI chatbot by creating Roo, a genderless, cheerful character [3]. The “friendly, approachable” interface in combination with purposeful “color, typography, motion, and tone of voice” creates a user flow and experience that directly addresses the users’ need for usability and comfort [3]. Work and Co’s rounded buttons, sans-serif typeface, and crisp blues to create a clean, simple interface. Their branding and interface use blues and purples, which represent trust and comfort in color theory [3]. They contrast dark blue with a stark white, attracting the user and maintaining interest. Designers from Biem, an STD/STI app, also used blue throughout their app to promote trust and security [8]. These visual design principles can transform basic, functional, and low-fidelity designs into a cohesive, interactive, and engaging product.
CONCLUSION
Only 13 states in America require “medically accurate” sexual and reproductive health education [1]. Thus, the other 37 states are either not providing sexual education or, possibly worse, they are promoting falsehoods. The lack of valid education is not inconsequential; it correlates with 10 million STI cases among young people in one year [1]. These concerning statistics are a result of the dwindling demand for sexual and reproductive health education. This decreased demand is caused by sexism, religion, and other societal factors that create immense stigmatization around sexual health and prejudice towards those who pursue it [2].  These prejudices instill a fear to seek out sexual healthcare and information due to a “lack of privacy and confidentiality”, “low quality of care”, and a “social environment” that “discourages open discussions on the exercise of sexuality as well as on pregnancy prevention” [2]. The result is a societal gender gap, stigma against non-conforming sexualities, unplanned pregnancies, STIs, STDs, and unhealthy teen sex lives [2]. Without school education, teenagers turn to somewhere they are increasingly more comfortable: the internet. 
Emerging digital resources are expanding teenagers’ access to sexual and reproductive health information. Healthcare and educational resources are less restricted by location and access to clinics. However, there is still work to be done. These mobile apps and websites are popular and accessed often, but target users lack widespread awareness of their existence. Schools could alleviate the lack of education by adequately teaching sexual and reproductive health in the classroom, but unfortunately, society has created a blockade on the promotion of sexual education. To start off, schools could promote sexual education resources. Additionally, social media platforms can be used to advertise resources. 
In this field, designers have one main goal: prioritize UI/UX principles while designing new sexual health resources. There is no shortage in demand for well-designed sexual health resources, especially as UI/UX principles advance and sexual health information grow. 
REFERENCES
[1] K. Kagaoan, “Gamifying one of America's ‘touchier’ subjects - A UX case study,” Medium, 01-Mar-2019. [Online]. Available: https://uxdesign.cc/gamifying-one-of-americas-touchier-subjects-a-ux-case-study-8102017185d7.
[Accessed: 08-Oct-2021]. 
[2] C. Hubert, F. Estrada, L. Campero, I. B. Heredia-Pi, A. Villalobos, L. Suárez-López, M. Ibáñez-Cuevas, and T. Barrientos, “Designing digital tools capable of reaching disadvantaged adolescents and improving their sexual health: A Mexican experience,” Journal of Health Care for the Poor and Underserved, vol. 32, no. 2S, pp. 62–84, May 2021. 
[3] “Planned parenthood Case Study,” Planned Parenthood Case Study | Work & Co. [Online]. Available: https://work.co/clients/planned-parenthood/. [Accessed: 02-Oct-2021].  
[4] “Work - real talk,” Work - Real Talk. [Online]. Available: https://www.heybillymakethis.com/work-real-talk. [Accessed: 30-Oct-2021]. 
[5] R. Collins, S. Martino, R. Shaw, “Influence of New Media on Adolescent Sexual Health: Evidence and Opportunities”, working paper, ASPE, 2011 [Online]. Available: https://aspe.hhs.gov/reports/influence-new-media-adolescent-sexual-health-evidence-opportunities-0
[6] “The new mobile app that's helping improve young people's sexual and reproductive health in Togo,” IPPF Africa Region, 27-Apr-2020. [Online]. Available: https://www.ippfar.org/blogs/new-mobile-app-thats-helping-improve-young-peoples-sexual-and-reproductive-health-togo. [Accessed: 08-Oct-2021]. 
[7] L. J. Bacchus, K. Reiss, K. Church, M. Colombini, E. Pearson, R. Naved, C. Smith, K. Andersen, and C. Free, “Using digital technology for sexual and Reproductive Health: Are programs adequately considering risk?,” Global Health: Science and Practice, vol. 7, no. 4, pp. 507–514, Dec. 2019. 
[8] S. Fielding, “7 apps making reproductive healthcare more accessible,” Bustle, 27-Jul-2017. [Online]. Available: https://www.bustle.com/p/7-apps-making-reproductive-healthcare-more-accessible-64355. [Accessed: 08-Oct-2021]. 
[9] V. Gkatzidou, K. Hone, L. Sutcliffe, J. Gibbs, S. T. Sadiq, A. Szczepura, P. Sonnenberg, and C. Estcourt, “User interface design for mobile-based sexual health interventions for young people: Design recommendations from a qualitative study on an online Chlamydia Clinical Care Pathway,” BMC Medical Informatics and Decision Making, vol. 15, no. 1, Aug. 2015. 
[10] “Reproductive health apps: A digital standard case study,” Digital Lab at Consumer Reports, 10-Mar-2021. [Online]. Available: https://digital-lab.consumerreports.org/2020/08/17/reproductive-health-apps-a-digital-standard-case-study/. [Accessed: 08-Oct-2021]. 
Back to Top