Homepage
The homepage is where trust is established before a parent ever clicks into a product. For The Clean Bean, that meant immediately communicating curation, safety, and intention — not just selling items, but guiding parents through choices they can feel confident about. As a marketplace for clean baby and household goods, the homepage needed to balance education with efficiency, reassuring parents that the research had already been done so they didn't have to second-guess every decision.
Scroll down for the full case study, or read the snapshot summary below.
Snapshot Summary
Summary
The Clean Bean is a curated online marketplace for clean, safe, and parent-approved baby and household goods. The brand's value is rooted in trust — removing guesswork for parents by vetting ingredients, brands, and products before they ever reach the shelf.
The homepage was responsible for communicating that trust immediately. My role was to redesign the homepage to clearly explain what The Clean Bean is, how it's different from a typical marketplace, and why parents could feel confident shopping there. The focus was on clarity over clutter, guidance over volume, and creating an experience that respects how busy parents actually shop.
Transformation Statement
The result is a structured, trust-first experience that reduces decision fatigue, and clearly positions The Clean Bean as a thoughtful guide. The redesign of the homepage also helps parents feel supported and confident from the moment they arrive.
Key Outcomes
+25% increase in orders
+5% increase in AOV
+5% increase in overall sales
Reduction in decision fatigue for first-time shoppers
Stronger trust signals
My Role
Senior Product Designer
UX Architecture · Design Systems · Research · Cross-Functional Delivery
Goal
Create a homepage experience that quickly communicates trust and curation, guiding parents with confidence instead of overwhelm.
This wasn't a visual refresh. It was about establishing a thoughtful framework that supports how parents shop and make decisions.
Scope
Team: Georgia Tan - Graphic Designer
Timeline: 4 weeks
Platform: Shopify
Role
Senior Product Designer — Led complete homepage redesign from research to launch.
Built reusable component system and collaborated across CEO, Marketing, Ops, and Engineering teams.
Business Impact at a Glance
Impact Metrics
+25%
Increase in orders
Improved homepage clarity and guidance helped more parents confidently move from browsing to purchase.
+5%
AOV increase
Clearer curation and product pathways encouraged customers to add with confidence.
↓
Support volume
Stronger trust signals and clearer expectations reduced uncertainty and repeat questions.
+5%
Overall sales growth
A more intentional homepage experience translated directly into measurable revenue impact.
Faster
Product discovery
Clear hierarchy and navigation helped parents find what they needed without friction.
Stronger
Trust signals
Curation, education, and social proof worked together to build confidence from the first scroll.
Overview
For parent-focused e-commerce, the homepage carries the first and most important trust signal.
At The Clean Bean - a curated marketplace for clean, safe, and parent-approved baby and household goods - where first impression mattered. The homepage introduced a large amount of information immediately, combining product discovery, and brand messaging at once. While trust signals and educational content were present on product pages, they were not a main focus, making it harder for parents to quickly understand what was vetted, why it was safe, and where to begin.
I led the end-to-end redesign of the homepage, focusing on information hierarchy, storytelling, and the underlying system that guides parents from initial arrival to confident exploration. The goal was to create a calmer, educational, and more supportive entry point that reflects how parents actually shop.
What we delivered became more than a homepage refresh. It established a clear, repeatable framework for how The Clean Bean communicates trust, curation, and intention across the experience.
My Role & Responsibilities
Senior Product Designer
Led the complete homepage redesign from research through launch
Designed the information architecture and core user flows
Built a reusable, modular component system for the homepage
Developed Shopify Liquid components
Established a scalable product page
Collaborated closely with Founders & the Graphic Designer to align vision, strategy, and execution
What I Uniquely Contributed
This was a focused, collaborative effort, and I led the homepage redesign end to end — from discovery through launch.
My Role
Here's what I brought to the table:
- 🔍RESEARCH
Research & Insights: I analyzed how parents were interacting with the homepage by reviewing on-site behavior, common questions, and points of hesitation.
A clear pattern emerged: parents weren't unsure about the products themselves — they were unsure where to start, how items were curated, and what signals to trust first. These insights directly shaped the redesign.
- 🎯STRATEGY
Strategic Framework: I established a clear set of guiding principles to anchor the work:
Lead with reassurance. Reduce cognitive load. Guide parents step by step. Use education to support confidence, not slow it down. Design mobile-first, without compromise.
This wasn't just a homepage update — it was a framework for how The Clean Bean communicates trust and curation.
- 🏗️SYSTEMS
Design System: I designed a modular homepage system built from reusable patterns - hero messaging, trust indicators, curated collections, educational callouts, and navigation patterns.
- 🤝COLLABORATION
Focused Partnership: I worked closely with the Founders to align on brand mission, curation standards, and long-term vision, and with the Graphic Designer to ensure visual consistency, tone, and execution across the homepage.
This tight collaboration allowed decisions to move quickly while staying deeply aligned to the brand.
The Challenge
What I Found
Parents shopping for baby and household essentials move carefully, even when they're moving quickly. They scan with urgency, but their decisions are deliberate. They want to feel confident that products are safe, thoughtfully curated, and aligned with their values — without needing to research every ingredient or brand on their own.
The existing homepage wasn't fully supporting that behavior. Information arrived all at once. Education, curation, and product discovery competed for attention. Trust signals were present, but easy to overlook, especially on mobile. The experience required parents to pause and interpret instead of guiding them forward.
The result was hesitation. Not confusion about products — but uncertainty about where to begin and what to trust first. That moment of friction risked drop-off and quietly undermined the sense of reassurance The Clean Bean is built to provide, pointing to the need for a clearer, more intentional design.
Original Homepage Design
Strategy
How I Approached It
Guiding principles: Lead with reassurance. Anticipate how parents look for answers. Reduce cognitive load early.
Use education to support confidence, not slow it down. Make mobile feel effortless.
The focus wasn't on creating a broad system - it was on designing a homepage layout that clearly guides parents. This included introducing a searchable knowledge base for common questions, surfacing product reviews in a more meaningful way, and connecting those reviews to real customer purchases across both the homepage and product pages.
Information Architecture
How the homepage structure evolved from overwhelm to guidance.
Before
- •Parents had to scroll, scan, and interpret where to begin
- •Education, curation, and discovery competed for attention
- •Trust signals and key explanations were easy to miss
- •No clear entry point or directional flow
After
- •Each section serves a single, clear purpose
- •Education appears when it's most helpful
- •Trust signals are surfaced early and reinforced throughout
- •A guided, conversational flow that leads parents forward
How the Homepage Now Guides Parents
Feel reassured immediately
Clean, curated, parent-approved products — clearly communicated from the first scroll.
See how products are vetted
Clear standards, trusted brands, and real parent reviews establish confidence early.
Find answers when questions arise
Searchable knowledge base and contextual education remove guesswork without slowing parents down.
Shop with confidence
Parents move into product discovery feeling informed, supported, and ready to purchase.
System Architecture
Design Tokens
Components
Patterns
Pages
Integration Points
Figma Library
Design Specs
Storybook
Component Docs
React/TS
Production Code
What I Discovered
Key insights from research that shaped the homepage redesign.
Decision Fatigue
Parents weren't struggling with the products — they were overwhelmed by where to begin. Too much information surfaced at once made it harder to move forward confidently.
Takeaway: The homepage needed clearer guidance and fewer competing messages early on.
Trust Needs to Be Immediate
Parents looked for reassurance right away — how products were vetted, what standards were used, and whether other parents trusted them.
Takeaway: Trust signals had to appear early and repeat throughout the homepage, not live in isolated sections.
Education as Support, Not Friction
Parents actively searched for answers to common questions, especially around ingredients, safety, and usage.
Takeaway: Introducing a searchable knowledge base turned education into a support tool instead of a barrier.
Mobile-First Reality
A significant portion of traffic came from mobile, where dense layouts made scanning and comprehension harder.
Takeaway: The homepage needed mobile-first spacing, hierarchy, and clearer content prioritization.
Social Proof Matters More When It's Specific
Generic reviews were less impactful than seeing what other parents actually purchased and trusted.
Takeaway: Product reviews needed to feel contextual and real — connected to actual customer behavior across the homepage and product pages.
Approach & Process
A systematic journey from research insights to systemized implementation, with key decision moments highlighted throughout.
Research & Insights
Understanding mental models and friction points
Strategy
Exploring systemized patterns
Information Architecture
Refining tokens, components, and flows
Component System
Cross-functional implementation
Final Experience
Performance, QA, rollout, and iteration
01 Research & Insights
Research
2 weeks
I analyzed how parents were actually navigating the site through user interviews, session recordings, screenshots, recurring questions, and competitive analysis.
I analyzed how parents were actually navigating the site through user interviews, session recordings, screenshots, recurring questions, and competitive analysis. A clear pattern emerged: parents weren't confused by the products themselves - they were uncertain where to start and how to interpret trust signals on the page.
Key Insights
Insight 1: Parents wanted clearer guidance — not more products — to help them decide where to begin.
Insight 2: Trust needed to be visible early and reinforced through social proof, especially through reviews from other parents.
Insight 3: Mobile users were overwhelmed by dense layouts and hidden educational content.
Insight 4: Reviews carried more weight when they were specific and contextual, not generic or isolated.
Decision Moments
Deliverables
My Contributions:
- •Conducted user interviews with 6 parents with children ranging in age from 4 months old up to 2 years old
- •Created competitive analysis and design audit
- •Synthesized research findings into actionable insights
02 Strategy
Ideation
1 week
Trust comes from clarity.
Not from stripping things away — but from guiding parents at the right moments. I established a set of principles to shape every decision on the homepage: Guide before selling.
Reduce cognitive load early. Surface education when questions naturally arise.
Make mobile scanning effortless. The focus wasn't on building a complex system or redesigning for scale.
The focus wasn't on building a complex system or redesigning for scale. It was about creating a homepage experience that clearly communicates curation, surfaces answers quickly, and helps parents move forward with confidence.
Key Insights
Insight 1: The homepage needed to act as a guide, not a catalog.
Parents arrive looking for reassurance and direction before they’re ready to browse products.
Insight 2: Trust is established through visible curation and social proof.
Insight 3: Education as a conversion tool, not just information.
Insight 4: Clear hierarchy reduces decision fatigue.
When each section has a single purpose, parents can move forward without stopping to interpret what comes next.
Decision Moments
Deliverables
My Contributions:
- •Led design workshops with cross-functional team
- •Created initial concept sketches and user flows
- •Established design principles and system architecture
03 Information Architecture
Design
2 weeks
Before: Parents scanned, scrolled, and tried to piece together where to begin.
After: Each section serves a single, clear purpose with a predictable placement. The homepage now flows like guidance rather than a collection of content - introducing trust first, then education, then curated products.
Start with reassurance. Find answers when questions arise.
Explore products with confidence. The experience no longer asks parents to interpret the page - it supports them as they move forward.
Key Insights
Insight 1: Clarity comes from predictability.
When each section has a single, defined purpose, parents don't have to stop and interpret what comes next.
Insight 2: The homepage needed to guide parents like a conversation - establishing reassurance first, then answering questions, before introducing products.
Insight 3: Mobile had to be the primary design lens.
Parents are scanning quickly, often one-handed, and the experience needed to support that reality.
Insight 4: Trust couldn't be confined to a single section.
Reassurance needed to be introduced early and reinforced consistently as parents moved down the page.
Decision Moments
Deliverables
My Contributions:
- •Designed all high-fidelity mockups and prototypes
- •Created comprehensive component library in Figma
- •Established design token system (colors, spacing, typography)
- •Built interactive prototype for user testing
04 Component System
Development
2 weeks
I designed and implemented a set of homepage features focused on clarity, guidance, and trust.
This included a searchable knowledge base for common questions, a structured product review section, and clearer content modules to surface curation standards and reassurance early. Alongside the homepage work, I began establishing a lightweight design system to support consistency as the site evolves.
Core patterns for layout, spacing, typography, and content modules were defined and applied where possible, with ongoing implementation planned beyond this release. Reviews were designed to carry more meaning by showing what real customers purchased and trusted, and were intentionally connected across both the homepage and product pages to reinforce confidence throughout the journey.
Reviews were designed to carry more meaning by showing what real customers purchased and trusted, and were intentionally connected across both the homepage and product pages to reinforce confidence throughout the journey. The focus wasn't on building a fully mature system yet — it was on creating a strong, consistent foundation that could scale thoughtfully as The Clean Bean continues to grow.
Key Insights
Insight 1: Each homepage feature needed to work independently while still feeling cohesive.
Insight 2: Reviews were most effective when structured and contextual, showing what real customers purchased rather than presenting generic social proof.
Insight 3: Mobile interactions required extra care - key content and actions needed to be easy to scan, reach, and understand without friction.
Insight 4: Consistency mattered more than complexity - establishing clear patterns for layout, spacing, and content created confidence even as new features were introduced.
Decision Moments
Deliverables
My Contributions:
- •Created Storybook documentation for all components
- •Ensured pixel-perfect execution and responsive behavior
- •Conducted accessibility audits and fixes
05 Final Experience
Launch
1 week
The redesigned homepage guides parents naturally — leading with reassurance, answering questions as they arise, and then introducing curated products with clarity.
Education is surfaced through a searchable knowledge base, reviews are contextual and tied to real purchases, and trust signals appear throughout the journey rather than at the end. The result is a smoother, calmer experience - one that replaces overwhelm with guidance and helps parents shop with confidence from the very first scroll.
Key Insights
Insight 1: Inline education at decision moments increased confidence and conversion.
Insight 2: Sticky mobile ATC reduced friction for mobile shoppers.
Insight 3: Trust signals embedded throughout the journey, not just at checkout.
Insight 4: Animated price changes provided real-time feedback during customization.
Decision Moments
Deliverables
My Contributions:
- •Set up analytics tracking and A/B test framework
- •Monitored user behavior and identified optimizations
- •Created handoff documentation for future iterations
Final Experience
The redesigned homepage replaces guesswork with guidance
The Transformation
What Changed
Core Improvements
+25%
Increase in orders
+5%
Increase in average order value
+5%
Increase in overall sales
Before & After
Original Homepage
The original homepage relied on inconsistent textual elements, dense information, and inconsistent spacing. Key information was difficult to surface quickly, and the overall homepage lacked a clear sense of guidance or hierarchy.
Redesigned Homepage
The redesigned homepage prioritizes clear visual hierarchy, larger lifestyle product imagery, and more intuitive navigation. The homepage now feels intentional and trustworthy, aligning more closely with The Clean Bean's values and guiding parents with confidence.
User Flows
Key user journeys mapped to show how the design system supports critical conversion paths.
Primary User Journey
Land
Browse
Select
Add to Bag
Checkout
Flow Steps
- 1User lands on category or search results page
- 2Clicks product card to view details
- 3Reviews product imagery and key information
- 4Explores variants (size, color, material)
- 5Reads product specifications and care instructions
- 6Makes purchase decision
Design Decisions
Reassurance-First Visuals
Prioritized larger, clearer imagery paired with supportive messaging to reassure parents
The homepage needed to immediately signal trust and care. During user interviews, I noticed parents lingering on imagery, trying to understand how products were used, their size, and whether they felt safe for their family. When visuals felt too small or disconnected, hesitation followed. I redesigned the homepage to prioritize larger, clearer imagery paired with supportive messaging — not to impress, but to reassure. Visuals became a way to quickly answer unspoken questions and help parents feel oriented before scrolling further.
Impact:
Improved engagement with homepage content and increased confidence moving into product exploration.
Focused Homepage Navigation
Simplified flow and guided attention intentionally to reduce friction
The original homepage asked parents to take in too much at once. Multiple competing sections and pathways made it harder to know where to begin. Rather than adding more, I focused on sequencing and emphasis — making sure each section earned its place. By simplifying the flow and guiding attention intentionally, parents could move forward without stopping to interpret the page.
Impact:
Clearer entry points and smoother progression through the homepage experience.
Guided Disclosure of Information
Structured homepage to reveal information progressively based on parent needs
Parents didn't want all information at once — they wanted answers when questions came up. Some wanted to understand safety standards immediately. Others wanted reassurance through reviews before browsing products. I structured the homepage to reveal information progressively: reassurance first, education when needed, and products once confidence was established. This respected different decision styles without overwhelming anyone.
Impact:
Stronger engagement with educational content and reduced decision fatigue.
Contextual Reviews & Social Proof
Redesigned reviews to show what real customers purchased and trusted
Reviews were redesigned to carry more meaning by showing what real customers purchased and trusted. Instead of treating reviews as an afterthought, they were surfaced intentionally throughout the homepage and connected to product pages. This helped parents see themselves reflected in other customers' decisions, reducing uncertainty and building confidence organically.
Impact:
Stronger trust signals and improved movement from browsing to purchase.
Business Results
What Changed Measurably
Quantitative
+25%
Orders
Increase in completed purchases following the homepage redesign
+5%
Average Order Value (AOV)
Higher confidence and clearer guidance encouraged more complete carts
+5%
Overall Sales
Homepage improvements translated directly into measurable revenue growth
Qualitative
Increased Parent Confidence
Parents feel more assured about their choices before purchasing
Clearer Decision-Making
Information is easier to scan, understand, and act on
Reduced Support Friction
Embedded education answers common questions earlier in the journey
Stronger Brand Trust
A consistent, reassuring experience reinforces credibility and care
Design System Impact
What began as a homepage redesign quickly surfaced patterns worth formalizing. As part of the work, I created a set of reusable components to support consistency across the homepage and future pages — from layout sections and content modules to review and education patterns.
Working closely with Georgia Tan, we used these components to reduce repetition and keep visual decisions consistent as the experience evolved. Instead of redesigning the same elements repeatedly, we could focus on refining how the homepage communicated trust, clarity, and guidance.
Even in its early stages, the design system helped speed up iteration and reduce guesswork. New pages and updates were easier to assemble because the foundations were already defined. The system didn't aim to be exhaustive — it aimed to be practical, creating a strong base the site could continue to build on thoughtfully.
Reusable Homepage Components
Used consistently across the homepage to improve clarity, speed iteration, and reduce rework during updates.
Faster Iteration Cycles
Reduced time from design changes to implementation by establishing clear, reusable foundations.
Improved Visual Consistency
Resulted in a more cohesive, intentional experience that reinforced trust and guidance.
System Integrations
Design System Components
This system is built around composable, reusable components designed to scale across the entire product experience. Components are not page-specific designs, but system-level building blocks governed by shared rules, variants, and states—constrained to prevent drift as the product evolves.
Homepage Hero
--homepage-heroPurpose
Serves as the primary entry point for parents, establishing trust, brand intent, and emotional reassurance within the first viewport.
Usage Rules
- Used only once at the top of the homepage
- Introduces brand promise, curation standards, and reassurance
- Sets the tone for the rest of the page flow
- Should not be repurposed for secondary marketing sections
Variants
- Standard (headline + supporting copy)
- Trust-Led (headline + reassurance cues)
Variants support messaging needs while maintaining a consistent layout and hierarchy.
States
- Default
- Content Loaded
Homepage Hero Component
Education & Knowledge Base Module
--education-modulePurpose
Provides parents with fast, searchable answers to common questions without interrupting their browsing flow.
Usage Rules
- Used on the homepage as an embedded education entry point
- Surfaces common questions, standards, and explanations
- Designed to reduce support dependency and decision hesitation
- Should remain concise and scannable
Variants
- Search-Focused
- FAQ-Focused
Variants allow different education depths while preserving interaction patterns.
States
- Default
- Expanded
- Search Active
- Empty / No Results
Education & Knowledge Base Module Component
Reviews Module
--reviews-modulePurpose
Builds trust by surfacing real customer feedback and purchase behavior, helping parents feel confident moving forward.
Usage Rules
- Used on the homepage and throughout product pages
- Displays reviews with contextual purchase signals
- Reinforces reassurance throughout the browsing journey
- Should not appear as a single isolated block only at the end
Variants
- Homepage Summary
- Product-Linked
Variants support different levels of detail while maintaining visual consistency.
States
- Default
- Loading
- Expanded
Reviews Module Component
Collaboration & Teamwork
Cross-Functional Partnership
The Clean Bean homepage redesign was a focused collaboration between myself and the founding team, working closely with Georgia Tan as Graphic Designer. With a small team, alignment happened quickly and intentionally - decisions were made collaboratively, with shared clarity around brand values, curation standards, and how parents should feel when arriving on the site. Because everyone was aligned early, the work moved efficiently. There was a shared understanding not only of what was changing on the homepage, but why those changes mattered for trust, clarity, and confidence.
Team Members
Founders
Founding Team
Brand vision, curation standards, and strategic alignment
Georgia Tan
Visual Design
Graphic Designer — visual direction, brand expression, and supporting assets
Tools & Platforms
Key Outcomes
- •Maintained tight alignment across design, brand, and execution despite a small team
- •Designed and implemented homepage features that balanced education, trust, and clarity
- •Introduced reusable homepage components to support consistency as the site evolves
- •Established a strong foundation that enables faster updates and future growth without rework
What Would I Do Next?
The homepage redesign established a clear, trust-first foundation - but there are meaningful opportunities to deepen guidance and continue reducing hesitation. Here's how I would evolve the homepage next:
Personalized Homepage Guidance
Use browsing behavior and entry points (first-time vs returning parents) to subtly adjust homepage messaging, featured education, and curated collections — helping parents see what's most relevant to them sooner.
Smarter Education Surfacing
Expand the knowledge base to dynamically highlight the most-searched questions and recent concerns, ensuring education continues to meet parents where uncertainty shows up most.
Deeper Review Context
Enhance the reviews module to surface patterns like "most purchased by parents of newborns" or "frequently bought together," adding another layer of reassurance without increasing cognitive load.
Homepage Flow Testing
Run A/B tests on section order, trust-signal placement, and education entry points to further refine how parents move from reassurance to product discovery.
Performance & Accessibility Refinements
Continue improving image loading, interaction responsiveness, and accessibility to ensure the homepage remains fast, inclusive, and easy to navigate — especially on mobile.
What I Learned
Confidence comes from guidance.
Parents don't rush through decisions — especially when it comes to products for their families. They pause, scan, and look for reassurance that choices are safe, vetted, and trusted by others.
The original homepage created moments of confusion: "Where do I find what will work best for my child?" That uncertainty slowed decision-making. The redesign focused on building confidence at every step — through clearer hierarchy, visible trust signals, and intentional pacing.
Education supports decisions when it's easy to access.
Parents weren't confused by the products - they were looking for answers. Ingredients, standards, and real-world use mattered, but only if information was easy to find.
By embedding a searchable knowledge base and surfacing education contextually, answers appeared at the moment questions arose - not buried on separate pages. Education became supportive instead of overwhelming.
Foundations enable consistency.
While the project focused on the homepage, repeated patterns quickly emerged. I defined reusable components for layout, content modules, reviews, and education to maintain consistency as the site evolves.
These components created a lightweight foundation - not a fully mature system yet, but a practical base that reduced rework and supported future growth.
Focused collaboration accelerates progress.
This work was completed in close collaboration with the Founders and Georgia Tan as Graphic Designer. Alignment on brand values, curation standards, and visual direction allowed decisions to move quickly and stay cohesive.
Everyone understood not just what changed - but why it mattered. That shared understanding led to fewer revisions and a cohesive workflow.
This homepage redesign became a stronger foundation for how The Clean Bean builds trust - turning the first impression into a clear, confidence-driven entry point for parents.
The impact was measurable: orders increased by 25%, average order value grew by 5%, and overall sales rose by 5% following the redesign.
But beyond the numbers, this project reinforced a simple lesson for me: when a homepage respects how people actually think, scan, and decide, confidence follows - and meaningful results come with it.
Gallery
Hero section showcasing featured jewelry piece
Detailed product view with zoom functionality
Product showcase video
Design system components and patterns
Mobile responsive product page
Next Case Study
Product Page