Juan Coleman


Blueair Website

DATE: October 2015 - July 2016


Blueair has been pioneering and championing indoor air purification to improve human health and well-being for over twenty years. After the design success of the Blueair IoT application, I was asked to lead the design of the Blueair website. There was a grand vision for the website as set by the marketing team. Firstly, it had to be a brochure site listing all their devices and accessories. Secondly, it had to educate clients about the importance of air quality and inform them about health risks and mitigation methods. All this had to be tied together in a globally rolled out e-commerce experience. They also wanted to add various interactive tools to enhance the browsing and shopping experience to find the best match for clients’ needs. This browsing experience included the devices themselves and related accessories and filter types for various environments and localised content. Besides this front-end work, I was asked to help design the support and monitoring tool. This tool would be used by the Blueair support team to monitor devices and manage and control a network of devices remotely in the case of a hotel, school or any large facility.

product page design (BELOW)

The Blueair Website project was a massive endeavour as it had to be done from scratch to incorporate various products across product families. Then have the accessories associated with those products linked to them. It also had to offer a shipping experience on-par with being in a physical showroom so that users could decide and check out with confidence. I worked closely with a CMS focussed offshore design team. We took a phased approach to the design and implementation. Firstly, our goal was to bring the entire product catalogue onto the site and link their accessories. We then worked on the check-out flow, and once that was done, we devised many tools for browsing and filtering to make the decision process easier for the clients. I worked with an external branding agency to define the look for the website’s front page, and once that was done, I used that as inspiration for the remainder of the site.  I also designed a support FAQ and Troubleshooting, that was easy to browse to lighten the load on the support team. This was a big undertaking within itself needing to house manuals in various languages as well as ‘How to’ videos.  I then worked with the service designers and support team to create a tool to monitor devices for customer support remotely. This then led to a more extensive project which was remote monitoring and control of entire facilities. A key goal was also to have a fully responsive mobile optimised experience, and I paid close attention to this, often building prototypes with a mobile-first approach. 


I was design lead for the entire project, interacting with the Blueair senior marketing team and the offshore engineering team to drive change at an incredible rate. I also worked with the localisation, copywriting, translation and support teams. I planned out the content, devised a content strategy and assembled a guide for those adding content. I presented the design and implementation strategy to the senior stakeholders to gain sign-off of the proposed transformational changes. I tested the more complex tools like the help-me-choose module for filters and purifiers with users. As localisation was vital, I interviewed and tested worldwide with a focus on China and the USA, which were Blueair’s most significant markets. 


My role was primarily comprised of design leadership and strategy, hands-on design and product management. I had to pull together resources from across the Blueair organisation and external copywriters, off-shore engineering teams, and other contributors. I also acted as a product manager, managing a roadmap to deliver and communicate progress to the broader Blueair team and key international stakeholders. The role offered me the opportunity to work on many moving parts across design and product as a whole. I was the sole point of contact for the engineering team and often had to manage my workload while being supportive and conscious of their needs. The project meant learning a lot about localisation and cultures and designing an offering that communicated well given the geography it was used in. It also allowed me to understand global markets and test with users from all walks of life, occasionally with conflicting points of view. It was rewarding to find multilateral solutions that considered cultural quirks.


BELOW IS THE STRATEGY that I DEVISED for the web experience


The thumbnails below are clickable


Many prototypes were built throughout the project, below is the 'compare module'

You can interact with the embedded prototype below. 

Use your trackpad to scroll the phone screen. Follow the steps below to see the interaction.

  1. Hit the blue “Compare” button
  2. Choose the Sense+ product
  3. Choose the Classic 203 Slim product
  4. You can now scroll the screen to compare their features.
  5. Close the compare tool by hitting the blue ‘Compare’ button again

Juan Coleman