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.
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.
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.
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.
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.
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.
A heat map conveyed to the team that people absorbed the image and the CTA menu at the bottom right.
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.