Stu Barnett
Stu Barnett
Sr. Experience Designer

‹ prev project

Condé Nast

Epicurious Online Cooking School UX and Visual Design

 
 
Epi_Hero.png
 
 
 

Summary

Condé Nast had not yet entered the ecommerce subscription space and wanted to test an approach by launching a pilot program for an online cooking school.

Their partners in this effort included:

  • The Culinary Institute of America for their teaching expertise

  • Cleeng, a third party service which manages subscriptions and integrates with external payment services like Paypal

  • Citibank, which agreed to sponsor a trial class for interested users in exchange for ad space on the site.

 
 
 
 

Challenge

Condé Nast asked us to design the user experience for an online cooking school website under their Epicurious brand.

Our objectives for the project included:

  • Design a simple and elegant site experience that affirms user expectations for the quality and expertise they might expect from the Epicurious brand.

  • Entice users to sign up for a free class.

  • Motivate users to subscribe to the school.

My Role: UX Designer

Key Activities: Requirements gathering, stakeholder interviews, wireframing, visual design, usability testing.

Epi_logo.png
 
 
 
Grey Panel.png
 
 

Research

 

Requirements

Through user data provided by Condé Nast and stakeholder interviews, we gathered a set of requirements that helped guide our solutioning process.

 
 
Epi_Research_Stats.png
 
 
We want to make sure that our [Epicurious] brand reputation is reflected in the experience.
 
 
Nearly 64% of our customers rate themselves as advanced cooks.
 
 
This is a pilot project to help form Condé Nast’s ecommerce subscription strategy.
 
 
User analytics, budget and pilot nature of the project pointed to a responsive solution.
 
 
We’ll be using Cleeng [subscriber management platform] for [the video PPV] ecommerce functionality.
 
 
Users will need to understand what’s included [in the courses], how long they’ll take, and other aspects of buying a subscription.
 
 

 
 

Design

 

Interaction Design

Our mobile first, responsive design approach to designing and implementing a solution for the initial release of the site was to target 3 design layouts for launch; laptop, smartphone and tablet portrait & landscape.

Since the majority of the users (75%) will be on a tablet and Smart-phone by day, it was logical to have the landscape width cover both tablets and desktops.

Rapid prototyping was used early to clearly see how regions would respond in the different views of the layout prior to build. The pre-production work ironed out many of the technical and design issues before templates were built, ensuring multi-platform and device success.

 
 
 
 
 
 
 
 
Epi_Handset_Wires_1.png
Epi_Handset_Wires_2.png
Epi_Handset_Wires_3.png
 

 

Visual Design

Careful consideration was made toward a design that presented an simple and elegant visual design solution that met the expectations of both user and client.

The design is bright and fresh with plenty of white space to make sure the beautiful photos of food and most importantly, the instruction video stood out as the central focus. We utilized the Epicurious brand color palette and paired the Epi green with shades of orange to help critical calls to action stand out.

Epi_Hero_Devices.png
 
 

 
 

Style Guide

The school visual style guide consisted of styles for type, color, photography, form elements and navigation elements for laptop, tablet and mobile.

 
 
 
Pages from the COBE design style guide.
Epi_Styleguide_2.png
Epi_Styleguide_3.png
 
 
 
 

Promotion

 

Condé Nast put out a promotional video introducing the school. Although the PPV subscription model did not prove successful, the pilot was successful in helping Condé Nast learn and capture valuable data about it’s users.

 
 
 
 
 
Grey Panel.png