UX / UI / Visual Design

Redesigning the experience of customizing an air purifier

As a User Experience designer at Alen Corp I was tasked with the redesign of the air purifiers customization process on the product pages. The main objective of this project was to provide an efficient and intuitive way for the customer to add a designer panel and a filter to an air purifier and show the impact of their selection in the total price at any given time. Also, the user should be able to find more detailed information if they need to. This should take into account a mobile first approach and the fact that we had just migrated to a new platform on Shopify Plus. Below there is a screenshot showing the old product page and the main problems I would be addressing in the redesign:

• Hero image does not have enough prominence.
• 3 column grid makes the page feel overcrowded and conveys a lack of hierarchy.
• Too many thumbnails on the gallery section were hard to maintain and created page performance issues.
• UI does not feel engaging enough nor does it provide a compelling flow in the air purifier customization process.

As a part of the UX research process using qualitative data from the Amazon stores and Google Analytics, and then synthesizing the patterns I found, I came up with 3 personas that represented the company's most typical customers and their goals, needs, and aspirations.

Once the personas were elaborated, 3 main user flows were created and then tied to each persona describing the most likely entry point to the website based on the persona's online behavior, aspirations and preferences. It's worth noting that the data used to elaborate the personas came from customer reviews and site analytics. The wireframes built on them were then tested with users, so the design decisions were validated beyond the personas themselves.

Jake is a busy professional with 2 kids. Jake's main motivation is providing a healthy environment for his family. He receives an email promotion about a new Alen filter for heavy odors. He clicks on the product CTA that takes him to the product page. He is served a BreatheSmart product page with the Odor-Cell filter option pre-selected.

Susan is a retired or soon-to-be-retired woman whose main hobby is decorating. She stumbled upon a PPC ad showing a FLEX unit in a beautiful living room. She clicks on the ad and then she is being taken to the Why Design Matters Landing Page. After checking the page for a few minutes she clicks on the FLEX unit with the graphite panel and a product page with that option already selected is served, filter will be secondary in this scenario so the default option will be shown.

Rachel is a regular visitor and knows the Alen URL by heart. She might have an Alen unit already. Rachel just realized she needs a unit for her living room. She types the Alen URL, chooses the unit she feels fits her needs better from the main navigation –BreatheSmart FIT50. She goes to the BreatheSmart FIT50 product page with the default panel and filter selection. She adds it to the shopping cart.

After the main user flows were identified I then proceeded to design low fidelity wireframes to identify the main interactions and content blocks of the product page and how they would behave in a responsive environment. It was decided –for the sake of efficiency– that there would be only 2 breakpoints at the beginning. By the time the redesign was finished, mobile traffic represented more than 28% of the total traffic of this page, however, most people still finished their purchases on desktop. These wireframes were used as prototypes in the first round of user testing conducted.

Testing ran in three rounds of 2–3 participants each, using a wireframe prototype built in Sketch. Alen customers tested it in moderated, face-to-face sessions, while participants recruited through UserTesting.com worked through open-ended tasks on a published version of the prototype, thinking aloud as they went. The first round allowed me to identify some pain points that came directly from observations and feedback from the testers. Things like reversing the order of the designer panel and filter customization sections so filters come first. Reducing the amount of text in the short description panel by having anchor links that go to a more comprehensive section (deep dive) within the same page. Show the panel and filter option selected once the customization panel was collapsed, among others. These discoveries were translated into modifications made to the original design and a second iteration of wireframes that were subsequently tested.

After the three rounds of user testing and revisions, a high definition mockup of the product page was created. This one included some microinteractions that were proven effective at communicating with and delighting users when the customized air purifier was added to the cart. Once this was approved, the required documentation –redlines– was handed over to developers for a Minimum Viable Product implementation.

Animated prototype showing the main interactions and flows in the Product Customization Page

The new product page launched together with the migration to Shopify Plus. Four months after launch, revenue from air purifier sales was 31% higher than on the previous ASP-based site. Page speed, average order value, brand awareness, and customer engagement also improved, and bounce rate decreased significantly.