LEVOLOR
Redesign a Product Configurator for Window’s Blinds and Shades
LEVOLOR is a high-end maker of window blinds and shades where their products are sold at retailers like Home Depot and Lowe's, but their speciality is custom made blinds and shades tailored to your taste. They approached my agency to redesign their current product configurator to be more streamline and user friendly after their online sales rose dramatically during the pandemic.
The biggest challenge is they have 14 different products users can configure. Our objective became how to consolidate all the steps where if not the same, they can be similar enough in structure so that users can easily jump from one product to another without confusion.
RESPONSIBILITIES
Heuristic Evaluation
Competitive Analysis
UX Design
Visual Design
Stake Holder Interviews
User Interviews
User Flow Testing
TEAM
Steve Boulton - UX Director
Kaleigh Nelson - UX Designer
Beth Haggerty - Project Manager
DELIVERABLES
Competitive Analysis
Stakeholder Interviews Report
B2C Research Findings
Consumer Buying Journey
Consumer Type Findings
Decision Factor & Mental Models
Annotated Wireframes
Desktop & Mobile Designs
Build Guide
TIME
Completed 2019
Research & Explore
LEVOLOR’s configurator was confusing and disjointed to use. Each step was on a separate tab in which users have to manually click to get to.
Going through their current user flow helped us understand what possible frustration points their consumers might have been experiencing. But before diving into designs, we want to also look at how other industries as well as competitors design their configurators and what possible learnings we can gain from studying theirs.
We looked at The Shade Store, Interior Define, Ford, Inside Weather, and Custom Made. Collectively, they are analyzed based on the following benchmark qualities:
NAVIGATION
Easy to navigate
INTUITIVENESS
Easy to pick up and start configuring
EFFICIENCY
Users can narrow down their options quickly
EXPERIENCE
An engaging experience throughout
SUPPORT
Guidance and support options are available
Solutions Exploration*
After analyzing so many different configurators from variety of industries, I led the ideation efforts on what LEVOLOR’s configurator would look like and what features would it include.
* Only a small sample of solutions are presented below. I aim to highlight the main solutions that made their way into the final design.
NAVIGATION
The stepper leads user through the process one step at a time. We also incorporated a status wheel to visually show users when they have fully completed a step.
SUPPORT
To provide more confidence in the options users are selecting, informational modals can be accessed for users to learn more about the options.
EFFICIENCY
Incorporate an optional quiz for users who to narrow down their options at the beginning should they need it.
EXPERIENCE
Turning the visualizer into a focal point that adds to the experience. We incorporate tools like changing wall colors, or see the window in a room setting a kitchen.
INTUITIVE
Steps are arranged in a linear fashion. We also experimented adding in description for each option that weren’t there before.
TRANSPARENCY
Allowing users to see the price point for each option and calculating an estimated summary as users go through the configurator.
User Testing
Discovering LEVOLOR’s Main Consumer Types and Their Preferences
To get a sense of what works and what doesn’t, we talked directly to consumers who have bought window blinds or shades in the past. Some also bought from LEVOLOR’s website. Through our user testings, we were also able to categorize all our participants into 4 distinct groups that collectively represented the majority of LEVOLOR’s consumers.
DIY ENTHUSIASTS
Consumers who love home improvement projects and prefer to do most things themselves.
DO IT FOR ME
These consumers prefer to be hands off. They are open to recommendations and guidance and prefer to work with experts.
THE DESIGNER
They take a lot of pride in their home and want everything, including the window shades or blinds, to reflect their style.
CONVENIENCE SEEKERS
Speed and efficiency is the mantra for this group.
We walked all our participants through 3 use cases that explore different entry points and various aspects of the configuration process.
USE CASE 1
Users got to the configurator while browsing the website. We introduced the Product Finder Quiz and the recommended products it would generate in this flow. We also talked through interest level for saving, comparing, and sharing features.
USE CASE 2
Here users discovered LEVOLOR’s website via a search engine and click to a product landing page. We were curious to know where users would expect to find a CTA to start configuring.
USE CASE 3
The last use case is not a typical scenario, but we wanted to see if there would be an confusion if users were to buy from another retailers like DirectBuy that will essentially pull he configurator into their website.
After walking our participants through our use cases, we also asked them to sort the configuration order in which they would’ve preferred as well as walk us through their decision making process.
What Resonated With the Consumers
It’s always a good feeling when many of your ideas resonated with the target audience. A majority of the things we enhanced or added to the configurator were all warmly received by our testing participants. Knowing the variety of consumers LEVOLOR have, the configuration experience is designed to be as hands-off or hands-on as each individual desires.
NAVIGATION & INTERACTION MODEL
The new stepper design walked users through the configuration steps and visually showed if users have completed all items in a step.
PRODUCT FINDER QUIZ
An optional quiz to help those users who are not familiar with what LEVOLOR product would work best for their homes and needs.
CONTEXTUAL EDUCATION & ERROR RECOVERY
Users can view modals to learn more about a step. Likewise, a modal dialog guide users if they’ve made an error in any steps.
TRANSPARENT PRICING
Limitation doesn’t allow an accurate total until all steps are completed, but the consensus was clear having a estimated total is better than none.
ENHANCED VISUALIZER
Being the visual focus, we added more features to the visualizer that would allow users to more accurate see how this blind/shade will look in their home.
SAVING & SHARING FEATURES
Unlike other products, need more time and sometime a vote of confidence before making a purchase. We added a way to save a design and share out to friends and family.
The New
Configurator
The new configuration process doesn’t always start with the configurator. Taking in user’s feedback, users can start configuring by first going through a short quiz to determine which LEVOLOR product is best for them. Those who do not want to start from scratch can begin with a pre-configured package. Otherwise, users can customize everything themselves like always––now with more features to help them make a more informed decision.
Users walked through the Product Finder Quiz to view their recommended products. From there, they can choose to start from a package or design from scratch.
NEW GLOBAL FEATURES
A. An itemized price list and estimated total are accessible at all times.
B. The configuration menu includes many tools users might need, such as comparing, saving, sharing, etc.
C. Those who have saved designs can jump right back in.
D. An error correction modal helps users reselect a previous option to ensure compatibility with the rest of their selections.
E. Informational modals help educate users at each step.
F. Users can create a shareable link to their design and share it.
NEW VISUALIZER FEATURES
A. When active, users can hover over hotspots to learn more about the product.
B. Adjust the window frame’s trim style.
C. Select a wall color from a preset list.
D. Users can also pick a color from a full spectrum.
E. Choose a room to bring up various room decor options and visualize how this window will look in a space.
F. Users can see how the blinds/shades look with different lighting at different times of day.
To make sure mobile users have all the same tools as the desktop version provides, the design was adapted to carry over all functionalities across platforms.
INTERACTION MODEL
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
THE VISUALIZER
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
NAVIGATION
Users are able to see their current step at all times, and tapping on the step name opens a sheet modal showing all the future steps. Users can also drill down to all the sub-steps.
SHEET & FULL-SCREEN MODALS
Segmenting information is imperative on mobile to not inundate a user with too much information at once in one view. Sheet modals are used the majority of the time, but for long form content, a full-screen modal is used.
Learnings
On a project of this scale, it was important to divide and conquer especially with a small team.
I was the lead UX and visual designer, but I couldn't have completed this project without Kaleigh, who assisted me with the competitive analysis and wireframe annotations. With each of us working on different parts of the project, it was extremely important for us to regularly check in with each other to ensure that no one was working in isolation. Having another designer to bounce ideas off of was also invaluable.
Regarding design, I am most proud of figuring out how to ensure that the mobile experience is as user-friendly as the desktop version. Many configurators either omit the visualizer or significantly reduce its functionality on mobile devices. I am pleased to have found a solution where it could maintain a strong presence as well as all other features from the desktop version.
View my other projects
© Locness Designs. All rights reserved.