Bird's Cookies
E-commerce Cookie Website Redesign
Overview
Redesigning Byrd’s Cookies for clarity and confident shopping
On Byrd’s Cookies’ website, users struggled to quickly find the products they wanted, access useful information, or build enough trust to feel confident making a purchase.
To address these issues, I restructured the site’s information architecture and redesigned key sections—including the navigation, product detail page, and review feature—to create an experience that more closely aligns with how users naturally browse and interact.
I also refreshed the overall UI to increase visual appeal and encourage users to explore more products and engage with site features.
Impact
Driving engagement and purchase confidence through a clearer shopping experience
The redesigned site helped users find relevant products faster, understand key details at a glance, and feel more confident through improved content clarity and trustworthy reviews—encouraging engagement and streamlining the path to purchase.
45%
User Engagement
65%
Time to Access Key Info
30%
Time to Checkout
Problem 01
Users couldn’t easily navigate the site to find the right products
The site’s navigation relied on vague, flavor-based labels like “Sweet” and “Salty,” which didn’t match how users typically browse. Most preferred to explore by product type rather than by taste.
Before
Additionally, the navigation lacked subcategories and descriptive text, forcing users to repeatedly enter each section to find what they needed—an inefficient process that often led to confusion, frustration, and abandonment.
Solution 01
Method
Using card sorting to align navigation with user expectations
I conducted a closed card sorting study to understand how users naturally group products.
Strategy 01
Redesigning navigation for clearer, product-oriented browsing
I then restructured the navigation, replacing vague labels like “Sweet” and “Salty” with clearer, product-based terms such as “Cookies” and “Biscuits & Bits.” All category names were refined using UX writing principles for clarity and ease of use.
After
Strategy 02
Improving category clarity through visual submenus
For each main category, I designed a hover-activated dropdown that shows visual subcategories (e.g., Fruit, Nutty), each with a short description to help users quickly understand the differences.
Each dropdown includes a “View All” link, letting users access the full category page to browse all related products.
After
Problem 02
Users couldn’t easily get the product details they needed
On the product detail page, users couldn’t easily find key details like calories or allergen information—even though those were important for their decisions. There was no direct way to buy right away, and adjusting the quantity felt clunky—making it harder to act quickly.
Before
Solution 02
Clearer layout and key info to support fast decisions
I redesigned the product detail page by restructuring the information architecture and improving the visual hierarchy and content grouping. Key details were reorganized to match users’ browsing flow and made easier to scan.
After
I added prominent elements like calorie and allergen information, and introduced a “Buy Now” button along with a quantity selector to reduce interaction friction and support quicker purchases.
Problem 03
Users couldn’t easily find reviews that felt relevant or reliable
The product review section was hard to use—every comment looked the same, making it difficult to tell which reviews were relevant, helpful, or trustworthy. Users had to scroll through everything one by one, slowing down their decision-making.
Before
Solution 03
Redesigned review access to support quick judgment
I redesigned how users access reviews—no more scrolling to the bottom. A click on the top-right rating badge opens a floating review panel, with scores shown clearly through stars and numbers. This modal view keeps users in context and brings feedback to where decisions happen.
After
Redesigned the review panel to speed scanning and build trust
I redesigned the review panel to make feedback easier to scan, filter, and trust. Feature tags (e.g., “Rich Flavor”, “Chewy”) help surface product traits at a glance. A “Was this helpful?” voting system builds trust and interactivity, while sorting and filtering options allow users to customize how they view feedback.
Other highlights
Redesigning the hero for stronger visual and emotional impact
I redesigned the entire hero section with a more visually impactful, ingredient-focused focal point to enhance the sensory appeal and emotional resonance of flavor. The result is a homepage that feels more visually engaging.
Before
After
Redesigned the bestseller section to support purchase decisions and encourage impulse buying
I redesigned the static “Favorites” row into an interactive Bestseller module that spotlights one product at a time with ranking tags like “Top 1” and clear key info. Action buttons like “Add to Cart” and “Buy Now” let users purchase instantly without visiting the product page—encouraging impulse buying.
