PERMA-EARTH
PERMA-EARTH
Website Redesign
Website Redesign
Simplifying the shopping experience for natural body care
Embedded Files
Original website
Redesign
Project Overview
Project Overview
Responsive website redesign for Perma-Earth, a tallow-based soap company
Timeline: 8 weeks, 65 hours
Role: UX/UI Designer, Researcher (Independent project)
Tools: Figma, FigJam, Maze, Google Forms
The Problem
The Problem
Despite having excellent products and strong branding, Perma-Earth's website was difficult to navigate, leading to frustrated users and lost sales. Users needed detailed instructions just to find and purchase products, indicating serious usability issues.
Research
Research
Research Goals:
Understand what blocks users from purchasing products
Identify user expectations for the shopping flow
Determine what information users need before buying
Understand how to better communicate brand values
Methods:
Competitive Analysis: Analyzed 4 competitors in the natural body care space: Heart and Soil, Earth and Me, Ursa Major, and The Ordinary.
Key findings revealed that successful competitors use:
Clear, simplified navigation with 3-4 main categories
Prominent filtering options on product pages
Brand values communicated through visual icons, which minimizes text blocks
Streamlined checkout processes with minimal steps
User Interviews:
Conducted interviews with 5 participants across three user groups:
Current Perma Earth customers (2 participants)
Natural body care enthusiasts who hadn't used Perma Earth (2 participants)
Newcomers to natural products (1 participant)
Key Interview Insights:
Users found the current site's navigation "overwhelming and confusing"
Multiple users abandoned their first attempt to purchase due to navigation issues
Users wanted to understand the brand's mission and values before purchasing
Product information was scattered across multiple pages, making comparison difficult
Users appreciated the brand's authenticity but struggled with the cluttered interface
Define
Define
Based on research synthesis, I developed two primary personas:
Sophia - "The Motivated Newcomer"
Demographics: 32, marketing professional, lives in suburban area
Goals: Find natural alternatives to conventional beauty products
Pain Points: Overwhelmed by product choices, needs clear ingredient information
Behavior: Researches thoroughly before purchasing, values transparency
Laura - "The Experienced Repeat Customer"
Demographics: 45, mother of two, existing customer for 2+ years
Goals: Efficiently reorder favorite products, discover new items
Pain Points: Frustrated by having to search for familiar products
Behavior: Shops monthly, prefers bulk ordering, values efficiency
"I want to know exactly what I'm putting on my body and why it's better"
"I love the products but the website makes me want to call instead of ordering online"
Empathy Map
Affinity Map
Sitemap, User Flows, Business & User Goals
Sitemap, User Flows, Business & User Goals
Sitemap: Reduced from 23 main pages to 5 core sections — Home, Shop, How-to-Guides, FAQ, About, Account
User Flows: address the key pain points of users getting lost in navigation
Business & User Goals
Prioritization
Prioritization
Feature Roadmap
Design
Design
Original nav bar cluttered, no Shop All page, hard to find products, a lot of text on Product Detail page
Original cart and checkout overloaded with colors and text
Mid-fi Wireframes: simplified navigation and a "Shop All" page for all products, with filters and breadcrumbs
Mid-fi Wireframes: simplified product page, cart, and checkout back button added
Key Design Decisions:
Navigation Simplification: Based on user feedback about overwhelming navigation, the redesign focused on:
Reduced header categories from 23 to fewer, clearer options
Implemented breadcrumb navigation throughout
Visual Hierarchy:
Clearer calls-to-action
Consistent typography scale
Improved color contrast for accessibility and separation between sections for readability
Product Information Architecture: From the mid-fi usability testing, users wanted:
Categories that better matched user expectations for a body care site
Product details visible immediately, and more concise, rather than tabs with a lot of text
Front-loaded key product benefits and ingredients
Added filtering by concern (Dry Hair, Sensitive Skin, etc.) to replace overwhelming photo gallery of concerns
Branding and color palette:
Used warm, floral tones (purple, peach) in the color palette and earthy tones (brown, green) in the photos to emphasize the more global permaculture aspect instead of concentrating only on tallow
Chose photos emphasizing the human-animal connection to underline the regenerative farming ethos.
Picked photos where animals are silhouetted to create some distance, so users don't feel sad about cute animals dying
Added product photos to the homepage, per user feedback
Synthesized brand values by using icons to cut down on text
Added stock photos of people of different ages and ethnicities washing their hair for more inclusivity and a better immediate sense of the products
Hi-fi Wireframes v.1
Hi-fi Wireframes v.1
Hi-fi Wireframes v.1: More (small) product photos with buttons to add to cart, graphics for brand's values, borders around product images
Hi-fi Wireframes v.1: photos to help clarify obscure ingredients, How-to Guides listed on the Product Detail page, Customer reviews made more visible
Hi-fi Wireframes v.1: Decluttered Cart and Checkout
Hi-fi Wireframes v.1: Added farmer photos and reduced text, added Blog feature to centralize all the explanatory articles, added a Footer with a newsletter and easily accessible links about the brand to cut down on emails to the company
Testing & Iterations
Testing & Iterations
Test Plan: Conducted unmoderated usability tests through Maze with 5 participants, focusing on three key scenarios:
Browse homepage, About, FAQs, and Testimonials
Find and filter products, add specific items to cart
Complete checkout process
Quantitative Results:
Task 1 (Browse): 80% completion rate, avg. 151 seconds
Task 2 (Shopping): 60% completion rate, 65.3% misclick rate, avg. 158.5 seconds
Task 3 (Checkout): 40% completion rate, 80.6% misclick rate, avg. 59.8 seconds
User Satisfaction Ratings (5-point scale):
Ease of Use: 3.4/5.0
Efficiency: 4.2/5.0
Clarity of Product Information: 4.6/5.0
Aesthetic Appeal & Branding: 3.8/5.0
Trust & Credibility: 4.2/5.0
Checkout Process Satisfaction: 4.6/5.0
Likelihood to Purchase & Recommend: 4.2/5.0
Key Findings:
Strengths:
Users loved the color palette and found it calming and brand-appropriate
Product information was clear and comprehensive
Filtering options were intuitive and helpful
Users appreciated the less cluttered, more professional feel compared to the original
Checkout process felt smooth when accessible
Critical Issues:
Navigation Problems: Users struggled to find recommended products (conditioner, soap dish) at bottom of product pages
Mobile Menu: Accordion navigation felt overwhelming with too many options
Brand Clarity: Need for clearer mission statement and explanation of "animal-based" benefits upfront
Technical Issues: Some prototype limitations affected task completion
"The earth tones communicated sustainability... reminded me of an unbleached coffee filter"
"I would like a more immediate sense of the brand's mission at the top of the homepage"
"Nothing was too loud or competing for attention. The palette is very nice and calming"
Revisions
Revisions
Based on usability testing results, the following high-priority changes were identified:
Navigation Improvements: From the testing feedback about users struggling to find recommended products:
Simplified collapsible sections in mobile navigation menu
Moved recommended products higher on product pages with visual callouts
Added clearer visual hierarchy for related products
Brand Communication: From user feedback wanting clearer brand mission:
Added prominent brand mission statement to homepage
Added taglines to photos and sections
Improved section explaining brand values with clearer visuals
Enhanced About page with stronger value proposition upfront
Interaction Design: Based on misclick rates and user feedback:
Added a tertiary color (green) for better button contrast
Clarified active state for items in cart
Visuals:
Lightened up peach background for better contrast with text and more subtlety, without losing benefit of distinction from product cards
Added light tan color for graphics backgrounds
Changed photos in How-to Guide section back to original graphics to make it more distinctive
Changed colors in Checkout flow to greys to match user expectations
Before
After
Before
After
Conclusion
Conclusion
This project deepened my understanding of eCommerce patterns and the delicate balance between brand identity and usability. The testing revealed that while the visual design successfully communicated brand values, there were critical usability gaps that prevented task completion. The experience taught me the importance of iterative testing and the need to validate both aesthetic appeal and functional usability throughout the design process.
Next Steps
Next Steps
Brand Integration: Collaborate with Perma-Earth to pitch changes that are feasible for them
A/B Testing: Test different approaches to color palettes and synthesizing information
Reduce padding above and below to reduce scrolling
Page updated
Google Sites
Report abuse