Sustainable Soap Co.
specializes in small batch sustainable products such as soaps, shampoo and lotions for hair and body.
PROBLEM
The website struggles with low traffic and customer engagement due to a generic design that fails to stand out. A redesign is needed to create a visually appealing experience aligned with the brand's sustainable ethos, boosting conversions and user satisfaction.
solution
How might we redesign the website to create an engaging, visually appealing experience that showcases it's eco-friendly products, reflects it's sustainable ethos, and effectively converts visitors into loyal customers?
role
UX Researcher
UI Designer
duration
12 Weeks
tools
Figma
Photoshop
Research
To kick off the research phase, I conducted an in-depth analysis of competing sustainable soap brands. The focus was to uncover what sets Sustainable Soap Co. apart and identify ways to showcase their commitment to eco-conscious practices through refined, distinctive branding.
competitive analysis swot
From the competitive analysis, I learned that while many sustainable soap brands focus on eco-friendly values and high-quality, handcrafted products, there are clear opportunities for Sustainable Soap Co. to stand out. Customers are increasingly drawn to small, artisan businesses that prioritize local sourcing and sustainability, and by strengthening Sustainable Soap Co.'s brand story and visual appeal, we can better reflect the quality of their products and create a stronger connection with their audience.
Competitors also have inconsistent branding and poor site navigation, presenting an opportunity for us to improve user experience by refining Sustainable Soap Co.'s design and making features like product reviews and search functionality more visible.
I conducted five moderated research sessions via Zoom to explore how users approach sustainable shopping decisions. Using affinity mapping to organize the findings, key insights emerged: users are methodical researchers who prioritize verified information and transparency. They show strong preference for small businesses over large retailers, consistently seek detailed product information, and rely heavily on authentic reviews. Users value personal recommendations and direct brand relationships throughout their shopping journey. From these insights, five distinct patterns emerged in how users approach sustainable shopping:
Thorough product research and verification purchasing
Small business preference and direct brand relationships
Detailed ingredient and manufacturing process investigation
Reliance on authentic reviews and community recommendations
Need for clear sustainability documentation and verification
affinity mapping
Emma represents a growing segment of eco-conscious consumers who want to make sustainable choices while maintaining quality and convenience, highlighting the need for better transparency in sustainable shopping.
persona
Define
After identifying users' core needs, I distilled insights into three priorities:
1
Building Trust in Sustainability
Explore reliable ways to verify and communicate sustainable practices, ensuring customers feel confident and informed.
2
Enhancing Transparency
Providing clear, easy-to-understand details on product use and ingredients enhances the user experience and aligns with eco-friendly values
3
Improving Visibility & the Shopping Experience
Streamline navigation, integrate reviews, and emphasize distinctive branding to create a convenient, engaging shopping experience that highlights the personal touch of a local business.
Ideate
Based on my research, I determined the essential sections and features the website should incorporate:
Intuitive navigation with search functionality
Comprehensive product pages and user-friendly checkout process
Company story and ingredient sourcing information
User engagement elements: reviews, social media links
Updated branding and design elements
mood board
style tile
Design
After determining the project's key objectives, I created a user flow to purchase a product emphasizing on intuitive navigation and search functionality.
user flow
The low-fidelity wireframes helped shape the content structure and layout, ensuring key elements were organized effectively. By referring to the persona and affinity map, I focused on presenting crucial information that keeps users engaged, particularly on the landing and product pages.
Wireframes provided insights into content structure and page organization.
Persona and affinity map guided the prioritization of user-friendly, engaging information.
landing page
Mission statement highlighting sustainability and handcrafted products.
SSC's values presented with icons and brief text.
product page
Features usage instructions, ingredients, and customer reviews.
low fidelity wireframes
In moderated testing of the low-fidelity wireframes, 5 participants completed their tasks of exploring the homepage, purchasing the vegan soap and accessing information about the company's sustainability practices and product usage. All five users succeeded without errors and found the navigation intuitive, though they suggested increasing the hamburger menu size and improving access to product reviews.
Next steps for the high-fidelity wireframes:
Expanding the navigation bar and detailing sustainability practices via new pages of an ingredients glossary and reviews to enhance transparency and user satisfaction.
Art deco branding theme was already established. The new logo and branding echo and coexist with old in order for it to be updated seamlessly and cohesively, while making the brand more distinct and emphasizing sustainability again in the tagline.
high fidelity wireframes
Testing
The moderated testing of the high-fidelity wireframes involved five participants who evaluated the site's usability and design enhancements. All participants rated the site a perfect 5 out of 5 for ease of use, finding the purchasing process intuitive and the navigation straightforward. However, some users noted that the sustainability information felt vague and suggested adding a dedicated page to clarify the company's practices. Overall, the site scored 98% for ease of use and 100% for checkout flow.
Moving forward, I implemented several iterations, including adding dropdown menus, enhancing the sustainability section, and making icons more interactive to improve the user experience and strengthen the brand message.
iterations carousel
view prototype