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.
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.
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.
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.
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.
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.
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.
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:
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.
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.