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.
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.
The client hypothesized that the main market for their air purifier should be established, professional millennials living in big cities.
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:
You can click the image for more detailed results:
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.
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:
And the results were...
Price:
Coverage Area:
Noise:
Energy:
Filter Costs:
Size:
CADR:
Warranty:
... not
great
for
Sans.
You
can
look
here
for
a
more
detailed
breakdown
but
the
bottom
line
is,
Sans
isn't
up
there.
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:
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.
I developed two personas based on my interviews and the client's targets to help guide my later design decisions.
"Being at my best means taking care of myself. I prioritize wellness because it improves every aspect of my life."
"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.”
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
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:
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:
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.
For example this I used this module...
...to create the "what a sans traps" section:
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.
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.
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.
Put it all together and the first desktop pages looked like this:
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.
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:
100%
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.
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:
After a quick overhaul, this is what the final pages looked like:
read the case
case coming soon