Replatforming Elvie.com
Between 2023-2024 design on web at Elvie ran with a backdrop of replatforming our US website. This involved working with the web Product Manager (Sarah Kent), to create a strategy for the website going forward. We then presented this strategy to the business, where we began to work with external agencies with our internal teams to replatform the site. The following designs display the before and after of this work.
Before:
Limited product options with sizing not being surfaced until you interacted with content.
Not inclusive sizing for women with smaller nipples paying more (With in box catering for less than 50% of women).
After:
Surfacing sizing for users purchasing our flagship pumps on product description pages.
Inclusive sizing with women receiving sizing options at no cost when they purchase their pump. (with options = 99%!)
Our ambition?
A premium, guided experience. We’d like to reduce the negative reviews from women who haven’t received the right size for them, whilst providing education for women don’t know about how size can affect their comfort and output. Exclusive to D2C. You can read more about this project in this case study.
Before:
A site theme styled from old branding with new imagery added.
Not optimised for mobile. Cart was hidden in the menu.
A limited number of components, not optimised for mobile.
After:
Designed with our refreshed brand styling in mind.
Quick access to cart from the navigation bar.
An updated homepage with wider range of components to begin to display content in a more dynamic way.
Before:
A menu that was the same across devices.
A product name only approach.
All products grouped in ‘shop’.
Getting to content was only accessible on pages, or when the blog was clicked.
After:
Mobile optimised menu, with a desktop accompanying design.
Product name, image and description making it simpler for users to identify.
Category level added, allowing navigate between BP&F and PF. Future proofs an easy addition of new categories.
Relevant content added to navigation eg) which breast pump is right for me / sizing tool.
Before
Accessories pages for each product (eg. Stride Accessories, Pump Accessories).
Pages designed only for parts for your pump.
Limited space for content.
After
A one-stop-shop for all breastfeeding accessories, with filtering and labels to find what corresponds with each product.
Category accessory pages, with add to cart from page to encourage basket building from a single page. Future proofed for new launches that fall into all breastfeeding (and soon sleeping!).
Ability to edit content on an accessory level - allowing us to add detail for users.
Before
A one page checkout that hadn’t had any love for a long time.
Express options provided at the bottom of the checkout when payment was reached.
After
A tried and tested Bigcommerce efficient one page checkout. Reskinned for Elvie, there are plans to build upon with improvements in future.
More express checkout options available at cart and now offered at the top of checkout.
How did we get there?
1. Understanding where we're at
We started by looking into what we knew already about the usability and user of our current platform.
Poor load speed drives customers away and negatively impact rankings
Users take time to consider purchasing our high value products.
Revenue and traffic is higher on mobile devices but some users like to make a high-value purchase on desktop.
2a. Identifying our user
'Why did you buy Elvie Pump?'
To create some user proto-personas to ensure we were aiming our designs in the right direction and making more accurate considerations, I conducted some quantitive user research. The way I did this was to scour reviews across different platforms, pulling out the intention to purchase for users, pushes to purchase and any extra information or concerns about their purchase. I then workshopped these insights with the product team to pull the information and assumptions into user proto-personas.
2b. Empathy Mapping
Using a combination of SEO queries, social media comments, Google Analytics stats and information from other teams to learn about the users mindset (Customer Service and Research).
3. Identifying user requirements:
Established through market research, surveys run on site, insights from interviews and competitor SWOT analysis - alongside our proto-personas.
A considered personalised shopping journey
Increase basket size & offer users reasons to buy direct from our website.
Increase lifetime value of users
Allow users to navigate the site easily. Build strong relationships between Elvie and the user.
Provide support & guidance
Better pre and post purchase content to help users self-serve information
Accessible
Useable by all women and compliant to Google accessibility policy
4. Creating a design vision
Catering to a premium considered purchase
- Prioritising our returning users.
- Helping them to understand what our products can do for them.
- Guiding and educating them to get the right product for their needs and body.
Scalability
- Creating designs that future proof us.
- Allowing it to be easier to house new products or experiences we plan to offer.
Convey our brand look and feel
- Ensuring the new designs brought our updated branding to life.
- Progression on alignment to our digital products.
5. Designing whilst contributing and collaborating on a design system
The Elvie Design System was a collaborative effort within the Digital Product Design team. While each designer focused on a specific product, the system aimed to align elements across platforms, including the web, with the goal of full consistency cross-products. My work on this project helped align the web experience with the broader design efforts, contributing to a unified user experience across the product suite. Leading to, launching a website aligned with our apps.
6. Rounds (& Rounds) of wireframes, design crit and stakeholder workshops
Results:
A replatformed website!
Allowing our market teams to be more creative with promotions, our brand team to see their work reflected within the UI, look and feel and the operations team to seamlessly run their process.
Up to 48% conversion rate increase on product pages
When refreshed product hero blocks were applied. With engagement in the content being reflected by upped time on page.
Increased basket size on accessories
With users adding an extra product on average to their basket. Increased further post-migration by A/B testing adding delivery messaging to this page.
A stronger design foundation
Using the design system to create the new designs, meant that we had a much better foundation to add further in future projects.
Learnings:
Buy-in on strategy is key
Without company alignment on a vision of where you're going, it could get very messy along the way. I learnt a lot of getting buy-in from stakeholders by taking the time to walk them through where we were headed.
The impact of aligned UI & UX
The timing of the replatform allowed me to take the work being done on the Elvie Design System and apply it to the site-refresh. When this sat alongside the apps, even in stakeholder presentations, it was clear of the impact a system can have to both the user understanding of the experience and the look of your brand.
Replatforms are complicated
Multiple stakeholders, multiple external agencies and a whole lot of complicated code. It was incredibly valuable to be part of this project to understand what's under the hood of a website.