To create a design that is
Modern yet Timeless
UI Design
Woodhouse Chocolates
e-commerce Website
intro
Woodhouse Chocolate is located in Saint Helena in the heart of Napa. The 3rd generation family owned business opened their doors on April 3rd, 2004. The shop’s 19th century exterior resembles the chocolatiers that can be found in Paris and Brussels while the inside is like an intimate jewel box filled with chocolate gems. They are dedicated to one core idea: the creation of the finest chocolates is an art that requires not only the skills of a chef , but the eye of an artist.
TECH
Photoshop, Illustrator
Chapter 01
An Opportunity To
Increase Sales
01 — Assignment
Redesign an existing E-COMMERCE website that is modest in scale and lacks potential sales opportunity. The new design should convey brand image consistency with the main goal being to increase sales. The use of any existing content and imagery shall be included along with the need for those that are self-generated in order to fulfill project requirements and design expectations
Elevating Shopper's
Experience
02 — Features & Functions
- User friendly buying experience
- Responsive design
- Drawer cart preview
- Update cart function
- Recommended add-ons
- Search function
- Social media links
- Customized shopping functions
- Account login
- Sticky main navigation
- Drop down drawer navigation
- E-gift cards & balance
- Promotional email sign-up
- homepage slide-show
Chapter 02
Chocolatier Artistry Transcends Into Web Design
The elephant logo-mark and signature Woodhouse blue similar to that of Tiffany’s are primary elements that are evident throughout this design. The same artistry and fine detail that goes into making their decadent chocolates are implemented. The use of simple yet elegant decorative elements keep within the tradition of European 19th century chocolatiers while current pictures and website functions keep the company modern and up-to-date.
Chapter 03
The Highlight Reel
These five UI pages give an idea of how the chosen design elements are integrated throughout the website. Since it is an e-commerce site, the pages are specific to what a potential buyer would expect. Let’s start with the landing page then prepare for an elegant and thoughtful shopping experience.
01 — Landing Page
02 — Main shop page
03 — Main product page
04 — Product detail page
05 — Custom shopping page
scroll through
Chapter 04
A Glimpse At The Process
Client brief
01 — Defining user profiles
Woodhouse Chocolate’s target market relies heavily on tourism. They range between the ages of 30-65 years old and are middle to upper-middle class. Well educated, cultured and have an appreciation for art and fine things.
02 — Creating a site map
A simple and clear understanding to the flow of the site starts with a great sitemap. Same aesthetics of the website are seen in the design of this site map.
