Embedded Files
Overview
Overview
Earthcare is an ethical brand comparison platform that enables consumers to evaluate the sustainability levels of various products. My role was to redesign core user flows, enhance information architecture, and develop a scalable design system that facilitates the rapid onboarding of new brands and categories. Using systems thinking and data-driven iteration, I streamlined navigation, reduced user confusion, and improved interaction clarity across the product.
Timeline
Timeline
Aug 2023 - Dec 2023
Problem
Problem
My research indicates a significant lack of adequate platforms that connect eco-conscious individuals with brands committed to environmental sustainability and the future well-being of all living beings.
The Goal
The Goal
The goal is to develop a web platform that offers comprehensive information about ethical fashion brands, highlights their positive impact, and simplifies the purchasing process for mindful consumers.
My Role
My Role
UX Designer leading the Earthcare website
Skills Used
Skills Used
Systems Thinking, IA, Prototyping, Usability Testing, UX Writing, Design Systems, Analytics (Hotjar/Firebase)
Responsibilities
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Understanding the User
Understanding the User
- User research
- Personas
- Problem statements
- Competitive audit
- Ideation
User Research: Summary
User Research: Summary
I conducted interviews and created empathy maps to better understand the users I am designing for and their pain points. Users were unable to understand the sustainability score at a glance and had difficulty navigating between brand categories. This led to premature drop-offs, low return visits, and uncertainty about the platform’s purpose.
Persona 1 : Concious Cathy
Persona 1 : Concious Cathy
Problem statement:
Problem statement:
Cathy is a busy businesswoman passionate about conscious living. She actively seeks ways to instill ethical values in her family and needs a web platform that offers comprehensive information about ethical fashion brands, enabling her to make thoughtful clothing purchases for herself and her family.
Persona 2 : Sustainable Garry
Persona 2 : Sustainable Garry
Problem statement:
Problem statement:
Garry is a curious and eco-conscious homemaker who needs a simple, user-friendly ethical fashion app or web platform to guide him toward sustainable choices and promote an environmentally friendly lifestyle for his household, as he strives to ensure a more livable future for his children.
Key Pain Points
Key Pain Points
Overloaded and inconsistent categorization
The score presentation required too much interpretation
UI components that lacked hierarchy and predictability
Confusing terminology and insufficient UX copy
No clear comparison pattern for cross-brand review browsing
Hypothesis:
If we restructure the information architecture, simplify the scoring system, and introduce consistent reusable patterns, users will better understand the platform, reducing friction and increasing trust and engagement.
Competitive Audit
Competitive Audit
My competitive audit revealed the need to create a more user-friendly and intuitive website with a welcoming tone. Additionally, the responsive design process should follow a desktop-first approach.
Ideation
Ideation
I conducted a Crazy Eights ideation session and arrived at the optimal design concept for the website's homepage.
Starting the Design
Starting the Design
- Digital Wireframes
- Low Fidelity Prototype
- Usability Study
- IA Research & System Thinking
Digital Wireframe
Digital Wireframe
The simplicity of the website is critical.
Home Screen
Low Fidelity Prototype
Low Fidelity Prototype
As shown in the link below, I have addressed all the pain points identified in the personas.
Usability Study: Parameters
Usability Study: Parameters
Study Type
Study Type
Moderated usability study
Participants
Participants
5 participants
Location
Location
Sweden, remote
Length
Length
30-45 Minutes
Usability Study: Findings
Usability Study: Findings
Users need to see if they can sign in/ sign up.
Users need the ability to compare brands.
Users prefer more readable fonts.
Users looking for other languages.
IA Research & System Thinking
IA Research & System Thinking
This phase focused on scalability. The ability to add brands, categories, and scoring modules without rewriting UI each time.
What I changed according to the usability study and IA research
What I changed according to the usability study and IA research
Consolidated the category structure into a three-tier hierarchy
Introduced a scoring “pattern family” that reused shapes, colors, and microcopy
Aligned all detail pages to a single modular layout (header → summary → breakdown → reviews)
Created consistent motion patterns for score transitions
Refining the Design
Refining the Design
- Mockups
- High Fidelity Prototype
- Accessibility
Mockup 1
Mockup 1
Based on feedback from participants, I found that the text was not legible enough due to its simplicity. To address this, I reduced the spacing between words and letters and increased the distance between headers and text bodies. Additionally, I added a sign-in button and a language selector for improved usability.
Mockup 2
Mockup 2
Based on my usability study, I found that users tend to compare brands with each other. As a result, I added this comparison feature to my design, as shown above.
Other Mockups
Other Mockups
High Fidelity Prototype
High Fidelity Prototype
Below please find the link of my high-fidelity prototype.
Accessibility considerations
Accessibility considerations
Focused on color accessibility, ensuring that the contrast between the colors and fonts is easily readable.
Organized the website to be available in two languages: English and Swedish.
Designed a clear and user-friendly interface for individuals with limited experience using computers and smartphones.
Responsive Design
Responsive Design
- Information architecture
- Responsive design
Sitemap
Sitemap
The sitemap is structured to provide a simple, intuitive navigation experience, ensuring ease of use for users with limited web browsing experience.
Responsive Design
Responsive Design
In this project, I implemented a responsive design to ensure the website is accessible and visually appealing on all devices, including desktops, tablets, and mobile phones. This approach enhances the user experience by improving readability and navigation, allowing users to engage with the content seamlessly across various screen sizes.
Going Forward
Going Forward
- Takeaways
- Next steps
Takeaways
Takeaways
Impact
Impact
This website empowers environmentally conscious individuals to quickly and easily discover budget-friendly brands that align with their eco-friendly values.
What I learned
What I learned
I’ve learned that designing a simple and minimalistic website is more challenging than working with other design styles.
Thank You!
Thank You!
Thank you for reviewing my work on the EarthCare Website. I would invite you to view my other projects on the projects page.
Page updated
Google Sites
Report abuse