One Kings Lane
Palette
An responsive customization experience allowing users to preview thousands of different fabric, pattern, and color combinations to create their unique piece of furniture.
“It almost feels like a computer game.”
“It's addictive. No, seriously!”
“It's addictive. No, seriously!”
One Kings Lane is a luxury home decor online store.
I joined the newly created Product Design team in 2017, right after One Kings Lane’s acquisition by a Fortune 500 company. In that small and nimble team, I was responsible for the crucial back of the customer funnel (Cart, Checkout, Order Management), as well as developing brand new features and landing pages.
I also got to contribute to our Product Design language, mentor young designers, and lead research and usability testing sessions.
I joined the newly created Product Design team in 2017, right after One Kings Lane’s acquisition by a Fortune 500 company. In that small and nimble team, I was responsible for the crucial back of the customer funnel (Cart, Checkout, Order Management), as well as developing brand new features and landing pages.
I also got to contribute to our Product Design language, mentor young designers, and lead research and usability testing sessions.
Goals and Constraints
My role
Led all stages of design in a cross functional team that included a junior designer
Business goal
- Media coverage and industry recognition
- Increased brand awareness amongst a younger demographic
- Page visits and engagement with the feature
User goal
Easily preview thousands of different fabric, pattern, and color combinations to create their own, unique piece of furniture
Constraints
-
Integrate with current product description page and purchase flow, bound by the current buy box
- An offshore engineering team with a large time difference
How might we...
Create a seamless, engaging experience that lets users choose and preview thousands of combinations of fabric, colors and patterns in real time?
Discovery
Studying the market
Getting inspiration outside of our industry
- Direct competitors
- Similar brands
- Demographic data
Getting inspiration outside of our industry
- In-store customization experiences
- Character creation in Gaming
Flows and Wireframes
Rapid iteration cycles to to determine the overall flow and information architecture
-
Sketch, wireframe, early prototypes
- Gather feedback (informal testing, usability studies)
-
Rinse and repeat
Iterations
Ambiguous dependencies and inconsistent options
Of two available fabrics, one was available in solid colors only, while the other one came in both patterned and solid colors. The preferred option of leadership and product stakeholders was to follow the logic of the system, ie, selecting pattern before a type of fabric.
Testing and validating our hypothesis
The Design team’s hypothesis was selecting fabric type first would be closer to a user’s mental model. We rapidly put a testing prototype together and conducted a usability study which allowed us to confirm our hypothesis, and convince our stakeholders to adopt the most intuitive flow.
Of two available fabrics, one was available in solid colors only, while the other one came in both patterned and solid colors. The preferred option of leadership and product stakeholders was to follow the logic of the system, ie, selecting pattern before a type of fabric.
Testing and validating our hypothesis
The Design team’s hypothesis was selecting fabric type first would be closer to a user’s mental model. We rapidly put a testing prototype together and conducted a usability study which allowed us to confirm our hypothesis, and convince our stakeholders to adopt the most intuitive flow.
How might we communicate a blank pattern?
We opted to show pattern swatches in grayscale if no color option had been chosen yet - this wasn’t as visually appealing as showing them in black and white, as was originally the case, but it effectively conveyed unfinished customization, reducing user confusion.
Color and scale picker
A pattern’s foreground and background colors could be customized separately, which presented a complex UI challenge.
How might we show set and customizable colorways together?
After experimenting with different solutions, we decided to treat the custom colors option as standalone swatch, leading to a secondary color picker tab.
A pattern’s foreground and background colors could be customized separately, which presented a complex UI challenge.
How might we show set and customizable colorways together?
After experimenting with different solutions, we decided to treat the custom colors option as standalone swatch, leading to a secondary color picker tab.
Entry points
The main nav entry point had disappointing click-through when we first launched, and users weren’t finding the feature. Our hypothesis was that more descriptive copy and an icon evoking customization would call the user’s attention. We conducted an A/B test which confirmed this, and led to an 76% increase in click through rate.
Final Visual Design
Thousands of combinations, previewed instantly:
Outcomes
- Industry recognition and extremely positive press
- Significant increase in engagement, measured in minutes
“(…) may we suggest playing around with One Kings Lane's new custom furniture tool? It's addictive. No, seriously!” - clever.com
“I honestly spent so much time cycling through the different styles while writing this story because it almost feels like a computer game.”
- apartmenttherapy.com
Most recently on the Commerce team at Meta in New York. Formerly at mental health startup Spring Health and luxury furniture retailer One Kings Lane. Before that, I worked on short films, music videos, and visual design in Montreal.