Redesigning the Blueair application to provide a better customer experience for people owning air purifiers in their homes or workplaces.
Reading time: 18 minutes
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.
• Create and present request for proposal
• Initial project planning
• User interviews
• Competitor research
• Air quality science studies
• Usability tests
• Focusing on market fit
• Two designers working in Sketch with Abstract
• Design system
• Continous handover to development
• Focusing on usability and accessibility
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."
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.
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.
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.
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.
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.
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
• 2 Region-specific customer journey
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.