Elevating Brand Presence & Customer Experience
Web Design Refresh
Purple is a digitally-native e-commerce brand with a mission to help people feel and live better through innovative comfort solutions. They design and manufacture a variety of premium, branded comfort products, including mattresses, pillows, cushions, frames, sheets and more. While they may have been known as a quirky, fun brand in the past, they are now shifting towards a new direction in the premium comfort and wellness space.
What is Purple?
As a digital product design consultant assisting the site merchandising team at Purple, multiple objectives were initiated ranging from asset production, product launches, to web refreshes– all with the goal to improve the overall brand experience.
-
Digital Product Designer
Objectives: Product Detail Pages, Web Design Layouts, Asset Management
Tools: Figma, Photoshop, Illustrator, Premiere Pro
-
A sweeping user experience refresh was needed to solidify Purple’s pivot towards becoming a more luxury oriented health and wellness comfort solution brand.
-
Emphasize the change from fun and goofy to high end comfort and wellness through premium product photography, refine product category layouts, launch new product pages utilizing new brand requirements.
Site-Wide Product Photography and Layout Updates
As part of the large scale project to shift the brand’s digital experience, a site-wide refresh on product photography took place in an effort to enhance both the UX for users but also elevate the products themselves. With Purple’s change towards high end comfort & wellness, the new product imagery provided a more premium feel that connected to our audience by showing products in relatable settings, like a bedroom.
Objective: Deploy a site-wide web refresh of the digital experience, complete with new premium product photography, new web layouts for detail, category, and sale pages. Each existing page should be updated to reflect the latest branding standards.
Old Design - Mattress CLP
New Design - Mattress CLP
The change affected multiple product category landing pages, product detail pages, and other pages across the site, elevating the overall shopping experience and bumping up sales by 18%.
Problem: Like many e-commerce brands, converting website interactions into product sales is the end goal. An issue that arose was the user experience on Purple’s financing page; it was outdated with a previous version of brand styles, it lacked compelling photography to connect with the user, and was confusing to use in general.
Solution: Revamp the finance page in an effort to drive up user engagement with better product photography, a clear visual layout of product information, and updated styles.
Financing Page + Component Refresh
The old financing page educated users on Purple’s finance partners, different financing plans over multiple terms, and the details regarding the financing plans.
In terms of design…
style was outdated compared to other pages
lacked photography that would appeal to the user
people didn’t like using it– low user engagement
Old Design
New Design
Updated components, brand styles, and product content were utilized in the layout design of the new and improved financing page, bringing the page up to speed with the site-wide refresh as a whole.
Preliminary sketches were done to understand how the functions of the new component should be mapped on the interface. Mobile designs were included as user insights showed significant traffic on mobile phones as well as desktops.
Sketching Out The Layout
The second iteration on desktop was chosen to move forward with as the placement of the user inputs gave more breathing room to the component in the form of white space. This iteration preserved a similar look and feel as the old component in order to not confuse existing users. In terms of the functionality, the hover over animation was removed and pricing details and other info would be placed directly below each product image. The reasoning behind the change was that our users need to access multiple different prices when comparing options, so it made sense to have them clearly displayed.
The financing component on the new page shows off improved product photography, emphasizing the realistic appearance of a Purple bed in a personal setting. A refined page layout was created that aligned with the design standards of the entire site, coupled with better follow up content aimed at educating the user about various financing options.
New Component Design
Old Design
New Design
Based off our user testing, the refreshed finance page was well received, indicated by an increase in user flow on the page as well as a bump in product sales. People found the new component refreshing as well as easier to use, with more interactions happening on the page than before.
Outcomes and Learnings
By introducing a redesigned layout and streamlined financing component to easily compare pricing options, we learned that…
Our users spend significant amounts of time learning about different plans
Users benefit from being able to quickly scope out all visually present options
The right product photography goes a long way when appealing to users
During my time with Purple I collaborated between the site merchandising team, creative team, and key business stakeholders to bring a new product to the Purple inventory. The new mattress, named Purple Newday, was marketed as an economic purchase, coming in at the lowest price point, but still offering the consistent Purple feel.
Product Launch with New PDP Layout
Objective: With a brand new mattress to introduce to the website, a new page would be needed where users can navigate to purchase online.
Old product detail page layouts showcased a wide screen-filling carousel of images followed by below the fold content that required lots of scrolling to get through
Carousel for product photography proved to be ineffective, the controls were too small and users frequently didn’t click through the carousel because they didn’t notice the other pictures
Old Design - PDP
New Design - PDP
With the new responsive grid design layout approach, it allowed for any number of product shots to be used, and the component would also be sticky in parts of the page while scrolling so the user wouldn’t lose view of the mattress photography. By utilizing a grid layout to showcase new, exciting product photography, users can actually see all the product shots as they are scrolling down the page, making the interaction more significant in terms of the complete customer journey.
Speaking of what makes an interaction significant in terms of the complete customer journey, during the launch of Newday we learned:
Users need streamlined interactions to help guide a seamless experience
Large, beautiful product imagery and color usage helps the user relate to the product
The importance of user testing in order to shore up the pain points was reinforced
Outcomes and Learnings
Launching a New Look on Amazon - A+ Content Design
Along with selling on their own website, Purple partners with other retailers to bring in revenue from multiple platforms and audiences. The Amazon storefront is a large contributor, and with the Newday mattress going live, assets and content pieces were needed to fill a new product page.
Objective: Produce carousel assets as well as A+ Content graphics to use on the product page on Amazon.
