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
• 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
• Keeping the Add the Cart as the only primary button
• Organizing all the information about the product including:
3. Price (Sale, previous price, discount percentage)
4. Size (if multiple sizes available)
5. Color (including disabled colors)
• 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
• 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
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.
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.
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.
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.