Fresh.com Redesign
A business priority to redesign and elevate primarily the Homepage, Product Listing Pages, and Product Detail Pages on the fresh website, I was the In-house Creative Lead working very closely with our agency to implement the brand codes, user interview feedback and metrics pulled from our site audits.
Project Scope: 4 months
Category: Website Redesign, Site Audit, User Testing
Role: In-house Creative Lead, UX & UI Design, Prototyping
Tools: Figma, Baymard Institute Audit
the challenges
The scroll rate on homepage as well as engagement on PDP were low
From user interviews, users felt certain elements on site were distracting and overwhelming
Site navigation was too granular and difficult to way find
the goals
Elevate the site design to align with the evolving brand styling
Increase engagement and conversion on PDP
Optimize space on PLP to allow for subcategory promotions and additional campaign content
key findings
From the Homepage, Product Listing Pages, and Product Detail Pages
Homepage
Dated design on homepage felt overwhelming and cluttered
Illustrated badges placed on every product SKU looked elementary and “childish”. This confused users even more. “Did not feel luxurious”
Product Listing Pages
Filtering on PLP took up too much room at the top and was difficult to scan and navigate quickly
Pack shots and badges on PLP made page “feel busy”
PLPs have the longest time spent and was a priority
Product Detail Page
Cluttered information above the fold on PDP was overwhelming
Product information lacked hierarchy for users; priority varied from market to market
Product Detail Page continued
Users missed the educational and efficacious information within the closed tabs on the PDP and users were looking for these details
Reviews and photos from past customers were more important to users than brand product carousel at top - needed to reprioritize information on PDP
Final Outcome
Global Navigation
A sub-menu (top left) was introduced to allow each market to personalize their main navigation while still aligning to the global recommendation per our site audit. For example, the US market prioritized the Rewards program and others prioritized the brand's blog with curated stories and content.
Homepage Imagery
Working closely with the Creative Team to shoot sleek product shots with similar shadow treatments on a neutral background, this elevated the brand's look across all product listing pages and product carousels on the site.
Creating a global template for the homepage
Per market feedback, we received consistent notes to have optional content blocks for markets to use for different holidays and collaborations. Globally, we landed on the following cadence and agreed on showcasing the brand's core values and commitment to sustainability to round out the homepage.
Elevated packshots
Understanding from the site audit that the user would seek out and spend more time on texture and application images, we pushed close-up texture shots as the secondary image.
Consistent Tagging
In addition to imagery, tags (ie New, Best Seller, Limited Edition) were inconsistent on all market sites and needed to a sleek facelift for the redesign. We aligned on a global application to tags (seen in blue above each product) to prevent inconsistency across the markets.
Consolidated Master SKU
Lastly, a master SKU was added to combine a single product with several sizes. This allowed us to control which product size displayed, which was key with limited edition product promotion.
Redesigning filtering
Additionally, filtering on the PLP was redesigned. Previously when used, filtering would push the content down and take over a good portion of the screen. With the redesign, we updated to a drop down menu and live filtering which allowed the user to see the applicable products as they filtered.
Showcasing the stunning images
Per our audit, we discovered our end user did a lot of research before purchasing. We decided on an exposed grid, instead of the previous carousel, and additionally, established a cadence for the images for all the markets – recommending: 1st product shot with texture, 2nd texture close up, 3rd application, 4th cross sell, 5th routine.
Creating a strong hierarchy for the product details
With the challenge of what to prioritize which varied during market feedback vs what the end user clicked on the most, we landed on providing an area below the Add To Cart button for additional, curated content for the markets while exposing the tabs (What it is, etc) which had the highest click rates understandably (initially in the old design this was hidden).
Exposing the efficacious information
The above design prioritized showing off the efficacious information, which was initially contained in closed tabs and missed by the end user on the previous design. Showcasing more hi-res texture and ingredient shots, video content, and allowing past purchasers to upload images with their reviews, the elevated PDP design was a collaborative effort with the creative team and increased the average time spent on the PDP, a key business goal.
