Blanket Term

Designing an e-Commerce platform for a mission-led fashion brand

My end-to-end UX process from discovery research through usability testing

Project Background

Blanket Term is a slow fashion house located in Durham, NC. Although they do sell coats, the company prefers to be described as a movement rather than a brand.

Blanket Term aims to cultivate a space that fosters respectful relationship between customers and their clothing. One that nurtures regenerative material systems and rest within the consumptive economy.

The founder of Blanket Term was looking to elevate their mission and brand through the creation of their own site. Before I endeavored to create Blanket Term’s responsive ecommerce website their digital presence was represented by a sole instagram account.

At first, creating a responsive ecommerce site for a decidedly anti-consumption brand seemed counterintuitive. The contradictory nature of this challenge excited me!

How would I create a delightful digital shopping experience that simultaneously honored Blanket Term’s ethos and elevated their mission?

Project Overview

What I Learned

  • Trust the process - Being both the brand’s founder and the UX designer for this project emphasized the importance and value inherent in each step of the design process. Although, this dichotomy tempted me to skip steps of the design process, I was pleasantly and profoundly reassured of it’s utility along the way.

  • When in doubt, consult the user - whenever I’m stuck on a design problem i’ve found that the best solution can always be found by consulting the user. Whether that’s through previous research, reviewing a persona or usability testing.

  • Test, test, test - test ideas as early and as often as possible in order to efficiently create a product that solves user problems.

Design Process

The Design Thinking framework guided my entire design process from discovery research through usability testing.

Phase 1: Empathize via Research

Research Planning

Research Goals

Understand what interests customers about blanket coats while also understanding along their online shopping habits and preferences.

Methodologies

  • Comparative and competitive business and design research

  • Contextual interviews, to see how people are using the current service

  • User interviews to hear from users first hand their stories of how they use the service and what role it plays in their lives

Participants

  • People who bought a coat from Blanket Term

  • People who bought a coat from other designers

  • People who are interested in buying upcycled clothing

Assumptions

I assumed that educated, employed, environmentally conscious consumers who value the philosophy of slow fashion and unique things would be interested in a bespoke garment made from a one of a kind textile.

I was excited to see if this assumption held true to profiles of actual customers.

Challenges

  • Connecting with customers who bought an upcycled coat from other brands.

Competitive Analysis

This research method allowed me to monitor current ecommerce design patterns used by similar businesses and target markets.

Competitive Analysis Insights

  • Brand differentiation occurs via pricing, creative direction, product offering and mission

  • In order to stand out in the marketplace Blanket Term must clearly show and tell users how it differs from other brands

Discovery Interviews

This research method allowed me to understand what interests customers about blanket coats, while also understanding their online shopping habits and preferences.

I created a detailed and unbiased script that I used to interview 4 research participants. Discovery interviews took place remotely over video call.

Participant Demographics

  • 4 participants

  • All previous Blanket Term customers

  • Aged 30-36

  • Income of $90-$200k

  • No children

Organizing Interview Themes via Affinity Mapping

Discovery Interview Insights

  • 100% of participants like that you can browse a variety quilts and pick which one you want your coat to be made from

  • 100% of participants want to know what their clothes are made of and how to best care for them

  • 100% of participants identified the brand as “sustainable”

  • 100% of participants want to see pictures of the product on real customers

  • 100% of participants want to understand a brand’s making process and philosophy before buying from them

  • 100% of participants loved learning about the history of the individual quilts

Phase 2: Define via Research Synthesis

POV Statement

Customers need to feel like they have a relationship to the clothing they buy because they are acutely aware that most things are made without care.

How Might We’s

  • How might we communicate Blanket Term’s making process?

  • How might we effectively communicate Blanket Term’s values?

  • How might we effectively communicate each textile’s history, quality and value?

Defining Blanket Term’s User

User Persona

Meet our user!

Empathy Map

How our user behaves.

Defining Blanket Term’s Goals

Research Synthesis Insights

Blanket Term customers need to feel like they have a relationship to the clothing they buy because they are acutely aware that most things are made without care.

  • Blanket Term’s site should include fabric composition and care

  • Blanket Term’s site should explain the making process and brand ethos

  • Blanket Term’s site should include pictures of real customers wearing the product

  • Blanket Term’s site should highlight each quilt’s history

  • Blanket Term’s site should allow user’s to easily browse available products

Phase 3: Ideate via Research and Design

Information Architecture Assets

Site Map

An early stage visual representation of the pages needed for the site.

Task Flow

Understanding the task process from start to finish helps clarify any missing pages or functions not previously identified.

User Flow

User flow’s clarify the user decisions associated with a task flow and help identify any potential pain points.

Design Pattern Research

Identifying and exploring design patterns is a crucial step of every project I work on. I do this to ensure that best solution for a specific user need is implemented. It also helps me learn and grow as a designer.

Lo-fi Ideation

Digital sketching of potential design solutions within Figma.

Lo-Fi Wireframes

The best solutions were chosen to build into hi-fi wireframes.

Branding and UI Design

Style Tile + UI Kit

I took great care to create a UI interface that offered a unique shopping experience while simultaneously adhering to usability heuristics.

Hi-Fi Wireframes

After solidifying our style tile and UI kit I was able to implement our design choices to create the first iteration of hi-fi wireframes.

Phase 4: Prototype via Design Ideations

Hi-fi Desktop Prototype

This prototype allowed users to browse and search Blanket Term’s inventory, review individual products, review and edit their cart and complete the checkout process.

Phase 5: Usability Testing via Prototype

Usability Testing

Goals

  • Determine if users understand what the website offers.

  • Determine if there are any pain points associated with the shopping-to-checkout experience.

  • Understand what information user’s need to see before buying a quilt or coat.

  • Understand what information user’s are most excited about/drawn to.

Participants

  • All participants were recruited via my personal network

  • One participant was also interviewed during the discovery research phase

  • Number of participants: 3

  • Demographics: People who have bought quilt coats or are interested in buying quilt coats

Methodology

Testing was conducted in person and participants navigated the prototype using my computer. The sessions were screen and audio recorded.

User Task

Purchase the Signature Quilt to be made into a size 3 coat.

Affinity Map

Usability Testing Insights

Unanimous Tester Feedback - 100%:

  • Loved seeing customers wearing the coats they had purchased

  • Enjoyed browsing the hi-fi product pictures

  • Stopped scrolling at the bottom of the product pictures on the product page - they did not know there was a footer

  • Suggested that sizing should be related to modern sizing, instead of using a new system

Feedback From Most Testers - 66%:

  • Loved reading about quilt history

  • Found the site easy to use

  • Didn’t use the filter on the browse page

  • Was not clear that you could make the quilt into a coat

  • Wanted to know more about the making process and brand philosophy

Feedback from Half of Testers - 33%:

  • Thought the menu item “process” was too vague

  • Thought the labels on the product pictures loaded too slowly

  • Suggested having prices and labels on the products

Prototype revisions

Revisions deemed high impact and low effort were my first priority and were implemented for the second version of the prototype.

Prototype Updates

Usability testing showed that users found the yellow hard on the eyes and the collage graphics too busy.

  1. Removal of the confusing menu item “process”.

  2. Deconstruction of the collage in order to create a clear visual hierarchy while conveying the purpose of the brand.

  3. Inclusion of brand ethos on the landing page.

4. Clarification of minor button function. Changed to a default outline, with a highlighted hover.

5. Inclusion of amount of products shown on page.

6. Inclusion of product name and price.

7. Navigation to shop/browse page included on product page where there was previously no direct access.

8. Clarification of the ability to buy either the quilt or turn the quilt into a coat.

9. The addition of a rendering showing a potential quilt coat design.

11. Clarification of minor button function. Changed to a default outline, with a highlighted hover.

12. Cart buttons take on an updated design pattern that promotes checkout.

13. Clarification of minor button function. Changed to a default outline, with a highlighted hover, and bolded text when clicked.

14. Checkout buttons take on an updated design pattern that promotes completion of the checkout process.

15. Updated size chart that utilizes an existing sizing system for ease of use and understanding.

16. Clarification of minor button function. Changed to a default outline, with a highlighted hover, and bolded text when clicked.

Updated Prototype

Next
Next

Venmo: Implementing a Bill Split Function