The Cellar Branding, Responsive Website, & Email Template
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.