A lifestyle brand dedicated to design, travel and creative expression.
OKL.cover@2x.png

One Kings Lane Product Description Page

One Kings Lane is a home decor lifestyle brand based in New York. Founded by Ali Pincus and Susan Feldman in 2009, OKL is the leading source for access to home decor, inspiration, and interior design services. The one-on-one design services offered range from paint color consultation, fabric swatch samples, furniture previews, rug selection and more to help any decorist with creating the perfect living space that they love. This case study below was completed in December of 2016.

 The  Claremont Sofa  designed by the One Kings Lane Collection (navy velvet).      Product Description Page (PDP)    My Role : UX research, UX design, interaction design, wire framing, product design   Responsibilities : to create a product description page that practices the best User Experience methods for viewing an item   Process :   • Identify the information that is most important to the user when browsing products  • Create a hierarchy of product information, shipping information, and about the seller using invisible tabs for seamless transitioning  • Have the Add to Cart button above the fold of the page at all times to make it easy for the user   Project Goals : to make it seamless for the user to add their item to their cart, while also browse similar products and collections   Challenges :  • Keeping the Add the Cart as the only primary button  • Organizing all the information about the product including:   1. Name  2. Brand  3. Price (Sale, previous price, discount percentage)  4. Size (if multiple sizes available)  5. Color (including disabled colors)  6. Quantity  • Maintaining user engagement in other products even after they have already added to cart  • Designing ALL wireframes and mockups from 5 mobile sizes (including tablet) to desktop in two days     Results :  • Improved user experience for mobile specific interactions—e.g., when you select the available size as a button rather than a drop-down this translates into faster add to cart times as mobile users avoid having two clicks to select size (one click for opening drop down and second click for choosing)  • Round color chips indicate the element of a product trait, which helps minimize confusion to the user that color chips are not the focal point and the Add to Cart button remains prominent  • Sizes styled in neutral rectangular buttons indicate that price can change depending on the selection   • Quantity selection with always on +/- to increase and decrease item number helps reduce friction—e.g., typically if a user wants more than 1 item, they hit the input field, type their number, and then click out or it can be another drop-down scenario—and for customers who are on mobile devices it is very critical that they do not have an input field for this section  • Overall effortless shopping experience 💫         

The Claremont Sofa designed by the One Kings Lane Collection (navy velvet).

 

Product Description Page (PDP)

My Role: UX research, UX design, interaction design, wire framing, product design

Responsibilities: to create a product description page that practices the best User Experience methods for viewing an item

Process

• Identify the information that is most important to the user when browsing products

• Create a hierarchy of product information, shipping information, and about the seller using invisible tabs for seamless transitioning

• Have the Add to Cart button above the fold of the page at all times to make it easy for the user

Project Goals: to make it seamless for the user to add their item to their cart, while also browse similar products and collections

Challenges:

• Keeping the Add the Cart as the only primary button

• Organizing all the information about the product including: 

1. Name

2. Brand

3. Price (Sale, previous price, discount percentage)

4. Size (if multiple sizes available)

5. Color (including disabled colors)

6. Quantity

• Maintaining user engagement in other products even after they have already added to cart

• Designing ALL wireframes and mockups from 5 mobile sizes (including tablet) to desktop in two days  

Results:

• Improved user experience for mobile specific interactions—e.g., when you select the available size as a button rather than a drop-down this translates into faster add to cart times as mobile users avoid having two clicks to select size (one click for opening drop down and second click for choosing)

• Round color chips indicate the element of a product trait, which helps minimize confusion to the user that color chips are not the focal point and the Add to Cart button remains prominent

• Sizes styled in neutral rectangular buttons indicate that price can change depending on the selection

• Quantity selection with always on +/- to increase and decrease item number helps reduce friction—e.g., typically if a user wants more than 1 item, they hit the input field, type their number, and then click out or it can be another drop-down scenario—and for customers who are on mobile devices it is very critical that they do not have an input field for this section

• Overall effortless shopping experience 💫

 

 

 

 Desktop Final Mockup

Desktop Final Mockup

 5 Mobile sizes (including tablet) to Desktop, zoomed out at 6%     The Buy Box area is shown above the full length screens to show various possible states: unavailable item, only one size, no other available colors, etc.      Private Sketch Files available upon request .

5 Mobile sizes (including tablet) to Desktop, zoomed out at 6%

 

The Buy Box area is shown above the full length screens to show various possible states: unavailable item, only one size, no other available colors, etc.

 

Private Sketch Files available upon request.

  Style Guide   Maintaining design consistency is a priority across all of product. With many hierarchy levels of color, typography, buttons, iconography and banners––noting which style to use and the rules for when they are used must be consistently checked. Designing with larger teams also requires constant check-ins with the branding team.

Style Guide

Maintaining design consistency is a priority across all of product. With many hierarchy levels of color, typography, buttons, iconography and banners––noting which style to use and the rules for when they are used must be consistently checked. Designing with larger teams also requires constant check-ins with the branding team.

  Text Styles   As responsive design becomes more crucial for users who shop both online and on their mobile devices, a user will notice bad design if a mobile-web page looks significantly different when viewed on desktop. Our team made sure to keep our text styles consistent so that translating from mobile-web to desktop or vice versa was seamless and essentially "invisible."  Understanding why a product title is different from a text link or filter link also requires a lot of context for how users perceive something like price vs Clairemont Sofa vs One Kings Lane Collection.

Text Styles

As responsive design becomes more crucial for users who shop both online and on their mobile devices, a user will notice bad design if a mobile-web page looks significantly different when viewed on desktop. Our team made sure to keep our text styles consistent so that translating from mobile-web to desktop or vice versa was seamless and essentially "invisible."

Understanding why a product title is different from a text link or filter link also requires a lot of context for how users perceive something like price vs Clairemont Sofa vs One Kings Lane Collection.

  Color Palette   While product images intend to capture the user's attention, there are also callouts made with varying elements like an urgency badge to let the user know how many couches are left.  Using the design principles for keeping a page well balanced involves knowing when to use color and how much contrast there can be. OKL's extensive color palette throughout the website consisted of at least 36 colors including 15 greys.  

Color Palette

While product images intend to capture the user's attention, there are also callouts made with varying elements like an urgency badge to let the user know how many couches are left.

Using the design principles for keeping a page well balanced involves knowing when to use color and how much contrast there can be. OKL's extensive color palette throughout the website consisted of at least 36 colors including 15 greys.