Please enable JS

ULTUCUP

E-commerce for the sustainable menstrual care alternative.

PROJECT DETAILS

Developed 2019
Client Ultumum Sales & Marketing Innovations Group
Status Live
Roles UX Designer
Front-End Web Developer
Software Tools Sketch
Wordpress
WP Engine
Photoshop
Beaver Builder
Notability
Links Website

PROJECT DESCRIPTION

When I first met with the team at Ultumum, they pitched me on the idea of getting to work on a project and with a product that was ripe for scaling but 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 has since been extended), I began working with internal and external stakeholders from the ground up to revitalize the product’s existing website. Some key areas of focus identified early in my initial audit were speed, responsiveness, accessibility, and information architecture.

Speed Improvements
When I joined the company, the site was hosted via GoDaddy utilizing Wordpress to handle the content. We’ve since 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.

Responsiveness
The site is built on the Wordpress backend utilizing a number of plugins, including WooCommerce and Beaver Builder. I handled the front-end web development for this project, and something that was immediately apparently to me in an intial audit was a lack of concern over mobile responsiveness. The site initially saw almost 90% of its traffic coming from mobile devices, yet the previous development team put very little effort into the look and feel of the site for those users. That issue has since been addressed by re-doing the majority of the site's content from the ground up to format properly on mobile, and goes hand in hand with the changes made to the information architecture of the site, which I speak to a bit further down this page.

Accessibility Concerns
One of the key pillars of the brand and company is inclusivity and it felt disingenuous to move too far into the redesign of the website without addressing some key accessibility concerns found in the initial site audit. Some ways we’ve worked and continue to work on making the site accessible to all users include properly tagging images for screen readers and other potential use-cases, transitioning any remnants of less-than-ideal, gender-specific language choices to gender-neutral language site-wide, and testing images and graphics for proper colour contrast for users and visitors with visual impairments. Although there is always room to improve when it comes to creating a holistically-inclusive product and website, the team and I have made some major improvements in this area since I came on board.

Information Architecture
When working through some of the initial auditing process, a key idea surfaced regarding user trust and comfort with the product; users who purchased the product would often visit the site two, even three times before purchasing, trying to understand as much about the product and product space as possible. This point was something we felt it essential to address when re-working the content of the site, and some of the improvements we made to improve this include:
  • Re-working the site’s header and footer navigation for simplicity.
  • Stripping unnecessary or redundant pages and combining resources to improve overall discoverability.
  • Re-working the layout of essentially all pages of the site (often from the ground up) to improve readability, as well as adding graphics where possible to communicate more clearly.


Some other things we worked to address were the consistency of the graphics and language, as well as long-term scalability of the newly-refined. I put together a web standards guide early in the process to keep organized, as well as a Sketch asset library so that any future designers have access to the same elements that I did when designing the site. Working as the front-end developer on this project was also an exciting challenge, but I grew comfortable quite quickly and overall handle the maintenance of the site and its backend, as well as making any necessary changes to the front-end.

There are many more considerations that went into this project and I'm happy to speak to those; just shoot me a message! I worked closely with a Content Strategist and Sr. Graphic Designer on this project, as well as the company CEO at many points and would like to thank everyone at Ultumum for the trust and support in building out this site.

RELATED PROJECTS

concourse-dashboard


Dashboard UX / UI Design

Concourse Global

Portfolio Website


Portfolio Website

idkjoel.co

Have a design problem of your own?

I encourage you to get in touch; I'd love to chat about what your solution could look like.