sans: responsive e-commerce site

Charged with the task of creating a responsive site to launch and sell a single product that users don't understand, from a brand they've never heard of, I helped Sans generate over $1MM in sales in its first year.

skills

User Research
competitor research
Information Architecture
copywriting
web design

tools

sketch
proto.io
typeform

time frame

4 weeks

introducing sans for cleaner air

In 2020, Sans was a new competitor in a crowded field of air purifiers. The client needed a responsive website that would generate sales and would work with an existing Shopify template.

who are the users?

The client hypothesized that the main market for their air purifier should be established, professional millennials living in big cities.

  1. They can afford the premium pricing 💰
  2. They are health conscious 🏃
  3. their spaces would be small enough for a single unit to cover 🏠
    (or at least a single unit per floor)

hearing from the target users

I interviewed five people that fit this category. These five covered men and women, married and single, kids or none, and home or apartment.

Examples of questions:

  • What do air purifiers do?
  • What motivates you to buy a specific wellness product?
  • What motivated you to buy a recent somewhat-big-ticket item?

You can click the image for  more detailed results:

User insights

While there weren't a lot of obvious patterns, certain insights did emerge:

Recommendations and research are very important for validating this kind of purchase.

Most really don't know what an air purifier does - we're solving a problem they're not aware of.

Most associate health and wellness with diet and exercise.

They like an online presence that is sleek, informative, fresh, futuristic, and fun.

the players in the air purification game

Now that I had some understanding of the target consumer, I turned to the competition. According to the client, Sans's unique value proposition is its price relative to the high coverage area. This would be a great way to stand out, but I wanted to get a fuller picture of where Sans stood in the industry.

I compared Sans to:

  • The companies that the client saw as competitors
  • The brands that came up consistently when I searched for recommendations, since our users conduct similar research
(this also revealed the criteria that users would come across in their research)


And the results were...

A reality check and some new challenges

Ok, this was a big "record scratch" moment. It turned out that Sans's price relative to the amount of space in a home that it could cover wasn't really all that unique. So a few challenges:

  • no specifications on which Sans beats all the competition
  • a short warranty, which makes purchasing an unknown brand riskier
  • no trial period or clear return policy - more risk

So now we have a product that is brand new (so there are no recommendations or reviews out there), and has no clear claim of superiority to the competitors in the field on any quantitative specification.

onward and upward with personas

I developed two personas based on my interviews and the client's targets to help guide my later design decisions.

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 worldto me. I want my kids to behappy, healthy, and safe,and I want to be healthy for them.”

age

36

city

New York City

household income

$280,000

Refining the Brand

I discussed my findings with the client and suggested we try to carve out a niche to separate Sans from its competitors. Something like a lifestyle brand - we would position Sans as the air purifier that is made to fit the lifestyles of the personas. These were the elements that I felt the design needed in order to resonate with this market:

∙ aspirational

∙ simple

∙ high-tech

structuring simple IA and content

The checkout flow was simple: click "Buy Now" and check out. However, to figure out the rest of information architecture, I reviewed the research and decided that we just needed 2 screens.

Homepage/The Showroom

all the imagery that associates Sans with an aspirational lifestyle, leading users through the following sections:

  • the benefits of an air purifier
  • what an air purifier targets
  • why this applies to the user's home

How it Works

Sans is a quality product that can compete with the best of them.  For the users that did their research, this page would validate that with:

  • technical specifications
  • high-tech imagery

But even though the home page was essentially a "product page", the client wanted an additional product page before the cart is reached - one that could stand on its own even if a user somehow bypassed the home page.


Product Page

an abridged summary of the other two, with the information presented in a manner different enough to seem new.

design constraints

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.

other design decisions

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:

And the mobile versions...

putting the designs to the test

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.

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:

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.
Feel like reading another case study?

ncrowd for netflix

read the case