The Cellar Branding, Responsive Website, & Email Template

 

The Challenge

Traditional ecommerce websites can be cluttered and unintuitive.

The Cellar is an authentic and approachable modern online store for wine that celebrates the craft and appreciation of wine.

I created a brand and designed a clean, responsive website for the Cellar. Key website features include simple navigation, smart search filters, recommendations, and an intuitive purchasing experience.

Context

For the final project, CareerFoundry provided options to design a responsive website or mobile app for either an online store or a money saving tool as well as a brand. I chose to design a responsive website for an online store to broaden my skills; other projects for the bootcamp were required to be mobile apps.

After completing the project for the program, I additionally designed an email template for the Cellar to illustrate how the identity would be applied to a common marketing communication, allowing the Cellar to communicate with its customers.

 

Role/Services

Concept
Product Strategy

Branding/Identity
Iconography
Photography

UX/UI Design
Responsive Design
Email Design
Information Architecture
Wireframing
Prototyping
Mockups
User Testing

Content Strategy
Copywriting

Time Frame

July–September, 2018


 

Branding  

The Cellar is a modern and approachable online store for anyone who is looking to buy wine, whether one knows everything or nothing about wine. The Cellar celebrates wine traditions with a brand that conveys authenticity and craft. An illustrated logo differentiates the Cellar from rectangular, text-focused logos for similar stores like BevMo and Total Wine and features barrels to illustrate the winemaking process.

Name and Logo

Hand-drawn color fills in clean geometric outlines give the Cellar’s logo graceful movement and a relaxed, artistic feel that conveys craft. Deep green and red reference grapevines and wine colors.

 
 
The Cellar Logo.png
 
 

Process

The store was initially conceived as “Vinous,” but the logo imagery was too abstract to express “wine store” and the name sounded a bit pretentious.

 
 
 
 

Guiding Principles & Writing Style

The Cellar is designed to help people with varying knowledges of wine buy wines they’ll like, so the writing style is straightforward, approachable, and succinct. The goal is to help users make decisions about wines, so clear language is essential.

 
 
Guiding Principles and Writing Style.png
 
 

Typography

Alegreya (sans, serif, and small caps) provides flexibility in weights and styles, elegance with readability, and combination of traditional calligraphic features with a modern sensibility that suits the Cellar’s modern online experience for a product based in tradition and craft.  

 
 
Typography.png
 
 

Color

Deep reds, purples, and greens inspired by the rich colors of wine and grapevines complemented by an earthy beige differentiate the Cellar as a wine store that celebrates the winemaking process.

 
 
Color Palette.png
 
 

Photography and Illustration

The Cellar’s photography style honors the winemaking and tasting process instead of a celebration- or occasion-oriented focus emphasized in other stores. Photos illustrate the enjoyment of wine, with a focus on the experience of tasting or winemaking rather than on the people who may be depicted. Realistic, rich colors communicate authenticity, and dynamic angles and unusual perspectives provide interesting compositions.

 
 
Photography.png
 
 

Product photography sets each wine against an elegant white cloth backdrop to showcase each product with appreciation and care.

 
 
 
 

Illustrations are constructed in the same way as the logo, with basic geometric outlines containing amorphous color fills derived from the main color palette. Edges and corners of both illustrations and photography are crisp and sharp to convey cleanliness and elegance.

 
 
brand illustration style

 

Responsive Website

UI Kit

The wine-inspired color palette, illustration style, and line and outline motifs come together to create a modern, simple, and clean feel for UI elements.

 
 
 

Responsive, Clean Interface with Simple Navigation

The Cellar’s website is built with a responsive grid and simple navigation that works intuitively across devices. Only elements that showcase the product offerings and help users make purchase decisions are included, and the conspicuous color and frame motifs of the visual design differentiate the Cellar from typical white background, busy ecommerce websites.

 
 
Homepage on Devices.jpg
 
 

Smart Filters & Saved Search

Users can click on the filter icons to reveal detailed search criteria. Sorting, pagination, and display quantity features allow users to control their browsing preferences. Once one or more filters are selected, an option to save the search appears.

 
 
Smart Filters and Saved Search.png
 
 

Intuitive Purchasing Experience

When a user adds a wine to the cart, there is immediate feedback in the form of a button change and modal below the side navigation that indicates what has just been added with a button to go to the cart page.

 
 
Add to cart.gif
 
 

The checkout flow allows users to checkout as a guest or as a returning customer. The flow is broken into sections for shipping, payment, and review to focus users on entering one category of information at a time and allow users to click on the breadcrumbs to navigate between sections.

 
 
Checkout animation web 2.gif
 
 

In the account section, users can manage their orders, wish list, saved searches, and personalized recommendations, which were key requirements from the provided project brief.

 
 
Account page.png
 
 

Product Page: Wine Details

Each product detail page includes five bullets that describe the wine’s type, color, flavor, mouthfeel, and food pairing notes so users have standardized criteria to compare wines. A table displaying the wine’s technical information is included to provide more detail.

 
 
Product Page.png
Product Page Wireframes.png
 
 

Recommendations

Recommendations are an important part of the Cellar’s offerings to help users find wines they might like. Tailored recommendations are displayed on the homepage, account page, and at the bottom of each product page.

 
 
Recommendations.png
 
 

Age Verification  

As I was reminded through user testing, the Cellar must have an age verification page to allow users of legal age enter the online store; if a user checks “remember me,” they would only have to go through this page once.

 
 
Age Verification.png
 
 

Process: Competitive Analysis, User Flow, Wireframes, User Testing

To design the Cellar’s website, I conducted a competitive analysis, created a user flow, went through an iterative process of creating low-, medium-, and high-fidelity wireframes, and conducted user testing to ensure the design worked intuitively.

 
 
User Flow.png
 
 

From the competitive analysis, I appreciated the numerous filter options from BevMo and Total Wine, but wanted to emulate the elegant, minimalist, and user-friendly feel of Cuvaison Winery.

 
 
Competitive Analysis 2.png
 
 

Going through an iterative wireframing process allowed me to explore multiple ideas, design appropriate UI patterns, and refine content hierarchy in an organized and thorough way and before applying color, imagery, and actual copy. For example, between low- and medium-fidelity wireframes, I determined that a selector for number of items displayed per page would be a better control for users than a slider that would enlarge or reduce product details because the product details would already be presented at a readable size. If users wanted to see more detail, they could navigate to the individual product page. Another example was the reduction of wines displayed per row to allow for more breathing room between products and to accommodate long product names.

 
 

Conducting user testing with a prototype containing the high-fidelity wireframes allowed me to understand if the checkout flow was intuitive. The feedback I received about their experiences with the prototype confirmed that the flow I designed for purchasing wine made sense. Additionally, feedback prompted the creation of a “Wine Basics” section to help wine novices and the expansion of the search function to be more visible and findable.

 
 
User test feedback 2.png
user feedback changes 2.png

 
 

Email Template

This email template allows the Cellar to communicate with its customers about new wines, promotions, and recommendations. Its design employs the look and feel from the brand guide and provides a cohesive digital experience for the Cellar’s audiences.

 
 
 
 

Process: Sketches & Wireframes

I designed the Cellar’s email template by determining email content, wireframing, and designing based on the fluid-hybrid email approach. The final design features a two-column layout that features one wine per row to provide a clear and ordered experience, an immersive full-width header image, and a neat, definite footer.

 
 
Email Sketches.png
Email Wireframes.png
 
 

Outcomes

The Cellar is a modern online store for wine that improves upon cluttered, traditional ecommerce websites by providing simple navigation and a clean, simple user experience. I exercised my visual and interactive design skills for branding, responsive website design, and email design as well as my eye for photography. By creating and articulating the brand first, I was able to design the website and email template efficiently using the detailed guidelines. Going through a thorough wireframing, prototyping, and user testing process encouraged exploration of multiple design solutions and allowed me to refine the design in a user-centered, iterative manner, resulting in a better website. The Cellar offers a modern, intuitive store experience for anyone to find their next favorite wine online.