SousVide Supreme

Mt. Seymour

Project Overview

Taking a new approach

With sales declining online, SousVide needed a multi-currency and multi-lingual eCommerce site needed to convert new customers as well as existing customers all over the world to make sure they get the most out of their water oven. With a short strategy session, I designed an entirely new responsive website and content direction for the SousVide Supreme team to position themselves as quality and technology leaders. Next, I implemented the site in CommerceCM and polished the look with microinteractions that added that extra level of sohpistication to align with their customers luxury online shopping experience.

Contents

  1. UX Qualitative Research
  2. UI Design
  3. Content Strategy
  4. UI Design
  5. Custom Checkout
UX Design

Mini UX through Qualitative Research

SousVide needed to understand who their target market is and who they needed to focus on to get the best ROI on the redesign. I collected the teams quantitiave research on current and previous customers and turned it into 2 proto-personas. Testing these assumptions against their analytics data and customer surveys I was able to identify the major drop-off points keeping from converting prospects into buyers online. I advocated for a more educational long-form style pages selling on benefits that would fit with the customers lifestyle and needs. Creating User Journeys and SiteMap flows allowed us to target where we would spend the most effort on content and design.

svs-research
Art Direction

Style Tile

The old SousVide site had a clinical look that didn't align with it's luxury countertop appliance message. With a defined colour palette already in place, I worked with picking typography and simple design accents that would add to the identity. The 2 web fonts I chose not only align with the look and feel of the logo but also elevate the content with a more polished and high-end vibe. Adding in a gold accent and some cool neutrals with simple and clean lines helped to enhance the high quality graphics SousVide Supreme had to work without without taking attention away from the message.

svs-interation
Information Architecture and Interaction Design

Content Structure & Strategy

A complete re-imagination of the content was needed to better align with the customers goals, and work within a responsive friendly redesign. Working alongside SousVide Supreme's eCommerce Specialist I assisted in updating the website SiteMap. Thinking about how the navigation would work in a mobile-first approach, it was important to simplify the navigation structure into more digestable categories. By organizing their small product offering into a "shop" menu, educational content into "learn", videos into "watch" and recipe directory into "cook" unified this vision. Using consistent verbage and top levels with a single word nomenclature helped translate into a simple and useable mobile navigation. The priority content is still be exposed and not hiding under a hamburger menu. This has higher interaction rates and works well with our order Gen-X users on mobile. Post launch analysis found that the menu design decreased bounce rates significantly and increased the average number of page views and time on site.

sousvude-mobile-interactions-min
UX and UI Design

Landing Page

With SousVide Supreme Water Ovens being a higher price point, it was important to build trust and product knowledge for prospects and returning customers. New customers didn't know how Water Ovens worked and how it would be better than using traditional cooking methods. Existing purchasers of water ovens didn't understand the need to have a vacuum sealer and water-oven friendly bags or recipes to get the most out of their product. I went to work by sourcing value building content from their blogs and videos that had high customer engagement and high visual impact. Integrating these into ad spots on the landing page was the perfect fit in communicating these gaps in knowledge to a returning customer base. The result is a landing page that covers the 3 different customer conversation types and performs well with search engines with high-value content and keywords.

svs-wf-1
UI and Interaction Design

Shopping vs Browsing

Knowing that most prospect customers would not purchase on the first visit, the department structure needed to better reflect a leisurely browsing experience. I proposed a full "shop" department to expose all the product offerings since the catalogue was small and include more product details in the department with products pages. A sticky category bar filled with high value keywords helps aid navigation a long department page on all devices. More info rollovers let the user use the department page as a comparison tool. I focused on having an experience that would be a continuance instead of forcing users to make decisions with clicks to get more info. Additional description rollovers and show/hide drawers fit this model perfectly. With industry leaders like fitbit as inspiration behind this functionality, I focused the message on benefits, feature sets, and incentives such as free shipping.

sousvide-department-interactions-min
sousvide-department
UI Design

Easing sticker shock

SousVide Supreme Water Ovens are a luxury level kitchen appliance that needed to appeal to high-end consumers. An emerging problem was new products hitting the market with lower price points that SousVide now had to compete with. With a high price point, there needed to be more emphasis on quality, superior design, and education on product use. I designed a long form product page which allows users to have a true browsing experience. Most customers did not purchase on the first visit so having extended product descriptions, features and benefits helped increase the AOV (Average Order Value) for SousVide Supreme after launch. Customers now understood the product offerings and were more likely to purchase the Water Oven packages or return to purchase refills on bags and accessories to extend their product life.

svs-wireframe2
UX and UI Design

End-to-end purchase experience

Previously the SousVide Supreme team had only worked on the store-front design and neglected the checkout experience. Analytics reported that the highest drop-off for returning customers was in the checkout process. I was able to align the business goals and customer needs through a rehaul of the checkout experience that was also mobile friendly. Filling the checkout experience with trust builders, and areas of opportunity to engage in a customer service conversation was the priority. Along with messaging the UI needed to be consistent with the luxury look and feel simple. I aligned the checkout into a simplified 3-step process that feels like a single page checkout. After launch, the analytics showed that less customers were getting stuck going into the last step for payment or leaving the checkout as the UI uses a reduced header and footer keeping the customer on task.

sousvide-checkout
Art Direction, UI Design and Content Strategy

Unifying and polishing the site

What the SousVide Supreme team struggled with in previous redesigns was the ability to make their huge amount of content heavy pages feel consistent with the look and feel. I created a design system with reusable grid structure and pre-designed components for the team to create their content. Producing button styles, accordions, striped tables, list styles, and basic typographic hierarchy set a strong art direction for content design. The result is a site that has a high level of polish for a company without a dedicated web content or design team.

content-details
Credits
Art Direction: Lea Gucciardi | UX Design: Lea Gucciardi | Information Architecture: Lea Gucciardi, Leslie Blaney, Tricia Burton Consulting | Commerce Strategy: Leslie Blaney and Tricia Burton Consulting | Web and UI Design: Lea Gucciardi | Backend CMS Integration: Jeramy Marshall | Frontend CMS Integration in CommerceCM: Lea Gucciardi and Conrad MacIntyre

Selected Works

Citi BankUser testing concepts for balance transfers

iceni dataA industry disrupting brand and their online app, created from the ground up.

RogersDigital Marketing for Q1 2019

Contiki HolidaysCanadian Q2 Multimedia Campaign Art Direction

Mt. SeymourImproving the online booking system for the go-to ski resort for local Vancouverites.

TCSRebranding an established private sector care giving company and creating their intranet.

Stonz WearHelping a multi-lingual, multi-currency and multi-warehouse brand increase their mobile conversions.

Westbank First NationCreating a new online destination for Canada's largest First Nation community.

SousVide SupremeElevating an established international supplier by combining their B2C and B2B sites