See more projects

Blueair

Redesigning the Blueair application to provide a better customer experience for people owning air purifiers in their homes or workplaces.

Reading time: 18 minutes

Home screen onboarding.

Process

Double diamond is the name of the game when we think about the process. However, every project is widely different, and time pressure is intense, so we have to figure out how to use the available time for the greatest effect. In the following, I will list the steps we took to ensure the success of this project. Though these steps look linear, a lot of them happened parallelly to maximize our efficiency and speed.

Sales

• Create and present request for proposal
• Initial project planning

Discovery

• User interviews
• Competitor research
• Air quality science studies

3

Sketching

• Validating with various busines and development

4

Prototyping

• High interactivity, low visual fidelity in Axure

User research phase 1

• Interviews
• Usability tests
• Focusing on market fit

6

Look and feel

• Based on brandbook
• Validated with users

UI Design

• Two designers working in Sketch with Abstract
• Design system
• Continous handover to development

User research phase 2

• Focusing on usability and accessibility

9

Development assistance

• Handover was continuous, but after we delivered the design, the other designer had the chance to follow up with developers once a week

Project

Blueair Company

Blueair is a Swedish market leading manufacturer of air purification devices. Aimed at home consumers as well as industrial environments, two of their most important differentiators are leading the science of air filtration technology and providing higher performance than their competitors.

What is an air purifier?
According to Wikipedia: "An air purifier or air cleaner is a device which removes contaminants from the air in a room to improve indoor air quality. These devices are commonly marketed as being beneficial to allergy sufferers and asthmatics, and at reducing or eliminating second-hand tobacco smoke."

Above, one of the Blueair more compact air purifier models.

Scope

We had eight weeks starting from the acceptance of a request for proposal, which helped us secure the project. I was the UX lead for those two months of the project, working with a designer and a researcher to develop and execute cross-cultural discovery research and usability testing to deliver validated design directly to development and participate in sprint planning. 

Having continuous communication with the developers, we provided support throughout the third-party development team's delivery process, working to alleviate the pressure which had to work on a tight deadline.

Sales

I got involved right from the start of the project. I assisted our business developers in creating a feasible preliminary project plan. For the sales pitch, I made a design proposal and presented it to the client’s team.

Team

We worked together with Blueair's digital product team and a third party development company located in South Africa. The Blueair team consisted of the Chief Product Officer, a UX lead, and a lead developer. On the side of development, we were in contact with a lead developer and later also a scrum master, occasionally involving other developers if we needed specific expert opinions.

For the project's duration, we scheduled one weekly meeting with the product team and a separate weekly meeting with the development team to make sure we have enough time discussing the product and customer experience and handover and engineering questions.

Project goal

The client clearly defined the goal. They would like a brand new app in the App Store and Google Play Store with an average rating higher than 4.0 (the previous version got less than 1.5 in some countries). This app has to be ready by the beginning of the second fiscal quarter to complement Blueair’s release of a new, cutting-edge air purifier product family while also being compatible with legacy products.

My responsibilites

View
Hide
Key screens related to outdoor air.

Kickoff

Discovery

Our first step was to gather domain knowledge so we would be able to create a grounded design. We asked our client to share with us some of the business documentation. We used this to understand the context of the project and study the science of air quality, which served as the foundation for their product development and is also a field of science Blueair contributes to regularly in scientific research and articles.

Additionally, we looked at their direct and indirect competitors and considered possible forces that might affect the market in one way or another - having done that, we discussed Blueair’s opportunities in digital user experience with the company’s stakeholders.

6 Remote workshop

Project pace usually is incredibly fast at the agency, so we made sure that a lot of communication and knowledge transfer happened before so that the kickoff meeting could focus on the most critical aspects of our upcoming collaboration.

In total, we held six workshops to shine a light on essential topics:
• Goal prioritization
• Assumption matrix
• Fears and obstacles
• Personas
• Competitors
• 2 Region-specific customer journey

2 high level customer journey in order to lay out the most important differences between the US and China markets’ customer experiences.
Key screens related to indoor air.

Research

Usertesting the physical and digital product ondboarding with the previous app.

Culture and pollution history greatly influences how people use air purifiers.

Getting to know our audience

The target audience was incredibly diverse, with the two most crucial segments being the most distinct, namely China and the USA.

One of the most characteristic differences were how many times people want to interact with their air purifier to make sure it is doing its job.

Many users told us that they would prefer a one-button app that can help to forget about air quality. On the other hand, many people want to make sure that they are making the most of a machine seen as an investment for their health and well-being. The latter group also uses the same air purifier in different rooms throughout the day, monitoring when indoor pollution drops to an acceptable level before moving in.

“Air pollution is invisible; air purifiers are loud. How do we prove that it’s worth it to turn them on?”

Design

Sketches, prototypes, and validating with stakeholders

To make sure we were delivering features that customers want, we relied heavily on what we could learn by interviewing current customers and uncovering what they want, their needs, and their expectations.

Based on what we learned, we started by sketching on paper and whiteboard with the design team. We held regular brainstorming sessions, where we discussed the implications of different solutions for the same thing. After we agreed on the order of possible best solutions, I went on and created a prototype for each feature we discussed.

By testing the prototype, we always made sure that our users appreciated our feature ideas, and they were fluently useable across different customer segments.

Prototype phase
Final design

Single Home Screen

We placed the air purifier's performance in the context of indoor versus outdoor air quality to show the incredible performance these machines provide. This structure also encourages a more conscious device usage by letting the machine work only when necessary and making sure it did.

There is a possibility of checking the history of the performance to see how it correlates to outside air quality on the next screen

Early prototype
Final wireframe
Final design

Progressive disclosure

Display different levels of information separately to avoid cognitive overload.

Information and actions are available on the home screen that covers this application's most crucial user cases. Detailed information about indoor and outdoor air quality is shown further down in the hierarchy, presenting information when and where it is needed to balance the cognitive load.

Most important info on home screen.
Metric specific charts a tap away.
In depth information under Read More.

Air quality details

Outdoor air quality details are available at a glance for current or saved locations.

Users who have specific health reasons to become customers were conscious of the meaning of these values. For the rest, the colors indicate how the current AQI (cumulative value) is calculated.

Swipe for quick actions.

In many use cases, it is imperative to be able to interact with the air purifier quickly.

Turning the air purifier on and off or putting it in automatic and night mode is available by swiping the purifier's card on the home screen. Further actions and information are available after tapping the card.

More than a dozen variations were made to the interfaces to accommodate for the purifier models' capabilities.

New and legacy products

Blueair manufactured many different models of air purifiers throughout the years.

The app has to accommodate for the different capabilities not just for the new model but also for legacy ones.

A good case for neumorphic elements

We used them in case of features available on the physical product to create a sense of oneness between the app and the air purifiers.

The application’s most important raison d’etre is to create a bridge between the physical air purifier device and the user. Neumorphic elements have a mix of physical and digital visual cues.

Neumorphism: A mix between skeumorphism (mimicking physical objects) and minimalism.

Action sheet navigation

We wanted to make it possible to use the application in different depths to accommodate our audience's wildly different expectations.

Instead of relying on bottom navigation that distributes user journeys to different parts of the app equally, we decided to use slide up sheets for layering information.

This allows the user to reach the most important actions right under their thumbs very quickly. Yet when they dig deep, navigating back and forth, keeping their finger in the same location (close icon) or using gestures is also very fluent and enjoyable.

We used the dark and light contrast from Blueair’s brand book to signal if the user is seeing a page about outdoor or indoor air.

Outdoor

Home
Outdoor air quality details
Map

Indoor

Product page
Indoor air quality details
Product schedule

Communicating with colors, words, numbers, and shapes

Air quality is a relatively obscure science of which the understanding among the target audience varies a lot.

In China, air pollution has been part of everyday conversations for a long time, while in the US, the general understanding is not so high. Some of the most critical indicators have abbreviations only half of our users understand, but those who do expect to see them.

We relied heavily on colors, words, numbers, and graphs to put detailed air quality information in context, even for those who don’t understand the basics.

Educational material is also widely available in the app without overcrowding the most often used pages.

Consistent colors palette  throughout the app

Assigning air purifier to geographic location

Comparing indoor and outdoor air quality to see the value our air purifiers provide reassures our users that they made the right buying decision while also informing them when it is useful to turn the device on or not.

While in some countries, air purifiers are a relatively rare occurrence, in others where air pollution is rampant, they are part of everyday life. As so, a single user might operate multiple devices in different locations. At home, at the workplace, and maybe at their vacation home too.

We challenged ourselves to design an easy way to tell the app what location a purifier is located so that we can overlay indoor and outdoor air quality graphs.

Users can either assign a location to the air purifier on the device-specific product page or appoint one or more air purifiers to a single location on the map.

Assign location
Assign device
Outdoor and indoor air quality on the same graph

Estimated Time Ahead for clean air

From all the different metrics we found that by far the most important for the majority of users is the “clean air ETA”

It was not evident though, how we should display this information for the user in a visual way. We talked through the different options to show with different stakeholders. We decided to use an absolute scale for showing the estimated time remaining while also showing current air quality with a background color.

Demonstration of different options to show air quality ETA visually.

Strategy

Strategic roadmap

When the project started, we had to make sure that we start delivering design as soon as possible. However, we always try to form a more strategic and longterm collaboration rather than a project-based one. We realized that there is no updated strategic roadmap available that focuses on the digital experience of Blueair. Their focus was on the physical design and engineering of their Purifier instead of the digital.

We decided to create a roadmap based on what we learned so far during the project about the users, the competitors, and the socio-cultural outlook of air purification science. After collecting all the features that we or any other stakeholder mentioned so far, we grouped the similar ones and created meaningful themes.

Then we used an effort-impact matrix to sort the themes based on how many resources we anticipate is needed for them versus how much value they provide to business and users. Having the themes weighted, we organized them with small overlapping areas after each other on the upcoming year's roadmap. After this, we defined the focus areas of digital development for each quarter. The closer they are to the present, the more certain, and further into the future, they are more assumptive and broad. When ready, we presented and handed over the roadmap to the team in Blueair.

Very high level roadmap containing themes to work on
What did we learn when creating the roadmap?
Looking around today, we should expect more and more competition on the market of high performing air purifiers as filtration technology advances and patterns go public. Climate and virus anxiety are also factors that will probably drive customers to buy air purification devices even more in the coming year. Because of intense competition between products that essentially have not much to differentiate based on other than a couple of quantifiable characteristics like efficiency and sound, the differentiating factor of the digital experience gets amplified, which is already visible in the approach that the most exciting newcomers in the industry take.
3 Models that influenced our way of thinking: The User Experience Pyramid, Kano model, and how uncertainty grows when we peer into the future.

Learnings

Project planning

Stepping outside the box when planning the project and adjusting the way we work was crucial to keep the deadline without compromising quality. We learned how to adapt the double diamond methodology and prioritized the activities we saw as creating the most value for the final product and experience.

Design system

During this project, the system we have created helped us tremendously to speed up the design process and maintain consistency. The time needed to be invested in the beginning pays off later on in the project. Conscious project planning can accommodate for this even in the shortest projects.

Strategic thinking

Having a roadmap is extremely important to be able to deliver meaningful features for the users. Most of the design can be done in a shorter time than the development, so it is useful to plan ahead. Pre-defining releases for development from MVP to nice-to-have features were an opportunity we missed out on because we got caught up trying to map out the product roadmap from a too indirect way.

Thank you for reading this case study! 🙏

Check out my other projects

Get in touch!

Let's have a conversation.

Thank you!
I will reply to you within 24 hours.
Sorry!
Something went wrong while submitting the form.
͡ 👁 ᴗ ͡👁
This site was built in Webflow by me