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.