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.
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.
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.
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.
I used a slideout panel for the ingredients list, utilizing the existing interactions from their Saie Standards page to reduce build time.
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.
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.
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.
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.
This version allows easier tap targets on mobile, but it did get quite long with the amount of filters we wanted to test.
This version proved less overwhelming, since only one category is open at a time.
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.
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.
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.
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.
This version is most similar to other ecommerce brands and would be more familiar to our audience.
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.
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.
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!