%202.png)
Sans was a new direct-to-consumer purifier brand breaking into a crowded market with no name recognition and no technical edge. They needed a responsive e-commerce site that could drive early sales and position Sans as a premium wellness product.
As the sole designer on a three-month contract I shaped brand tone, adapted a Shopify theme, and partnered with the founder on photography and micro-copy.
Sans was preparing to launch a new air purifier aimed at health-conscious millennials. The founders believed the product could stand out on both specs and design — but it wasn’t clear how much those things actually mattered to potential buyers.
The business need was to position Sans effectively in a crowded market, where other wellness brands were gaining traction.
They needed a responsive e-commerce site that could drive early sales and position Sans as a premium wellness product for modern, health-conscious shoppers. Before we could build the site, we had to understand what shaped buyer behavior — and how to communicate Sans’s value in a way that would resonate.
To figure this out, I ran two kinds of research: user interviews to learn how people thought and shopped, and a competitive scan to see where Sans could stand out—or where it couldn’t.
I interviewed five participants who aligned with Sans’s target audience: urban, health-conscious millennials with disposable income. While they varied in age, household, and living space, they shared common attitudes around wellness — and revealed a striking gap between how they defined health and what air purifiers offered.
To synthesize the findings, I organized direct quotes and paraphrased insights into an affinity map (below), revealing four core themes:
Most participants didn’t know what air purifiers actually did. Some assumed they were only for wildfires; others thought HVAC filters were enough. One user called it “a load of BS. Sucks the dust.”
Participants relied on reviews, Reddit threads, and friend recommendations before purchasing wellness products. Aesthetics and return policies also built confidence: “They care about their product and their brand.”
Users equated wellness with things like vitamins, cooking habits, and exercise. Few included air quality in their health routines — which explained the lack of urgency.
Even when interested, users quickly deprioritized air purifiers. They were seen as indulgent, expensive, or ugly: “Looks like a medical appliance.”
.png)
Grouped quotes and observations from five interviews, synthesized into four core themes.
To understand how consumers evaluate air purifiers, I analyzed top brands featured in third-party reviews and customer rankings. I pulled the spec categories buyers referenced most often — like coverage, noise, and energy use — and mapped which brands led each one.
Price:
Coverage Area:
Noise:
Energy:
Filter Costs:
Size:
CADR:
Warranty:
Specs and top-performing brands cited most frequently in customer reviews and industry roundups. Sans didn’t lead in any category, reinforcing the need to differentiate on lifestyle, not tech.
This confirmed that Sans didn’t lead in any measurable category. With no clear technical advantage to lean on, I recommended focusing on emotional trust and lifestyle positioning: helping Sans stand out by making the product feel desirable, not just functional.
These findings shaped every design decision moving forward, from layout pacing to tone and visual structure.
With research showing that most users didn’t understand — or prioritize — air purifiers, the goal wasn’t just to build a clean website. We needed to reframe the product’s value so it felt credible, relevant, and worth caring about. Every page needed to tell a story: starting from emotion and building trust through clarity. It also had to offer just enough technical detail to support the decision without overwhelming it.
We used a vertical scroll strategy to guide users through that story. Layout, language, and image choices all worked together to reframe Sans as a calm, credible lifestyle upgrade — turning a low-priority category into something desirable.
Information Architecture & Narrative Flow
The design was structured as a scrollable narrative across three screens — each serving a distinct role in the user’s decision process:
Each screen introduced just enough information to move the user forward — anchoring key CTAs at natural decision points and avoiding repetition between pages.
Wireframes
To finalize structure before applying visual styling, I created grayscale wireframes for each of the site’s core pages: Homepage, How It Works, and Product Page. These wireframes allowed me to refine layout hierarchy, validate the scroll narrative, and annotate key UX decisions — all while working within the constraints of a third-party Shopify template.
Each page was designed to make Sans feel like a lifestyle upgrade—using scroll flow, clear hierarchy, and approachable language to turn an overlooked product into something desirable.
Homepage Wireframe
Annotations
1
Hero Image and Message
Shows Sans in a calm, well-designed setting to establish tone. The goal was to open with a moment of visual ease — positioning Sans as part of a considered, modern lifestyle.
2
Benefits Grid
Highlights practical outcomes like better sleep and lower energy bills. These clear, everyday advantages were chosen to build relevance early in the scroll.
3
What Sans Traps
Explains the core functionality in plain terms — what the machine actually filters out — without jumping straight to specs or science.
4
Environmental Relevance
Makes those filtered elements feel real by tying them to sources like city smog or pet dander, helping users understand why this might matter in their own lives.
How it Works Wireframe
Annotations
1
Section Intro
Here’s how it works” sets the page up as a trust-building space, not a continuation of marketing copy
2
4 Stage Breakdown
Highlights practical outcomes like better sleep and lower energy bills. These clear, everyday advantages were chosen to build relevance early in the scroll.
3
Mid-Scroll CTA
Appears once users have context, offering a frictionless transition to the purchase decision.
4
Specs Table
Placed at the bottom for detail-oriented users — providing clarity without blocking the scroll narrative above.
Product Page Wireframe
Annotations
1
Product Hero
Price, imagery, key bullet points, and CTA are presented immediately — allowing high-intent users to act quickly.
2
Feature Stack
Each feature (e.g., portability, air quality indicator, sleep mode) is broken out into its own visual module, paired with contextual imagery. The layout is focused on function, not story.
3
Final CTA
Appears after the value stack — a clean handoff for users who scrolled through the entire set of features.
4
Specs Table
Same structure as the How It Works page — a consistent way to close the scroll for spec-focused shoppers.
Before applying full visuals, I also had to account for a core limitation: the site had to be built on a third-party Shopify template with only light customization.
This shaped both layout and content decisions. Rather than designing fully bespoke components, I adapted native Shopify modules to create a clear, trustworthy scroll experience. I prioritized structure over flourishes — sequencing modules to build emotional resonance, validate product benefits, and support purchase intent. Each layout decision balanced storytelling goals with technical feasibility, ensuring the final designs could be implemented quickly without sacrificing clarity or tone.
Feature-focused original layout:
Real-world air concerns (dust, smoke, dander):
Adapted a native Shopify module into a custom-fit layout that supported Sans’s content and tone — without requiring full code customization.
While we were working within a preset logo and typeface (Ubuntu), I made several decisions to reinforce clarity, cleanliness, and warmth:
These choices were all about positioning Sans as more than a gadget—something practical and attractive that fit naturally into people’s lives.
The final screens brought everything together: scroll structure, page logic, tone, and imagery. Each screen had a defined purpose, a clear CTA, and a visual personality that aligned with how our users thought about wellness and trust.
Design Tradeoffs
Some tradeoffs that shaped the final experience:
Since we had to use a pre-set Shopify template, I adapted sections like “What Sans Traps” into existing modules. This kept the flow clear without requiring full custom code.
Users didn’t ask for dense specs, but they did need enough detail to feel confident. I added spec tables on two pages, but most of the site emphasized relatable use cases and calm, trustworthy tone — since confidence came more from feel than function.
The homepage covered the full arc: an emotional hook, product benefits, and environmental context. I debated cutting sections to reduce scroll length but kept the flow after testing confirmed that the pacing felt natural and helpful.
With the site ready for handoff, I created a high-fidelity prototype in Proto.io to validate whether users could understand the product, navigate the content, and feel confident in the brand. Since Shopify handled the checkout flow, the focus here was on content clarity, tone, and usability — particularly for first-time buyers who might not have been seeking an air purifier in the first place.
I ran lightweight usability testing with five participants who fit Sans’s target audience — millennials across a range of incomes, family structures, and living situations. Each participant explored the prototype freely before I asked them to locate and interpret specific information: What does Sans actually remove from the air? What makes it different? How would you know if it works?
Most participants found the scroll structure intuitive and easy to follow. One summed it up simply: “It was easy. Flowed really well.”
But usability wasn’t the only goal. Because trust and tone were central to Sans’s positioning, I also ran a lightweight tone validation survey using Typeform. Seventeen participants selected five words from a balanced list of positive and negative descriptors to describe the site.
Most selected words like clean, calm, and professional — closely aligning with the brand tone we were aiming for. While the sample was small, the results reinforced our choices.
100%
Easy-to-use
Fresh
Clear
Attractive
Inviting
Boring
Dated
Dull
Cold
Busy
Confusing
Too technical
Unappealing
Visual breakdown of tone feedback. Most users saw the site as polished and trustworthy.
The testing results reinforced much of what we had already built — but they also surfaced a few areas where small refinements could make a meaningful difference.
Typography
I swapped the body font from Lato to Avenir. While both were clean and readable, Avenir brought a rounder, more modern feel that better matched the visual tone we were aiming for.
Updated body typeface to Avenir for added warmth and modernity.
Headings
The original lowercase headings were used to match the style of the logo, but I had already begun questioning whether that choice undermined credibility. A few testers also described the lowercase headings as feeling “less trustworthy,” which confirmed my hesitation. I shifted to sentence case to increase perceived professionalism without losing approachability.
Revised heading case to improve perceived trust and professionalism.
Color Tuning
The original accent blue (#045AA8) felt cold and clinical, and looked strikingly similar to the palettes used by several competitors. I recommended shifting to a deeper, more distinctive blue (#132B73) that gave the interface more visual weight and better supported Sans’s emotional tone.
Updated primary color to improve differentiation and align with emotional tone.
Logo Variant
The small “breathe” tagline in the original logo often became illegible at smaller scales — and even at full size, it sometimes confused the brand name. I recommended simplifying the mark to clarify the identity. The client opted to keep the original, but my version was included in final files for potential future use.
Recommended going with the simplest of the existing logo variants to improve brand clarity as well as legibility at smaller scales.
Finally, I also restructured the wordiest section of the product details page to improve flow and scannability — especially for users who were skimming.
These changes were documented and shared with the client at handoff. While not all were implemented immediately, the updated versions — including refined typography, revised headings, and adjusted copy — were incorporated into my own final designs.
Final Designs with Refinements Applied
This project pushed me to do more than design a clean site — it asked me to change how users thought about a product they hadn’t gone looking for. Most air purifier sites lead with specs. We led with story: starting from emotion, building trust through clarity, and backing it all up with function. That shift wasn’t just visual. It shaped every decision, from layout pacing to photo direction.
As a designer, it also stretched me beyond the screen. I collaborated on a lifestyle photo shoot, adapted rigid Shopify modules into a coherent narrative, and made typography and tone decisions that reflected both brand and audience — then revised them again post-testing to get closer to the mark. It reminded me that design is always a negotiation between vision, constraints, and reality. Even small choices—like a heading style or a color tweak—can shape how someone feels about a product.
The result was a site that helped launch a new brand into a crowded space — and support over $1 million in sales within its first year. It wasn’t flashy. But it was clear, confident, and human. And that, for this audience, was exactly the point.