Design of a Boutique e-Commerce Website

The Problem

A business creating handmade and often bespoke traditional quality goods out of premium wool, waxed canvas, and leather needed a website that reflected the handcrafted quality of their products and supported the premium prices.

My Role

Working closely with the website’s owner, I crafted the website from user research to wireframes to final launch.

User Research

Filson Advertisement

Problem

A boutique business whose products exuce a hand-crafted feel needed a website that would stand out amid a marketplace flooded with cheap, production line products. The website needed to both justify the price point of products and attract buyers interest in heirloom quality goods.

User Research

To establish what would resonate with the customer base research on forums selling similar products, other websites, and brands of similar goods was undertaken. Likes, dislikes, pain points, and wording/images were noted to build a portfolio for the website.

Research Results

Outdoor brands such as Filson and Orvis offered a glimpse at what a similar and more robost product marketing strategy could look like. Buyers and sellers in more personal forum markets that crafted similar gear helped created a user profile and define the overall website style.

Orvis Advertisement

User Profile

Jason

Jason is an outdoor enthusiast who enjoys traditional pursuits such as canoeing and bushcraft. He has a young son and daughter that he takes camping with him, wanting to pass on memories and timeless goods. He prefers quality and a slow pace and doesn’t like clutter or high pressure tactics.

Wireframe

Wireframe Creation

The website is designed as an e-commerce site to sell quality goods. The information architecture needed to be based on an ease of viewing products, finding information that highlights the prodcut’s uniqeness, and check-out. Building customer trust of the brand and displaying the products in a way that highlights their heirloom potential is key. A typical Woocommerce design would not be sufficient.

Website Redesign Wireframe

UI Design

High Fidelity Design

Logo

Brand Colors

Colors

Based on the company logo and what would resonate with Jason, a color scheme of natural colors with a few accent colors was created.

Fonts

To fit the feel of a classic and stylish brand, the serif font Cormorant Garamond was selected as the primary font for both titles and regular text. It is easy to read while retaining a classic, almost bookish look. Open Sans was also used for a few areas such as buttons.

Images

The owner of the website is a photographer and outdoorsman as well as a crafter. Ample imagery fitting the needed look of the website that would resonate with Jason were available.

Platform

The website was built using WordPress and the Divi theme. Woocommerce was selected for the retail end as well as one that would link and display the Etsy store belonging to the brand where one off and limited run items were featured.

Fonts

Cormorant Garamond & Open Sans

Website Design

Variable Product Page

(hover for details)

Under Construction

With a new website under development, the site was kept under construction while I built it.

Product Templates

With products the center of the website, a product template was created using the Divi Theme Builder to create a custom look to sales pages that is easily applied to new products.

Woocommerce Settings

Setup of not only PayPal integration but shipping cost depending on weight were completed in Woocommerce. For simplicity considering the website would not be running a paid plugin that seperated mail rates based on zones, flat rates based on three size/weight tiers were developed.

Variable products were also featured and were setup so that purchasers could be assured they’d recive the product they wanted to buy.

Facebook Store

To help promote the website and products, a Facebook stores was created that linked products displayed in the Facebook store to the sales page so that purchasing happened on the website (to keep stock synced).

Testing

Woocommerce integration was tested while the website was in construction mode to ensure integration with PayPal and address verification.

Facebook Shop

Launch

Going Live

The website and store went live at the end of October 2019 in time for sales for the 2019 H0liday season.

Website Speed Through

Results

The muted colors, emphasis on sage green, and use of really great photography pulled this site from a common store to something that has the feel of a traditionally crafted shop. The owner was very pleased with the layout, use of images, and colors, as well as the Etsy and Facebook store tie in. Viewers and customers spoke highly of the website and the products.

Products

Pages Built

Views in 2020 Sales Season

Lessons Learned

While most of the website was straightforward, needing to create a product page that went above and beyond a typical Woocommerce sales page gave it an extra dimension. Plus with the integration between a separate Etsy shop and the creation of a Facebook Shop, with its numerous steps and approvals, added to the details of crafting this website.