Using Agile Design, I am working with four other designer 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 residence bathrooms, providing convenient access to sexual health products.
Testing the MVP of the app, I designed an interactive low-fidelity prototype, on 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.
The team created a survey to test how our target market would respond to a variety of colour palettes, images, and websites related to sexual health. The team decided to do this preliminary survey as it would support how to best design our digital and physical solution moving forward, given how sensitive the topic of sexual health is.
A low-fidelity vending machine, ‘stocked’ with common sexual health products, were prototyped to understand the desirability of vending machines offering sexual health products., which is important for maintaining sales and making a recurring revenue.
Using a survey, it was found that over 60% of respondents would be willing to pay a premium for convenience. This helped validate the need for a physical vending machine.
The branding of the app was further developed in the second prototype. The colour schemes tested in the first prototype were modified to match the trustworthy, and discrete branding the team wanted to portray after conducting user and competitor research. 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. Using a grid, larger margins were used to increase negative space,
The hi-fi mockup was tested on Maze, where users completed specific “missions,” to test the key functions of the app. We found that 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. Going forward, I will analyze these misclicks to improve the user flow.
A key issue we faced was balancing beautiful visuals with excellent user experience. From research and testing, we determined the initial design of the side scroll bar appeared as a drawer with app navigational features. After I redesigned the scroll, it was easily understood when
testing that the feature was a page scroll.
For this iteration, we focused on user flow and navigation of the app. We encountered difficulties with the experience of scanning a product. There were discussions about the necessity of having a dialog box in the scanning process, asking if the scan was successful. This will be further tested
in the next iteration, once the app is coded and the scanning functionality is operational.
I worked with the business development team to address the shortcomings and concerns of the business, specifically with financials and the target market. To achieve this we completed the BMC to understand all aspects of our business operations. As well, we conducted a market analysis of the greater Sexual Wellness Market. Further, we developed projections of the expenses, revenues, and income over the first year, and broke down the products being offered with the marginal markup prices.
For this iteration, the goal was to finalize the MVP. After completing the second prototype, the team conducted rapid prototyping through user testing to identify 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 add ‘'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.
I also moved the ‘Locate Vending Machine’ button 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. After launching, the team will focus on helping users recover from errors, specifically in the search and map pages.
Low fidelity vending machines
First design of the scroll feature, followed by the redesign
Page with dialog box, confirming if the scanning process was successful
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