Leah likes to make internet and other things in New York City. She currently works at a studio in Brooklyn called Type/Code

emailcv
BackVisual Design, UI, UXblueair.com2024

Mr. Right


A Swedish air purifier brand that needed a simplified ecommerce platform, and optimized brand presence for their American market.


The original user experience had a tangled web of product information that left users with no clear direction on which product was right for them. The products looked similar across the different product tiers, but their cost varied greatly because of the technical features. We needed to find a way to guide users to the product that’s right for them, while educating them on the specific features that made each model special.

Our UX team conducted user research. With their findings, the team developed a customer journey that defined the needs of the user when purchasing an air purifier. What we discovered is most consumers did not know why they would need an air purifier. (Keep in mind this is all pre-Covid.)


Plan

  1. Create a visual and messaging framework for the U.S. site that was consistent with the brand across all platforms
  2. Organize the content so users’ can understand the different product tiers
  3. Optimize the checkout, and incentivise users to sign up for their Filter Plan program

Art Direction

We first needed to establish a new brand direction for the American market. Based on our initial user research, we were able to establish a user persona for the American market. This persona was a woman, between 30-50, most likely living in an urban area with a family. Taking this persona (as well as legacy brand standards from Blueair into account) I created a moodboard of elements we could use as a guide to design the new experience.

This moodboard helped our conversation with the client to understand the visual strategy we wanted to take with this interface design. I know it sounds cheesy, but we wanted users to feel like they were breathing better while interacting with the brand. We recommended photography with modern interiors, and young, healthy children smiling. Having the product shot with high-end interior design helped elevate the product’s Swedish design. Close-up shots and renderings would showcase how the technical could be beautiful.


Design

I collaborated closely with the UX team to create an interface that we could hand over to the client’s internal development team. Our execution plan was broken down into three parts; simplified storytelling, product categorization, and an intuitive checkout.

In order to simplify the brand story, we reworked the content hierarchy to focus more on the benefits of purchasing an air purifier instead of Blueair as a company. We created purposeful content funnels with high-level features allowing the user to dig deeper into a product. We added benefit-focused headlines which allow for scannable page content.


To help organize the product tiers, we recategorized the Blueair product catalog to be more need focused. Products were originally only grouped by product family which resulted in a lot of time spent researching the differences between families. We implemented new ways to categorize the products based on the users’ room size, price and need. We built this categorization into the navigation so users can always stay on track.

We simplified the look of the product listing page so that the product images could visually sit on the same axis as the user scrolled down the page. One of the big visual differences between the products was their height. The old Blueair site had them all scaled to fit in the same container, so it was hard to see this visual difference as a user.


There was a lot of content the client wanted “above the fold”. So I designed a fixed hero image in the product detail page so the top container would hold more variable content depending on the product needs, once the user scrolled past the product data on the top, they would be able to scroll past and see feature content underneath with key product data and a call-to-action sticky on top.

In order to make the Blueair checkout process more intuitive, we had to help users better understand the products they were purchasing. Blueair has many different types of purchasing within the site; a user can buy an air purifier, a filter or a filter subscription. This left users unsure of what they were paying for now, what they were paying to have shipped later, and which charges might be reoccurring. This caused problems in two areas of the site: the checkout flow and the cart.

In the old checkout flow, consumers often had a difficult time understanding what the costs were to purchase an air purifier, versus the costs of signing up for a filter plan subscription. Through user testing, we discovered that users did not understand their current filter subscription. To help better communicate this program, we changed the name from Filter Club to Filter Plan Subscription, simplified the number of steps to sign up, and implemented a "Help me Choose" flow to allow the user to input their current Blueair air purifier model and receive appropriate recommendations. These small changes helped new and existing customers better understand how to purchase and care for their Blueair products.

Prototype

We pitched this optimized app design for the latest release of connected products from Blueair. This app was meant to let users control their products remotely, and get a real-time sense of how their purifiers are effectively cleaning the air in their home.

All WorkNext