CASE STUDY

Sans - E-commerce Responsive Site

Sans was a new DTC air purifier brand entering a saturated market with no name recognition and no technical advantage over better-known competitors. Their goal was to launch a responsive e-commerce website that could drive early sales and position Sans as a high-end wellness product for modern, health-conscious consumers.
‍
As the sole UX designer on a three-month engagement, I collaborated directly with the founding team to define the brand’s positioning and design an experience that would feel premium, aspirational, and easy to trust. Working within the constraints of a Shopify template and existing logo assets, I led the end-to-end UX process, from initial user research through brand strategy, prototyping, and design delivery. The result helped Sans generate over $1M in its first year.

Project Summary

Tools

Sketch
Proto.io

Duration

3 months

Role

Sole UX Designer

Team

Founders

Constraints

Shopify templates
Pre-existing brand assets

Responsibilities

User research
Competitive analysis
Persona development
UX design
Brand positioning
Visual design
Web design
Prototype testing
Design handoff

Problem

The stakes were high. Sans wasn’t just a new product — it was trying to create demand in a category most people didn’t understand. The founders believed they could win over wellness-focused millennials, but didn’t know what those users cared about when making a purchase like this.

The challenge was twofold:

  • Business need
    Inspire trust and differentiate Sans from commodity competitors in a crowded DTC space.
  • User need
    Explain what air purification does, why it matters, and why Sans is worth the price.

To bridge that gap, I needed to uncover what actually influenced behavior — not just build a site, but shape a positioning strategy that could make Sans feel like a product people wanted.

Research

To understand what would drive Sans’s target users and how to position the product effectively, I designed a two-part research plan grounded in the founders’ initial market hypothesis.

User Interviews

I recruited five participants who matched the target profile — urban, health-conscious millennials — covering diverse genders, family structures, and living setups. The goal was to uncover:
‍

  • What they knew (or didn’t know) about air purification.
  • What influenced their decisions when buying wellness-related products.
  • How they approached high-ticket purchases in general.

After synthesizing the interviews, four key themes emerged:

Research and recommendations reduce risk

People relied on external validation — reviews, expert opinions, or peer recommendations — before buying something unfamiliar or expensive.

Air purifiers solve a problem users don’t recognize

Most participants didn’t actually know what air purifiers do — they weren’t aware they needed one.

Wellness is narrowly defined

Users associated health with diet and exercise, not air quality or the home environment.

Brand perception matters

They gravitated toward sites that felt sleek, informative, fresh, and slightly futuristic.

Competitive Analysis

In parallel, I conducted a competitive scan — starting with brands the client identified and expanding to those most frequently mentioned in user reviews and third-party rankings. To determine what actually mattered to buyers, I extracted common evaluation criteria directly from those reviews: things like price, noise level, coverage area, and visual footprint.

Price:

Coverage Area:

Noise:

Energy:

Filter Costs:

Size:

CADR:

Warranty:

Top brand in each spec category

The findings were clear. Sans didn’t lead in any category.

This meant Sans couldn’t simply compete on specs — we needed a design and brand experience that could differentiate on emotional and lifestyle appeal.

Design Direction

Persona and Brand Position

To guide the design, I created two personas: Jess, a young professional focused on wellness and simplicity, and Abbie, a working mother prioritizing her family’s health. These reflected both the founders’ initial targets and patterns I observed in early user interviews. Each represented a key market segment — and both needed to connect with Sans not just as a functional device, but as a meaningful addition to their lifestyle.

JEss

"Being at my best means taking care of myself. I prioritize wellness because it improves every aspect of my life."

age

27

city

Los Angeles

household income

$90,000
ABBIE

"My family is the mostimportant thing in the world to me. I want my kids to be happy, healthy, and safe, and I want to be healthy for them.”

age

36

city

New York City

household income

$280,000

Discussing the research findings with the founders, I proposed a strategic shift: rather than compete spec-for-spec with better-known brands, Sans should position itself as a lifestyle product. This meant elevating emotional resonance over technical details — aligning the brand with aspirational wellness goals, not just air purification.
‍
We agreed the design should communicate three key traits:

  • Aspirational - it should feel like a modern wellness product, not a medical device.
  • Simple - minimal, confident, and clear.
  • High tech - capable but never cold.

This became the lens through which every visual and structural decision was made.

Information Architecture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Homepage/The Showroom

A scrollable narrative linking lifestyle imagery with product education. It walked users through:

  • The benefits of an air purifier
  • What it targets
  • Why it matters in the user’s home

How it Works

Designed for users who did their research, this screen focused on validation:

  • Technical specs
  • Clean, product-forward imagery

Product Page

An abridged version of the above, designed to stand alone for users who bypassed the homepage. Same content, different structure — reinforcing the message without redundancy.

Design

Shopify template

The client had a Shopify template that he liked that contained various module layouts, so rather than creating wireframes, it was a matter of looking through the existing modules and translating them for my use.

For example this I used this module...

...to create the "what a sans traps" section:

Brand elements

The client had already decided on many brand elements before I came on board. The logo already existed and included the colors and font that would define the brand.

I suggested that the word "breathe" might be a bit confusing in terms of people understanding what the actual product's name is (just Sans), and that when the logo was used in smaller instances, the word would become unreadable, but the client was happy with the logo as it was.

Typography

I chose Lato for the body text as it paired well with the logo's Ubuntu, but was far simpler. I also made sure to keep things clean and simple, not just because this was a millennial brand, but because cleanliness would be an important association with the product.

Photo shoot

After selecting the modules, I collaborated with the client on a list of assets that we would need from the photo shoot for the site.  The shoot then took place in a modern and pristine house, with models were young, diverse, and attractive. We covered scenarios like working from home, yoga, cooking, playing with kids, sleeping, and hanging out.

Going hi-fi

Put it all together and the first desktop pages looked like this:

Home page
How it works
Product page

And the mobile versions...

Home page
How it works
Product page

Testing

Can users find what they need?

Next, I created a prototype using proto.io. I don't know what it is that I enjoy so much about building prototypes, but I do.  This wasn't a typical situation since Shopify had the checkout process nailed, so what I needed to ensure was that, users could easily find the information I asked them to.
‍

I had five millennials of varying ages, family statuses, genders and incomes look around the pages on their own for a few minutes before asking them to find and interpret specific information and for their overall impressions. The results were promising as they could all find the information to answer my questions about the product with ease, and could also get to the checkout process intuitively.

Does the tone resonate?

Because branding and "feel" were so important for this project, I also made a Typeform survey that allowed users to anonymously choose which five adjectives best describe the site. The words they had to choose from were split evenly between positive and negative, in order to ensure they weren't pushed toward the answers I wanted to see. I also allowed them to add any additional comments. 17 people responded:

clean

calm

100%

professional

easy-to-use

fresh

clear

attractive

inviting

boring

dated

dull

cold

busy

confusing

too technical

unappealing

Overall, very encouraging. The positive words vastly outnumbered the negative ones, and highlighted the attributes I was aiming for.

Re-iterate

Handing off in the right direction

While the client was satisfied with the design as it was and was ready to launch, I explained the testing results and informed him of some quick suggestions that could make substantial impacts on the brand perception:

  • Change the body text to something rounder, so that it would feel more airy, modern, and youthful.
  • Put all the headings in title case to avoid coming across as unprofessional. A few other people had brought this up and it's not a hill worth dying on.
  • Edit out text from the densest paragraph. I was pretty sure I knew which paragraph the survey participant was referring to, and now I couldn't unsee it in the "filter" section on the product page.
  • Change the brand's blue to one that's a bit more rich to ensure that it came across as vital and premium rather than sterile and clinical.
  • Consider one of the other versions of the logo that the logo designer had delivered. Just the name in grey - cleaner, simpler, fresher.

After a quick overhaul, this is what the final pages looked like:

Home page
How it works
Product page

And the mobile versions...

Home page
How it works
Product page
Next steps
  • PR - getting influencers and experts to vouch for the product, and getting it reviewed by the big reviewers would ensure that research-reliant users can feel comfortable choosing Sans.
  • Reviews - a section in the home page (once there are enough reviews) to add social validation.
Some reflections and learnings
  • Clear communication is key. Trying to develop a brand isn't just about aesthetics, but strategy and patience, and next time I would try to ensure that the client and I were on the same page about not just design, but the overall brand direction, as this would affect the design. I would discuss the non-design elements of the brand and how to make them congruent with the site - things like pricing, advertising placement, etc.
  • The design process can dovetail neatly with marketing - the insights I discovered in the research phase applied to UX and marketing and that was a bit surprising.