​
Ranavat.com Refresh
Following a site audit, I was tasked with elevating the website and solving the pain points we discovered primarily on the Product Detail Pages, Product Listing Pages, and the cart to start.
I was the In-house Senior UX/UI Designer working very closely with our audit agency, development team, and marketing team to implement a new elevated website style guide inclusive of new responsive component blocks, as well as refresh imagery across all PDPs to showcase more efficacious, impactful product details.
Project Scope: 2 months
Category: Website Redesign, Site Audit, Responsive Site
Role: In-house Creative Lead, UX & UI Design, Prototyping
Tools: Figma, Shopify
the challenges
Pushing for more social proof across the website to decrease the drop off rate and build trust
​
Elevating and maintaining a luxury standard across the brand's voice, creative direction, and all digital and print touch points
​
Showcasing more clinical and consumer study results earlier on the PDP while balancing the story and inspiration behind the product
the goals
With 85% of users viewing on mobile, we aimed to optimize space and content across the website to allow for more impactful, engaging content
​
Elevate the site design to align with the evolving brand styling
​
Increase engagement and conversion on PDP and the cart
​
​
key findings
From the Product Detail Pages, and Product Listing Pages, and Cart
Product Detail Page
Many users are clicking on image carousel which indicates they want to enlarge and see the details to understand the product and quality better
​
There is a high number of clicks on the accordion revealing product details. It shows users want to learn more about the product before making a purchase decision
​
Number of clicks is high on data points because text is not readable. User are struggling to get the details they need
Product Listing Page
High number of users clicking the main navigation indicates they struggle with product discovery and have a hard time finding the right product fit
​
Listings should start above the fold speeding up the product discovery process for the user. This can increase engagement and potentially boost conversion rates
Cart
Update to full takeover to prevent user distraction and drop off and improve responsiveness of content blocks focusing on mobile viewing of product details, images, elements, etc
​
Improving cross-sell offers styling on the shopping cart page can enhance their visibility and appeal. Aesthetic and well-presented recommendations can encourage additional purchases, increasing average order value and conversion rates.
​
Include installment payment information can reduce hesitation and potentially increase conversions by making it easier for visitors to afford their purchase
Final Outcome
Optimized Imagery & Interactive Elements
Starting with the top image carousel, the image was enlarged to 50% of the screen above the fold, and with the addition of a Pinch & Zoom feature to the lightbox, this allowed the user to view product texture, clinical and consumer results, and before and after shots more easily.
Scannable Copy and Product Detail Exposed
Product details were brought out of the accordion layout and exposed to be more scannable with icons, video and interactive elements presenting the product information quicker to the user.
Desktop View of Product Detail Page
Desktop View of Real Results, Ingredients, and Routine Sections
For the refresh, I also included a new Product Detail Template for Sets to showcase each individual product, benefit details, and the recommended routine.
 |  |  |
|---|---|---|
 |
Creating Elevated, Responsive Content Block Templates
From mobile to desktop viewing, I prioritized designing responsive content block templates to allow for flexibility for future campaigns and landing pages. I worked closely with the development team to make sure these templates were easy to implement, fully responsive and accessible for the team to use and manually build pages within Shopify.
Optimizing Filtering & Sorting on PLPs
With the redesign, I consolidated and added appropriate categories allowing the user to navigate faster thru the product listings. Additionally, new tag options were added that could be turned on and applied to product tiles to further differentiate products (ie Award Winner, Editor's Pick, Online Exclusive, Buy It Again)
Transition to a Full Cart Takeover to Prevent Distraction and Cart Abandonment
With the refresh, I updated the Cart page to a full take over (previous a fly out component). Elevating the cart page to include an area for more personalized cross selling and additional areas to promote more content (ie Loyalty Program), the final design especially on mobile optimized the real estate and provided less distraction helping to decrease abandonment.
