1 configurator for 14 products

The pandemic highlighted the need to engage directly with consumers rather than relying on stores like Home Depot and Lowe’s. LEVOLOR specializes in custom window shades and blinds to fit every space imaginable and offer a wide range of products. I evaluated their current tool, conducted research and interviews, and developed a new solution that is more scalable across their product portfolio. I also added new features to their visualizer to make the online experience more comparable to an in-store experience.

MY RESPONSIBILITIES

Heuristic Evaluation
Competitive Analysis
Stake Holder Interviews
User Interviews
User Flow Testing
Product Design

TEAM

Steve Boulton - UX Director
Kaleigh Nelson - UX Designer
Beth Haggerty - Project Manager

I chose neutral colors from LEVOLOR’s brand palette for the configurator’s UI to let the user’s configuration shines.

Designing a quick and easy way to go from step to step.

The number of steps users must take to complete a configuration can be astounding. Since no step can be removed, the challenge was to let users go through them quickly without missing anything crucial. I devised a two-part strategy:

1) A stepper showing all major steps and their status.

2) A sidebar for users to naturally scroll down as they customize their product.

The stepper acts as anchor links that take users to different part of the configuration process.

VIEW RESEARCH

After walking our participants through our use cases, we also asked them to sort the configuration order they prefer and walk us through their decision making process. I then tallied their answers to a chart to visualize the results. This exercise helped us see the order consumers preferred, which we then balanced against the order that makes sense from a manufacturing point of view.

When asked about the new interaction model and how to navigate from step to step, we got an overwhelmingly positive response on the design and how intuitive it is.

Some selection requires the user to reselect from a previous step.

When necessary, a secondary or tertiary step will appear for certain option.

Bringing the in-store experience to the configurator.

When buying something for your home, seeing it in person is ideal. I wanted the online ordering experience to offer the same level of detail and more. New visualizer features I added include hotspots for product information, window frame options, wall color changes, room views, and lighting adjustments.

VIEW RESEARCH

Due to previous experience with other configurators online, consumers already have an expectations on how certain feature should work. LEVOLOR's current visualizer needed to meet those expectations. We stroved to meet them and more by adding in additional features to help consumers get a real sense of what the product look and feel like. We also included features to help consumers visualize (pun intended) how it could look in their home with custom wall colors and room placement.

Adding transparency around pricing and the order.

In the original design, consumers only saw the price at the end of the configuration process. User interviews revealed consumers felt they were in the dark and were sometimes surprised by the final price. Our user tests showed consumers were a fan of knowing the cost for each option. Likewise, knowing the estimated total throughout the process is better than finding out the total at the end.

VIEW RESEARCH

Consumers were immediately a fan of seeing the price for each option. Getting these feedback prompted the LEVOLOR team to see how they can update their system to accomodate this feature that can foster more trust and transparency in the configuration process.

Redesigned for the mobile experience.

While it was easy to scroll down on desktop, endlessly scrolling down on mobile is never the ideal scenario. Instead, steps are broken down one at a time on mobile to be easily digestible. For content, only the pertinent information are in view. Everything else, from the steps and status to the estimated total, are but a tap away to bring them up.

How to fit the visualizer and its toolset on mobile.

I wanted the visualizer to have a presence on mobile, but it can easily take up the entire screen. While it is important, it needs to play a secondary role to letting the users go through the steps and select their configuration options. As a result, the visualizer became an interactive area where users can expand to access all the tools and minimize it when they’re done.

Takeaway

The end-to-end approach we took for this project helped us understand how consumers shop and how to manage their expectations with what LEVOLOR can deliver. Through stakeholder and user interviews, I gathered valuable information that informed my UX exploration. This enabled me to design a configurator that accommodates a lengthy process while ensuring users can navigate each step without feeling overwhelmed.

LinkedIn . Instagram