UX Case Study:
Ecology Ecommerce Website


Company Background

While sustainability is an increasingly important consideration when shopping for clothing, many consumers still purchase fast fashion. Ecology’s goal is to make shopping for sustainable clothing accessible and appealing to everyone.To do this, Ecology is launching an e-commerce site specializing in sustainable fashion.


Create a hassle-free shopping experience that makes sustainability feel accessible and inclusive.


Card Sorting
User Interviews


UX Research
UX Design
UI Design
Usability Testing


Adobe Illustrator


120 Hours
Speculative Project


Research Goals

• Identify barriers that customers face when shopping online and remove them from the shopping experience.
• Find out what users prioritize when shopping online.


• Market research of online retailers in the sustainability/vintage space to determine the types of experiences that shoppers are used to having.
• Virtual user interviews to gain insight on the needs and preferences of potential users.

Venn diagram outlining the business, technical, and customer goals for the site and how they may overlap.

Market Research

Competitors in the sustainable fashion market were evaluated to gain insight on UI patterns, branding, and existing approaches to eco-friendly online shopping.

Key Takeaways
• The most successful interfaces are simple, with one or two calls to action
• Most had a “like” option to save items for later
• Photography plays a huge role in the feel of the brand
• Too many small photos/links make the site feel cluttered
• All of the sites use a neutral color scheme and allow the photos to create color

User Interviews

The main problem that users reported with shopping online is being able to confidently select an item that will fit well. Related to this, they perceived the process of returning items that do not fit as too much of a hassle.

"I prefer shopping in person because I'm plus size and have a hard time finding clothes that fit. It's good to be able to see and touch and feel."

“Shopping online is more convenient, but I prefer being able to try on clothes at the store before making a decision if possible.”

“I prefer the experience of shopping online, but only if it's a replacement for an item I've already purchased, so I know it will fit."


Creating an Empathy Map

Based on my user interviews and market research, I developed an empathy map to connect with the potential target user.

Empathy map of commonly reported experiences surrounding online shopping.

Developing a Persona

Using the frustrations and motivations identified in the user testing and interviews, I developed a fictional persona to embody the needs of the user. 
This persona was referred to throughout the process to help center the goals of the user when redesigning the site.

Annalina, 24
The Deliberate Shopper

Annalina puts a lot of consideration into her decisions. She cares about her impact on the world, and tries to make choices that align with her values. She is willing to invest in items that are high quality and will last a long time. She often discovers brands on websites like Instagram and Pinterest. She takes her time browsing a website before making a purchase, wanting to select pieces that will fit with her existing wardrobe.

• Thoughtful
• Deliberate
• Skeptical

• Buying an item that doesn't fit
• Companies that use unethical labor
• Returning items is a hassle

• Cares about the planet
• Wants to feel confident in her clothes
• Wants to shop online to stay safe from COVID-19

• Purchase durable, sustainable clothes that fit
• Shop at companies that align with ethical values
• Find the lowest price without sacrificing quality

The Problem

Annalina, a deliberate consumer, wants to feel confident about buying the right size when shopping online.


Crazy 8s

Rapid brainstorming was performed to generate potential features that might help solve the user’s problem.


Lo-fi Wireframes

Sketches and responsive wireframes were created to solicit feedback and iterate on the design concept. The core feature designed to solve the user problem was a size calculator, in which users could input their measurements to determine the correct size.

Homepage (Desktop)
Product Listing Page (Desktop)
Product Details Page (Desktop)
Shopping Cart (Desktop)


Developing a Brand Identity

I designed a logo and style tile to establish brand guidelines to be used throughout the site. The branding is intended to be earthy, contemporary, and minimal.

Style tile to establish basic brand identity and UI components.

High Fidelity Wireframes

Hi-fi Wireframes

I refined the responsive wireframes, using the brand style guide to develop the look and feel of the site.

Homepage (Desktop)
Product Listing Page (Desktop)
Product Details Page (Desktop)
High fidelity prototypes were created to test the site flow and effectiveness of the size calculator

Hi-Fi Responsive Wireframes

I used the expanded branding to generate high fidelity wireframes for desktop, tablet, and mobile.

Mockups showing screens from the design on desktop, laptop, tablet, and mobile devices.
View Prototype

User Testing

What Went Well

• User impressions of the brand aligned with what was intended
• All users were able to complete the task of finding a specific item, calculating their size, and adding it to the cart

Areas for Improvement

Two out of five participants did not notice the size calculator and scrolled straight to reviews. One stated, "this was almost so helpful that it wasn't even something that was on my radar. I thought I would have to go hunt and do my own research." The other said, "I missed the [calculate my size] button initially because I assumed it was an 'add to cart' button."

I created an affinity map to find commonalities reported among users during user testing.



The size calculator is an effective tool to help users gain confidence that they are purchasing the correct size.

Future Improvements

To develop this project further, I would complete the checkout flow and introduce more products with functional categories and sorting.