%402x.svg){kind=icon}
website goals
Saie was initially looking to optimize their website to increase overall conversion and offer more services and purchasing incentives. I worked with them for over 2 years to help plan their website strategies and maintain their website after the redesign.
What i worked on
- Initial full site redesign in 2021 and designed the navigation menu, cart, homepage, collection page, product page, and secondary brand pages
- Designed for new features and offers such as subscriptions, bundles, gifts with purchases, shade finder, referral program, and loyalty program
- Conducted regular site audits with Google Analytics and heat map data
- Supported the marketing team with landing page templates, such as for the Holiday Gift Guide
Results
- Worked to reduce bounce rate to between 20-45% from between 74.24-85.63%
- Increased conversion rates for paid traffic to 3-5% from the existing rates of between 1.37% to 2.97%
Initial research
Competitive analysis
I took at other beauty brands, focusing on those with similar price ranges and target audiences. While I wasn't trying to reinvent the wheel, I wanted to make Saie's website stand out among the sea of other makeup brands. I also wanted to look at what features they were providing, as Saie did not have a Shade Finder, referral program, subscriptions, bundles, et. cetera when we first started working with them.
What I learned worked well
- Huge focus on personalization features such as skincare quizzes and shade finders
- Focus on individual products instead of makeup categories
- Most skincare brands highlighted their latest product in their hero homepage to get users shopping as soon as possible
Product page
We optimized the product page multiple times to make room for new features and functions, such as subscriptions, shade finder, and product awards and badges.
Initial launch
I used a left-right column layout to maximize the top-of-the-fold. Since Saie wanted to include a ton of information at the top, I utilized a 'Read More' option for the product description if it ran longer than 4 lines, hid the ingredients list in a slide-out, and utilized badges within the product image. I wanted most of the focus to be on the shade finder, purchase options, and CTA button, so I kept those panels large and uniform in shape.
I also made the cross-selling panel as skinny as possible to keep the page length short.
Hidden ingredients panel
I used a slideout panel for the ingredients list, utilizing the existing interactions from their Saie Standards page to reduce build time.
Most recent updates
Saie recently expanded their shade range and relaunched their Shade Finder, so we also took the opportunity to revisit the PDP. Based off of our heat map data, we decided to move product details and ingredients below the CTA button. We also wanted to simplify the image carousel, as having an image in the middle was a little more difficult to update since Saie launched multiple products per year. We also added product awards and guarantees as a scrolling marquee instead of only relying on badges, especially since products like Slip Tint had multiple to show off.
Bundles
I also updated the bundles PDP template to keep the swatch panel open and reduce the amount of clicks it took for users to add a bundle to their cart.
Collection page
To support Saie's growing collection of products, I designed a sustainable collection page that would keep the shopping experience easy as their business continued to scale.
Adding filter and sorting options
We wanted to learn how users were browsing through products, so I focused on recommending filtering options that we could test out with heat maps to determine what was getting the most clicks. We wanted to test out a bunch of different ways to shop, including by skin concern, key ingredients, collections, et. cetera.
Design exploration
Option 1
This version allows easier tap targets on mobile, but it did get quite long with the amount of filters we wanted to test.
Option 2
This version proved less overwhelming, since only one category is open at a time.
The actual page
I kept the desktop filter menu visible on one side to help reduce potential back-and-forth between filter options and the shopping list, which would happen with a dropdown menu. This also allowed us to set up heat maps and learn what users were clicking on the most.
Cart
Saie needed a way to display all of the products added to the cart, special promotions, as well as a cross-selling panel within the cart to increase AOV (average order value). I experimented with a couple different layouts and eventually went with one that more users would be familiar with, since the end goal is to make it as easy as possible for users to complete checkout to improve conversion rates.
Design exploration
option 1
I placed the subtotal underneath the actual products in the cart, and product recommendations underneath to show that they weren't included in the subtotal. We did not choose this layout because it's uncommon with other e-commerce sites and the subtotal might be easy to miss.
option 2
This version took up too much horizontal real estate and required users to scroll through everything before they could see the subtotal. We did not choose this version because we wanted to reduce all potential friction before checkout.
option 3
This version is most similar to other ecommerce brands and would be more familiar to our audience.
Landing page template
Saie wanted us to create a reusable template for multiple marketing landing pages where only the content needed to be switched out. We reused existing modules (mostly from the V1 homepage redesign) for most of this landing page to reduce build time due to project constraints. Note that all modules were still designed by yours truly.
Their ask was to showcase multiple products with a product description, testimonial, and CTA button for each. The client also wanted each product to have the same weight on the page.
Impact
- Worked to reduce bounce rate to between 20-45% from between 74.24-85.63%
- Increased conversion rates for paid traffic to 3-5% from the existing rates of between 1.37% to 2.97%
Your web site is great — easy to navigate with great help choosing what colors are best for you. Thanks again. I look forward to trying many of your products.
-Maura
Learnings and next steps
I had a great time working with Saie for 3 years, and am proud that I helped design most of their site and made a significant impact doing so.
Since we worked with them to plan their website strategy, most of the items on their list for the rest of 2023 just include seasonal marketing efforts, though I am definitely keeping an eye out for any future product bundling they might launch, as I helped design V1 before the project was tabled for a new Shade Finder instead!