Embedded Files
Overview
Overview
EarthCare: Designing an Ethical Brand Comparison Platform from the Ground Up
EarthCare is an ethical brand comparison platform that enables consumers to evaluate and compare the sustainability levels of products across categories. The core challenge was structuring complex sustainability data into a clear, decision-support experience while ensuring the platform could scale as new brands and categories were introduced.
To align expectations and reduce ambiguity early in the process, I structured a stakeholder intake brief covering project goals, user needs, constraints, and success criteria. This helped translate abstract requirements into clear design directions.
One key insight from this process was the need for a minimal and uncluttered interface, aimed at reducing cognitive load and simplifying decision-making. This principle guided layout, content prioritization, and interaction design throughout the product.
As the UX/UI Designer, I designed the product from scratch, which means defining core user journeys, establishing information architecture, and translating abstract sustainability criteria into clear and intuitive interaction patterns. The goal was to reduce cognitive overload while enabling users to compare the brands confidently based on transparent ethical metrics.
By using systems thinking and iterative refinement, I structured navigation, comparison flows, and content hierarchies to support clarity and long-term scalability. I also developed a modular design system to ensure consistency and enable efficient onboarding of new categories without increasing complexity.
This result was a scalable, user-centered platform that streamlined navigation, reduced confusion, and improved clarity of interactions throughout the product.
Timeline
Timeline
Aug 2023 - Dec 2023
Contexts
Contexts
EarthCare aims to help consumers make informed, ethical purchasing decisions by comparing brands across sustainability criteria. However, sustainability data is often complex, inconsistent, and difficult to interpret. The primary challenge was transforming abstract ethical metrics into a clear, decision-support experience without overwhelming users.
At the same time, the platform needed to support long-term scalability by enabling new brands and product categories to be added efficiently without breaking structural consistency.
The Goal
The Goal
Design an ethical brand comparison platform from the ground up that helps people make confident, informed decisions without feeling overwhelmed.
Sustainability data is often complex, inconsistent, and difficult to interpret. My goal was to translate these abstract ethical metrics into a clear and intuitive experience; one that supports comparison, reduces cognitive load, and builds trust through transparency.
At the same time, I needed to create a flexible structure that could grow over time, allowing new brands and product categories to be introduced without disrupting the overall experience or making navigation more complicated.
My Role
My Role
As the sole UX/UI Designer, I led the design of EarthCare from concept to high-fidelity prototype. This included defining the product structure, shaping core user journeys, and translating complex sustainability criteria into a clear and usable experience.
I worked across strategy and execution; framing the problem, structuring information architecture, designing comparison flows, and building a scalable design system that could support future growth.
Skills Used
Skills Used
User Research Synthesis, Information Architecture & Content Structuring, Complex Data Simplification, Interaction & Flow Design, Design Systems & Modular Thinking, Scalable Product Structuring, Low and High-Fidelity Prototyping (Figma), Responsive & Accessibility Considerations
Responsibilities
Responsibilities
Framed the core UX challenge around reducing cognitive overload in sustainability comparison.
Defined primary user journeys and decision-making flows.
Structured information architecture to support scalable brand and category expansion.
Designed comparison modules to make abstract ethical metrics understandable and transparent.
Developed a modular design system to ensure long-term consistency and maintainability.
Created wireframes, high-fidelity mockups, and interactive prototypes.
Applied responsive design principles to ensure usability across devices.
Integrated accessibility considerations into layout and interaction patterns.
User Insights & Problem Framing
User Insights & Problem Framing
- Research & Insights
- User Archetypes
- Competitive Landscape Analysis
- Synthesis & Core UX Challenges
Research & Insights
Research & Insights
To understand how users approach ethical purchasing decisions, I began by exploring existing sustainability platforms, consumer behavior patterns, and the challenges people face when evaluating brand transparency.
Through secondary research and behavioral analysis, I identified a recurring issue: while users care about sustainability, they often feel overwhelmed by inconsistent metrics, unclear scoring systems, and excessive information density. Many existing platforms either oversimplify ethical ratings or present complex data without meaningful context.
Rather than focusing solely on demographics, I concentrated on decision-making behavior like how users compare brands, what signals build trust, and where confusion typically occurs in comparison-based interfaces.
This research clarified two key needs:
Users require transparent and structured comparisons to feel confident.
Information must be layered progressively to reduce cognitive overload.
These insights directly shaped the platform’s comparison model, navigation structure, and content hierarchy.
Archetype 1:
Archetype 1:
The Conscious Comparator
The Conscious Comparator
Summary
Actively evaluates brands before purchasing. Seeks transparency, structured comparison, and clear scoring logic to make confident ethical decisions.
Goals
Compare brands across consistent sustainability criteria
Understand certifications and impact metrics clearly
Make confident purchasing decisions
Avoid supporting misleading or harmful brands
Frictions
Greenwashing and vague claims
Inconsistent scoring systems
Dense information without hierarchy
Difficulty understanding why brands score differently
Decision behavior
Decision behavior
Engages in side-by-side comparison. Looks for evidence and consistency. Needs clarity on scoring logic and evaluation criteria.
Design Implication
Make scoring logic transparent and explainable
Support structured side-by-side comparison
Apply progressive disclosure (summary first, details on demand)
Highlight credibility signals (sources, definitions, certifications)
Archetype 2:
Archetype 2:
The Curious but Overwhelmed
The Curious but Overwhelmed
Summary
Values sustainability but lacks time or expertise to evaluate complex data. Needs guidance and clarity rather than deep comparison tools.
Goals
Conflicting terminology
Information overload
Unclear scoring explanations
Limited time for deep evaluation
Frictions
Conflicting terminology and unclear scoring systems
Information overload
Difficulty distinguishing genuine sustainability from greenwashing
Limited time for deep comparison
Decision behavior
Prefers simplified summaries and guided recommendations. Relies on clear visual cues and digestible insights instead of detailed metric breakdowns.
Design implications
Provide high-level summary scores before detailed metrics
Use simplified language and structured labeling
Offer guided comparison flows
Avoid overwhelming first-time users with dense data
Competitive Landscape Analysis
Competitive Landscape Analysis
Market & Positioning Analysis
I began by mapping direct and indirect competitors to understand their market positioning, target audience, pricing, and value proposition.
This helped identify how sustainability comparison platforms differentiate themselves and where gaps exist in structured evaluation models.
UX & Interaction Assessment
Next, I evaluated each platform’s user experience across:
Desktop and mobile responsiveness
Feature set and interaction depth
Accessibility considerations
User flow clarity
Navigation structure
Each platform was assessed based on usability, clarity of comparison logic, and decision-support effectiveness.
User Feedback Insights
Public user reviews (Trustpilot and app stores) were analyzed to validate usability findings.
Recurring themes included:
Difficulty understanding how sustainability scores are calculated
Confusion between app and web experiences
Frustration with dense or hard-to-find information
Concerns about transparency and greenwashing
These patterns reinforced the need for clearer scoring logic and a structured comparison framework in EarthCare.
Visual & Content Evaluation
Finally, I analyzed brand identity, the communication tone, and content structure to understand how sustainability information is presented.
Special attention was given to:
Transparency of scoring explanations
Information hierarchy
Content clarity and accessibility
Consistency between app and web experiences
Synthesis & Core UX Challenge
Synthesis & Core UX Challenge
Key Pain Points Identified
Through user research, behavioral analysis, and competitive evaluation, several recurring challenges emerged:
Inconsistent sustainability metrics
Brands use different scoring systems, certifications, and
terminology, making cross-brand comparison difficult.
High cognitive load
Sustainability information is often dense, technical, and poorly
structured, overwhelming users during decision-making.
Limited transparency behind scores
Many platforms present ratings without clearly explaining how
they are calculated, reducing trust.
Fragmented comparison flows
Users are required to navigate across multiple pages to evaluate
differences, disrupting decision continuity.
Core Problem
These recurring issues reveal a deeper structural gap:
Sustainability platforms lack a standardized and transparent comparison framework that supports confident decision-making while managing informational complexity.
Core UX Challenge
How might we structure complex and inconsistent sustainability data into a transparent, comparison-driven experience that reduces cognitive load while remaining scalable across brands and categories?
Concept Exploration
Concept Exploration
- Structural Design (Wireframes)
- Usability Study (Wireframe Validation)
- Key Improvements Informed by Usability Testing & IA Research
- Visual Design
- High Fidelity Prototype
Final Iteration
Concept Exploration
Concept Exploration
To explore structural variations for the homepage, I generated multiple layout directions focusing on content hierarchy, comparison visibility, and information density.
Each concept tested a different approach to:
Hero emphasis vs. structured comparison entry
Navigation placement and clarity
Progressive disclosure of sustainability information
Balance between educational content and comparison tools
Through rapid iteration, I evaluated which structure best supported clarity, scalability, and comparison-driven decision-making.
Early Concept Exploration – Crazy Eights Sketches
Structural Design (Wireframes)
Structural Design (Wireframes)
After defining the Core UX Challenge, I translated the insights into a scalable structural framework. The focus at this stage was establishing information hierarchy, reducing cognitive load, and enabling comparison-driven decision-making.
Homepage
Categories I
Categories II
Sub-Categories
Structural Decisions
Progressive disclosure
Summary scores appear first, with detailed sustainability metrics available on demand.
Modular content structure
Brand profiles follow a repeatable layout to support scalability across categories.
Transparent scoring logic
Users can access breakdown explanations without leaving the flow.
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 looked for clear account access options (sign in / sign up) to understand how to begin interacting with the platform.
Users expected a clear and accessible way to compare brands during the decision-making process.
Users showed a preference for more legible typography to support information-heavy content.
Users expected multilingual support to improve accessibility and comprehension.
Key Improvements Informed by Usability Testing & IA Research
Key Improvements Informed by Usability Testing & IA Research
This phase focused on scalability and information architecture, ensuring the system could support additional brands, categories, and scoring modules without requiring structural UI redesign.
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
Information Architecture
Sitemap
Sitemap
The information architecture was structured to support a comparison-driven decision journey, prioritizing clear navigation between brands, categories, and sustainability scores. The system was designed as a scalable, modular framework, allowing new brands, categories, and scoring dimensions to be integrated without restructuring the core UI.
Visual Design
Visual Design
The visual system was designed to support clear comparison, trust, and scalability across information-dense sustainability data.
Color system
Color was used semantically rather than decoratively. A restrained neutral base minimizes visual noise, while accent colors are reserved for sustainability scores and system feedback. This allows users to quickly scan, compare, and interpret performance differences without relying on memorization or excessive reading.
Typography & hierarchy
Typography choices prioritize legibility and hierarchy for dense content. Clear differentiation between headings, scores, labels, and supporting metadata reduces cognitive load and helps users focus on decision-critical information first.
Component consistency
Reusable components such as score cards, comparison rows, and category modules ensure consistency across brand and comparison views. This reduces learning effort and allows users to transfer understanding seamlessly when evaluating multiple brands.
Accessibility considerations
Contrast ratios, font sizes, and spacing were designed to support readability across devices and user abilities. The interface supports multilingual access (including Swedish), ensuring content is understandable for a broader audience. Visual hierarchy and layout reinforce structure without relying solely on color, maintaining clarity for users with diverse visual and linguistic needs.
Overall, the visual design functions as a supporting system; reinforcing transparency, enabling efficient comparison, and allowing the product to scale without increasing cognitive load.
High Fidelity Prototype
High Fidelity Prototype
High-Fidelity Refinements
High-Fidelity Refinements
Pink shows the initial design, while green reflects the version after usability testing.
Refinement: Header Prioritization
Header update: The logo was repositioned to make room for essential actions such as sign-in and language selection. This made the navigation feel more balanced and helped users quickly find what they needed.
Typography adjustment: Letter spacing was slightly increased to improve readability, especially in text-heavy sections, making the content easier to scan and less visually dense.
These refinements may seem subtle, but they significantly improved clarity and overall usability.
Refinement: Compare Action Visibility
Compare visibility: After testing, a dedicated compare icon was added directly within the brand view. Users initially struggled to identify how to start a comparison. Making the action visible and contextual reduced friction and clarified the decision-making flow.
This adjustment strengthened the comparison-first experience and improved task discoverability.
Refinement: Side-by-Side Comparison
High-Fidelity Prototype Addition
The dedicated comparison view was introduced during the high-fidelity phase to address the need for clearer brand evaluation. While not part of the initial lo-fi prototype, usability insights revealed that users needed a more effective way to compare brands side by side.
This layout enables users to view sustainability ratings, certifications, values, and pricing in parallel, making differences easier to identify and reducing the effort required for informed decision-making.
Side-by-Side Comparison
Other High Fidelity-Prototypes
Other High Fidelity-Prototypes
Offer Highlight on Brand Page
The offer indicator is visually emphasized using a green accent to immediately signal promotional availability without distracting from the brand’s sustainability score. Its placement near the main content ensures visibility while maintaining a clear hierarchy between offers, brand identity, and comparison actions. This supports quick scanning and informed decision-making.
Sorting Interaction
The sorting panel allows users to reorganize brand results based on price, rating, or alphabetical order. The selected option is clearly highlighted to provide immediate feedback and reduce ambiguity. By prioritizing “Rate high to low,” the design supports the platform’s core goal of enabling quick, comparison-driven sustainability decisions.
Authentication Flow
The sign-in and sign-up screen was designed to minimize friction when users attempt to add brands to their favorites. Clear separation between login and registration reduces confusion, while social sign-in options (Google, Facebook, and app login) provide faster entry points. The green primary CTA reinforces action hierarchy and maintains consistency with the overall semantic color system.
Inclusive & Responsive Design
Inclusive & Responsive Design
- Accessibility Considerations
- Responsive Behavior
Accessibility Considerations
Accessibility Considerations
Color Contrast & Legibility
Color Contrast & Legibility
To ensure accessibility, color contrast ratios were tested and validated against WCAG guidelines. Text elements meet AA and AAA standards, while icons and graphical components meet AA requirements, supporting readability and clear visual distinction throughout the interface.
Multilingual Support
Multilingual Support
To make the platform accessible to a broader audience, multilingual support was implemented. Users can easily switch between languages, allowing the interface and navigation to adapt to their preferred language while maintaining a consistent layout and usability.
Reduced Cognitive Load
Reduced Cognitive Load
(Navigation System)
The platform uses a layered navigation structure combining sidebar navigation, breadcrumb navigation, and category-based navigation. This structure allows users to quickly move between high-level sections while maintaining clear orientation within the product hierarchy.
Responsive Behavior
Responsive Behavior
Responsive comparison Experience
On smaller screens, the side-by-side desktop comparison transforms into a stacked layout. Users can switch between brands using the Change interaction, preserving comparison clarity while reducing cognitive load on mobile devices.
Mobile Navigation: Overlay Menu
Mobile Navigation: Overlay Menu
Provides access to primary navigation through a space-efficient overlay pattern
Activated via hamburger icon, maintaining a clean and uncluttered interface
Uses background blur to preserve context while directing focus to navigation
Designed for touch interaction with a clear hierarchy and accessible tap targets
Mobile Layout: Brand Page
Mobile Layout: Brand Page
Content follows a vertical layout optimised for mobile reading patterns
Primary actions remain visible and easily accessible (e.g. Favorite, Compare)
Typography scaled to maintain readability across smaller screen sizes
Supports quick scanning and reduces cognitive load
Interaction: Touch Feedback
Interaction: Touch Feedback
Replaces hover-dependent interactions with tap-based feedback for mobile environments
Provides immediate visual response through overlay and state transition (e.g. “Change” action)
Communicates system status clearly, reducing uncertainty during interaction
Reinforces user confidence by confirming actions in real time
Going Forward
Going Forward
- Takeaways
- Next steps
Takeaways
Takeaways
Impact
Impact
Enables users to discover brands aligned with their sustainability values quickly
Simplifies decision-making through structured comparisons and clear information
Makes eco-conscious shopping more accessible and approachable
Supports informed choices by combining usability with transparency
Learning
Learning
Designing simple interfaces requires careful prioritization and clarity
Reducing visual complexity increases the importance of hierarchy and interaction
Consistency across devices is essential for a seamless user experience
Accessibility and usability must be considered from the start, not added later
Next Steps
Next Steps
Expand usability testing with a broader user group to validate interaction patterns
Refine accessibility features based on WCAG guidelines and real user feedback
Enhance multilingual support to improve inclusivity for Turkish users
Iterate on interaction patterns to further improve clarity and consistency across devices
Thank you for taking the time to explore this case study.
It demonstrates a structured approach to UX design, combining usability, accessibility, and consistent interaction patterns to create a cohesive user experience.
Page updated
Google Sites
Report abuse