Perma-Earth Website Redesign

Simplifying the shopping experience for natural body care

Original website

Redesign

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

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 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

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: 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

Feature Roadmap

Design

Before: Original nav bar cluttered, no Shop All page, hard to find products, a lot of text on Product Detail page

Before: Original cart and checkout overloaded with colors and text

After:

Mid-fi Wireframes: simplified navigation and a "Shop All" page for all products, with filters and breadcrumbs

After:

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: 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

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

View Maze Results

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

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

View Prototype

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

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