Tarte Cosmetics E-Commerce
.avif)
Project Overview
Tarte sought a website redesign redesign to enhance the user experience and drive more customer engagement. As a UI Designer, my tasks included conceptualizing, UX research, wireframing, and visual design.
Challenge
Tarte's digital presence was inhibited by their outdated user experience and needed a refresh to captivate their Gen Z audience.
Solution
To elevate the site, the NY Merkle studio embarked on a UX/UI redesign to rejuvenate their website with a transformation that includes a social-first approach and a clean visual design.
The Process
Throughout the project, we researched best practices and started with wireframing to jot our ideas down. Then, we would add in visual design and present to the client in each drop. We would receive feedback and update our designs from there.
A proposed site design for the PDP, with annotations on the sides
Comparison of past site design & proposed design with reasoning
We would analyze & ideate while we would make wireframes
We designed multiple versions of the flow before picking one
Key Features
Home Screen
We revamped the home screen with a social-first approach in mind. We added new features, such as a Currently Trending section, where the user can shop the featured products straight from Tarte's TikToks and add it to their carts, and a Virtual Try-on section, which is also accessible via the PDPs.
"Currently Trending" Section
To incorporate the social-first approach into the homepage, we added a "Currently Trending" section where a user can shop from TikToks posted by Tarte. The user can watch the TikTok, click on the featured product, and add it to their cart.
.gif)
PDP
We gave the PDP a refresh by using our new design system. We rejuvenated the experience with a clear visual identity, and we added new features such as a "How to Use" section where the customer can learn how to use the product with a video + instructions, and a carousel of Instagram posts pulled from customers & influencers that are wearing the product.
PDP to Order Confirmation Flow
We enhanced this process and ensured that it is seamless. The customer can easily select shades and add them to their bag via our sticky footer, which overlays as a drawer when a CTA is selected. From there, the user can choose to view their bag or continue shopping, and they can also scroll through product recommendations that are usually bought with the product they added to their bag. Once they're in their shopping bag, they can start the order process and make their purchase.
Note: the navigation bar is pinned when scrolling through PDP and throughout the process of making a purchase.
.png)
PDP
PDP with sticky footer
Select Shade Drawer
.png)
User adds product to bag
.png)
User is taken to shopping bag
.png)
Scroll down to Checkout CTA
.png)
Order Summary in Shipping State
.png)
Order Review
.png)
Scroll down to place order
.png)
Order Confirmation
Design System
Our design team established a new design system in Figma, where we enhanced their existing visual identity and pushed it further to refresh it. This included a comprehensive set of new typography, colors, CTAs, forms, grids, badges, and modals. We focused on creating clean and cohesive visuals while adhering to the brand guidelines.
.png)
Takeaways
We delivered a rejuvenated design that enhanced the e-commerce experience for Tarte's audience. This has increased the site's conversion rate as well as their customer engagement. Because of its impact, the client was satisfied with our redesign and strategy.