Alen Product Customization Page Redesign

CASE STUDY

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. This should keep into account a mobile first approach and the fact that we had just migrated to a new platform in Shopify plus.

Animated prototype showing the main interactions in the Product Customization Page

Prod Page prototype


As a part of the UX research process I came up with 3 personas that represented the company's most typical customers and their goals, needs, and interests.

Jake persona

Susan persona

Rachel persona


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.


Jake is a busy professional with 2 kids. Jakes 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 who’s main hobby is decorating. She stumbled upon a PPC Ad showing a FLEX unit in a beatiful 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 at heart. She might have an Alen unit already. Rachel just realized she needs a unit for her living room. She types the Alen URL, choose the unit she feels fit better to her needs 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. These wireframes were used as prototypes on the first user testing conducted.

Alen BreatheSmart FLEX product page mobile wireframes

Alen BreatheSmart FLEX product page desktop wireframe


The first round of user testing allowed me to identify some pain points that came directly from observations and feedback from the testers. These pain points were translated into modifications made to the original design and a second iteration of wireframes that were subsequently tested.

After a few rounds of user testing and revisions, a high definition mockup of the product page was created and the required documentation handed over to developers for a Minimum Viable Product implementation.

Alen BreatheSmart FLEX product page

Alen BreatheSmart FLEX product page responsive