Sexual Health 

January 2020 - April 2020

Using Agile Design, I worked with four other designers to create a progressive web app for sexual health, educating university students aged 18-25 about sexual health products. With the app, users can scan the barcode of sexual health products and receive comprehensive and trustworthy information relevant to that product. Accompanying the app is a wall mounted vending machine in campus bathrooms, providing convenient access to sexual health products. 

Client

Ontario University

Students 

Role

 

UX/UI

Team

Amirah Mohamed 

Charlotte Baker

Scott Grunerud 

Esther Wonder 

Tools

Figma 

Maze 

Typeform 

Mapbox

Mural 

Vending_Machine_2.jpg

Challenge 

Work within an agile environment to design a digital application that works to provide 

quality education. My team and I initially brainstormed possible digital applications that solved different problems such as digital play for children, online mentorship, and VR language learning. Collectively we chose to improve sexual health education by creating a digital product and service. 

Goals 

For the Project

  • Design a more engaging and comfortable experience for users to learn about sexual health products

  • Build a digital experience that is not clinical

  • Provide products in easily accessible locations around the University of Waterloo Campus

For Personal Development 

  • Learn how to work and communicate with a developer 

  • Complete a product design using the agile design process

  • Learn how to design for Android

  • Learn how to conduct usability tests on Maze and analyze those results and make meaningful adjustments to the design of the UI

The User Research and Data

 

To learn about how our users currently inform themselves about sexual health products, we conducted a short survey. The key insights we gained were that 75% of students use Google to learn about sexual health topics, and 62% of students do not read all the product instructions provided on the product packaging. 

Do you read all product instructions that come with the product?

 

 

 

 

 

 

 

 

 

 

From this initial survey we only had 8 participants, and we felt that we needed more validation. The team created another survey to acquire a better understanding of our target customer and their needs. We surveyed 79 individuals, ranging in age from 18 - 25. These were some of our key findings: 

Would you be willing to pay a slightly increased price if you could purchase this product in your place of residence?

 

 

 

 

 

 

 

 

 

 

Our team understood that to sell products on campus in a bathroom vending machine we would have to charge a premium to cover costs. With almost 60% willing to pay a premium  and urgency being the greatest influence when buying sexual health products, we felt comfortable moving forward. 

If you were to have access in your place of residence to a vending machine that contained sexual health products which products would you want readily available?

 

 

 

 

 

 

 

 

 

 

To ensure we were meeting customer needs, the team wanted to ensure the vending machines were stocked with products that were desired by users.

First Prototype 

Majority of the preliminary research was to establish a need within the market and validate the viability of the vending machine. To test the educational app, the team decided to test the MVP of the app. I designed an interactive low-fidelity prototype using Marvel. The goal for the usability testing was to understand if users wanted to visually receive information about sexual health products on an app.

The first prototype had all the information on a single page, and the second prototype had users scroll horizontally to a new page for different sections of information. I used A/B testing to understand how users wanted to consume the information. From this iteration, users preferred the single page design as it was more intuitive and allowed them to see everything at once.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

A low-fidelity vending machine, ‘stocked’ with common sexual health products, was prototyped to understand the desirability of vending machines offering sexual health products, and the preferred location, which is important for maintaining sales and making a recurring revenue.

From our tests, users preferred to go to the vending machine located in the bathroom rather than a public space. This validated our assumption that the bathroom would be a more comfortable location.

 

Second Prototype

 

The branding of the app was further developed in the second prototype. The colour schemes were tested to ensure a trustworthy and discrete visual branding would be  portrayed. From user testing in the first prototype, we learned that students prefer plants or fruits to represent genitalia. To balance comfort with accurate education, I worked with the visual team to develop drawn assets that were “comfortably detailed.” 

Using Figma, I built an interactive high-fidelity mockup. The first mockup, based upon the initial low-fidelity wireframes, lacked a trustworthy and comfortable tone and thus the design was changed entirely. To increase comfort, I used a grid to increase the margins and the overall grid was increased to decrease clutter. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The hi-fi interactive mockup was tested on Maze, where users completed specific “missions” to test the key functions of the app. Following the tests, Maze quantified the results in a report for analysis. 

 

 

 

Our key interactions currently averaged a 60% success rate. Additionally, a significant amount of users dropped off the expected path to get from A to B. The greatest learnings came from our first mission.

 

 

This mission asked users to navigate to the "Directions of Use" section after scanning a product. From this test and watching users complete the mission, users were not aware that the page was scrollable, this was solved in the next interaction by moving the green background above the fold and adding a down arrow to prompt users to scroll.

 

Third Prototype

 

For this iteration, the goal was to finalize the MVP. After completing the second prototype and applying changes from the previous testing, the team conducted rapid prototyping through user testing to identify any final gaps in UX and the visual design. 

 

During this testing, users provided key insights that the visuals reminded them of PowerPoint. This comment was given by two different participants. Since one of the design goals were to be trustworthy but not clinical, this became a large problem. I identified features that were possibly alluding to the idea of PowerPoint, such as the original “Highlights” section that appeared like an agenda, and removed it from the design as it was not critical.

The team decided to remove the black scroll bar from the second phase. Users confused this feature as a hamburger menu. After removing the black scroll bar for the page navigation, I added the ‘Jump To’ navigation for the page in the form of circular buttons. This navigation was used to fulfill the user's desires for page navigation, communicated during prototype one testing. 

 

 

 

The 'Locate Vending Machine’ button was moved from the bottom of the page to the top, making it easier for users to quickly navigate the app and prompting users to purchase products from our vending machines. 

 

 

 

 

Finally, the team collaborated to conduct a Heuristics analysis of the design and make final changes to the app. From this analysis, it was determined the main functionalities were well designed from a UX and visual design perspective. If this app were to launch, the team would focus on helping users recover from errors, specifically in the search and map pages. 

Screen Shot 2020-03-01 at 5.36.41 PM.png
Screen Shot 2020-03-01 at 5.42.19 PM.png
Screen Shot 2020-03-01 at 5.42.27 PM.png
Screen Shot 2020-03-02 at 7.56.07 PM.png
Screen Shot 2020-03-02 at 7.54.54 PM.png
Screen Shot 2020-03-02 at 7.55.54 PM.png

A heat map conveyed to the team that people absorbed the image and the CTA menu at the bottom right. 

Screen Shot 2020-03-03 at 9.23.09 AM.png

Vending Machine button moved to the top of the page to increase conversion rates

'Jump To' section added to replace the black scroll bar for page navigation

If only people read all product instructions...

Written notes while observing users as they interacted with the prototypes.