Making the case for the menstrual cup

Helping a small company grow by making improvements to site architecture, mobile optimization and back end infrastructure

Problem

We observed that the information architecture and interface design of the previous website was ineffective. Although the site was technically functional, it lacked a human-centred design approach. This product space is still taboo, so brea

Goal

As the lead designer, researcher, and developer, I hoped to put the user first with a refined website structure and better content design. The hope was that this would lead to to more conversions of visitors on the site into paying customers.

Action

Conduct and analyze research with customers to better understand their needs, and transition those insights into changes to the site. I created mockups, developed the mockups, and deployed the site. I also conducted follow-up research.

Impact

Conduct and analyze research with customers to better understand their needs, and transition those insights into changes to the site. I created mockups, developed the mockups, and deployed the site. I also conducted follow-up research.

Problem

Context

When I first met with the team at UltuCup, they pitched me on the idea of getting to work on a project and with a product that was ripe for scaling. It wasn't without problems: the small start-up had a website that needed significant improvements to be able to achieve its full potential. After creating a new role in the company for a UX Designer and signing on for a summer work term (that was extended into a whole years worth of work), I began working with internal and external stakeholders to understand the needs of the business. After that, there was a focus put on better understanding our user needs, and gathering feedback so that we could re-build a site that better addressed those needs.

Some key areas of focus identified early in my initial audit of the existing site were speed, responsiveness, accessibility, and information architecture, all of which were eventually addressed.

Figure 1.1: Steps taken to launch the new site

Goal

Improving site speed and responsiveness

The site I inherited was slow and unstable. It loaded inconsistently, and lacked any sort of intentional effort to reduce load times. Obviously, we needed to focus attention on making the site load quickly.

The site I inherited also did not scale effectively to mobile. It lacked any sort of consideration for how components would be rendered on mobile devices, and mobile devices accounted for a large amount of the site traffic. We took a mobile-first approach to the new site, which ended up really benefitting the project, but more on that later.

Providing more information, more easily, to more users

A screenshot of the options available to users on the “learn more” page of the site. Options visible include menstrual cup size guide, how to clean your menstrual cup, menstrual cup folding techniques and a page for users who have a low cervix.
Figure 1.2: The eventual outcome of adding options to "learn more" section of the site


One of the core issues understood from previous research was that users had a lot of questions about the product and about menstrual care in general. Overall, because it's the type of conversation that many people aren't comfortable having with each other, users will look on the internet for answers to their common questions around menstrual cups and menstrual care. We needed to provide users who were uncertain about the concept of a menstrual cup with answers so that they could feel confident in the product.

One of the core business objectives of this work was to expand on the site's search engine optimization. Although I am by no means an expert, I did research throughly what it takes to rise the ranks on search websites, and worked to implement positive changes that increased SEO.

Creating a site that is more accessible

One of the core principles at UltuCup is inclusivity. It was always at the core of the mission, providing sustainable menstrual care alternatives to all people with periods (and even saying "people with periods" got the wrong side of Twitter really riled up once). The company valued sustainable practices, and put a focus on caring about the planet and the people on it, so it only seemed right that the website reflected that mission.

As we re-built the site, we tagged all the images and put a specific emphasis on site structure so that users with screen readers could visit the site easily.

Action

Taking stock of the previous site

Figure 1.3: An example of what the annotated audit looked like

What can we do to make the site faster?

When I joined the company, the site was hosted via GoDaddy utilizing Wordpress to handle the content. Frankly, that's not a great setup. I'm a designer, not a developer, but I did some homework and we did what we could.

We transitioned the site to the WP Engine hosting platform and continue to utilize Wordpress. In our testing we’ve found WP Engine to be more reliable overall, and raised our Google PageSpeed Analytics load score from sub-40 to as high as a 95.

This is the result of that hosting change in combination with other actions that included properly optimizing and formatting the entire image library, utilizing caching more effectively, lazy-loading images and more.

We also needed to fully re-design the site to be more responsive on mobile. I re-built the site architecture from the ground up to be mobile-first, based on usage data, and we saw a significant decrease in abandonment rate on mobile once the changes were in place.

A graphical representation of the steps taken to improve site speed. 1: Optimize and lazy-load images on the site. 2: Properly utilize caches, pre-load key pages. 3: Scale the page content responsively by device. 4: Test the site on variety of devices and browsers.
Figure 2.1: Some steps taken to improve site speeds

What can we do to answer users questions?

Understanding that our users often had questions about the product space, we set out to write content that made things make sense for our users. I worked closely with the PR team to design engaging content that was easy for users to read and comprehend. We then dedicated time and design resources to this content, creating a set of pages that offered additional information for users with questions.

We also felt like it was important to get users in the right cup the first time. As increasing conversions was a key business objective, addressing this gap in understanding was crucial to reducing cart abandonment. We spent an afternoon building a survey that users who were shopping for their first cup could take to make sure they got their size right, and it was used hundreds of times over the year I spent working on the site.

Some of the content we added to the site included the size guide, a page on proper folding technique, cleaning instructions for your menstrual cup, and a page for users who had a low cervix and weren't sure which option to go with. These were all sorted and cross-linked throughout the site so that users who had questions could find their answers, no matter where they were in the sitemap.

A graphical representation of the steps taken to better answer user questions. 1: Re-write site content with a focus on easy to understand answers. 2: Provide a quiz for users unsure of their cup size. 3: Merge redundant pages and re-work navigation to reduce user confusion and better address commonly asked questions.
Figure 2.2: Some steps taken to better address questions and reduce confusion

What changes can we make to make the site more accessible?

Along with the change to a mobile-first approach, we put intentional effort into the accessibility of the site. This serves more users more effectively (and we're rewarded for it when it comes to SEO) so putting resources into this effort was an easy pitch to the company.

We re-uploaded all the images at proper sizes for quick loading, and tagged them all with alt-text and descriptions so that users with visual impairments could work through the site easily. We then tested the site with screen reading software, and evaluated the contrast ratios on all of our graphics to make sure the site was readable. A big part of accessible design is content design, and so any pages that we edited were evaluated based on reading level to ensure they came across simply and easily for users.

A graphical representation of the steps taken to improve accessibility. 1: Re-upload and re-categorize all images. 2: Tag all images with alt-text and descriptions. 3: Test the site using screen reading software. 4: Test text contrast ratios against background.
Figure 2.3: Some steps taken to better address the accessibility of site content

No items found.

Impact

Launching the re-designed site

We launched changes to the site iteratively, over the period of months. Here are some of the highlights from our changes, when compared to the previous site:

  • Google PageSpeed improved from sub-40 to as high as 95
  • Abandonment rate decreased by as much as 15% per page
  • Site traffic increased
  • Support inquiries via online channels were reduced

I was kept on for an additional 8 months of work to maintain the site and continue to iterate as new ideas emerged. The site has since transferred ownership and a new team is responsible for maintaining the site.

Reflection

What I would do differently, two years later (2021)

Looking back, there were a lot of things I overthought on this project. I worked really hard to adapt to the systems that were previously in place, when I should've suggested new systems that would have reduced friction.

Here's a short list of the things I'd do differently knowing what I know about sustainable practices for long-term web success:

I'd work to get out of our own way and transfer the site's content over to a more responsive platform like Squarespace or Shopify, with proper CMS capabilities.

Realistically, I spent so much time doing pointless code editing that should've been spent addressing the interactions and content of the site. If I could go back, I'd work to transfer the site to a more agile platform almost immediately, and encourage the team to abandon previously unsuccessful platform for one that would empower us to get more done. I'd work to build templates using a scalable CMS, so that the next designer could spend time where they should: on the design of the content.

I'd prioritize simple, easy to edit components and build a proper design system with proper documentation.

The "design system" I put in place was more of a component library, with little documentation. There were clearly established patterns on the site, but they weren't properly explained, and overall the component library wasn't built to scale as the company grew. I'd put more time in to getting this right at the beginning so that as the company added pages and required new components, there would be a set of documented insights based in user research that informed their new things.