Redesigning Puffy’s vision of Luxury: a UX/UI case study

Puffy is an e-commerce mattress and bedroom retailer and they were seeking help solving user pain points — their clients were complaining about feeling overwhelmed when choosing a product. They were also looking for a design that would reflect Puffy as the ultimate luxury brand.

Problem Statement

“Customers seeking luxurious and high-quality mattresses face challenges in finding a reliable and convenient platform that offers a wide selection, exceptional customer service, and a seamless shopping experience tailored to their specific needs and preferences.”

Goal

Improve the UX on Puffy’s responsive pages by adding design elements that are in alignment with the brand’s vision of luxury, facilitating purchasing decisions, and enhancing conversion rates.

Pain points:

• Overwhelming feelings when it came to purchasing a product
• Low conversion rates
• Excessive information leading to scrolling actions

The Process

I took into careful consideration Puffy’s brand guidelines and design system. It is essential to keep the consistency of the brand through hierarchy, typography, and color palette. Originally, PT Serif was being used for headings while Open Sans was being used for the body.

Puffy’s original home screens above the fold (both web and mobile from left to right)

The Homepage

The new designs (background image was created with the help of Adobe Firefly)

I took the liberty of dividing the information architecture into four categories: Navigation bar, typography, call-to-action buttons, and customer loyalty.

• Navigation Bar: The navigation bar was redesigned to align with Puffy’s vision of luxury while offering users quick access to the actions they seek. By streamlining the navigation options, users can easily find the information they need, reducing cognitive load and enhancing the user experience. The “hamburger menu” on the mobile version also allows quick access to categories while reducing visual strain.

Navigation bar close-up

• Typography: I opted for a new headings typography — Proxima Nova. The use of this font creates a clear distinction between headings and other content, improving readability and drawing users’ attention to important information. PT Serif is now being used for subheadings, maintaining the luxury that Puffy promotes.

Typography close-up

• Call-to-action Buttons: I retained the original call-to-action buttons as they serve an essential purpose in facilitating user engagement by encouraging immediate action. The “down” arrow to provides ease of use. This approach provides a seamless shopping experience and helps users easily navigate Puffy’s offerings.

• Customer Loyalty: At the bottom, I incorporated elements that foster customer loyalty. By showcasing the benefits that set Puffy apart from its competitors, we aim to instill confidence in potential customers. This section serves essentially as a reassurance mechanism. However, this was removed on the mobile version to reduce cognitive load and maintain the luxurious overview of the brand.

The Product Detail Page

For this part, I took a more consistent approach. I strictly preserved the brand’s original design elements while enriching the PDP for both mobile and web versions.

The current design prominently features the images, in this case, of the Puffy Lux Mattress, accompanied by a product description that highlights its unique features and benefits.

The website also continuously emphasizes the ongoing summer sale, grabbing users’ attention and enticing them with the exclusive offer.

I took into consideration the following factors: visual and mobile optimization, above-the-fold focus, and size selection.

The redesign of Puffy’s PDP

• Visual Optimization: The larger images were overwhelming the screen and diverting users’ attention from important product details — By reducing their size, we created more space for users to view key information without the need for excessive scrolling.
• Above-the-fold focus: Keeping in mind the importance of quick purchases, the purchase buttons were strategically placed above the fold. This ensures that users can easily access and engage with the call-to-action buttons without the need to scroll down. The product prices (both before and after the summer sale) were also emphasized at the beginning of the page, highlighting their significance to potential buyers.
• Size selection: For the size selection process, I designed three distinct types of label selectors. Available sizes were presented in an unselected format, the selected size was highlighted, and unavailable sizes were presented in a disabled and non-interactive state. This approach simplifies the size selection process and ensures that users can easily identify and choose their preferred size.
• Mobile optimization: The priority was to optimize the use of the space on a smaller screen. The excessive space allocated to images and the summer sale warning were significantly reduced. This adjustment allowed for the inclusion of important elements such as the product price, details, and call-to-action buttons while still providing a slider for product images.

Final conclusions

Through these enhancements, Puffy’s homepage and PDP have been transformed to offer:

✅ Superior and elegant user experience;

✅ Facilitate quicker purchasing decisions;

✅ Increase conversion rates;

✅ More engaging and efficient user journey;

Overall, these changes align with Puffy’s brand identity while catering to users’ needs, ultimately leading to customer satisfaction.

Feel free to check out my website here: http://annaguerrini.com/