Design of a Boutique e-Commerce Website
Case Study
01
Project Overview
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. Additionally, the website needed to stand out amid a marketplace flooded with cheap, production line products. The website had to both justify the price point of products and attract buyers interested in heirloom, quality goods.
Problem Statement
Users needed to easily be able to purchase, order, and customize bespoke, handcrafted goods from a small company in a way that felt traditional and well-crafted.
The Goal
To create an easily navigatable website with an simple checkout flow that emphasized the handcrafted feeling of the merchandise.
The Team
I worked closely with the owner of the company and reached out to specialists if I ran into any problems with the website development.
My Role
I was the sole UX Designer and lead graphic designer (the company provided the logo and numerous photos) and website developer.
02
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.
Three outdoor enthusiasts were interviewed to understand what they looked for in purchases of highend products as well as issues with online shopping/payments.
Filson Advertisement
Research Results
Outdoor brands such as Filson and Orvis offered a glimpse at what a similar and more robust product marketing strategy could look like. Buyers and sellers in more personal forum markets that crafted similar gear helped added to a user persona and define the overall website style. Pain points on online sales and specific notes on what users looked for to make a choice to buy were noted.
Orvis Advertisement
Persona
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.
“I imagine my kids twenty years from now holding this same kettle and remembering all the great adventures we had… and then telling their kids about them too.”
03
Wireframes
The website is designed as an e-commerce site to sell quality goods. The information architecture needed to be based on the ease of viewing products, finding information that highlights the prodcut’s uniqeness, and check-out with secure online payment.
Building customer trust of the brand and displaying the products in a way that highlights their heirloom potential is key. A typical Woocommerce design for a WordPress website would not be sufficient and was quickly ruled out.
A premium WordPress theme that allowed complete customization of even plugin pages, such as Woocommerce pages, was selected. This opened up the possibilities of what could be done in the wireframes.
Low Fidelity Wireframes
Brand Guide
The company already had a logo with a few selected colors. I created some additional color options to compliment those that would appeal to our persona, Jason.
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 used for a few areas such as buttons.
The owner of the website is a photographer and outdoorsman as well as a crafter. Due to this, ample imagery fitting the needed look of the website that would resonate with Jason were available.
Logo
Colors
Fonts
04
Development
Facebook Shop
The website was built on WordPress using the highly customizable Divi theme. Plugins such as Woocommerce were used to handle checkout, but changes were made to the shop and product templates to customize them, creaing a whole new look despite being built on well-used components.
Shop Pages
Woocommerce was integrated with PayPal as a payment option, keeping payments secured but not storing sensitive data directly on the website. Considering that physical products would be shipped, tiered shipping based on weights and size were created to keep the shipping costs simple.
Variable products were utilized to enable users to select desired products, considering each was unique due to the nature of the product materials.
Integrated Stores
Users had expressed a desire to not have to jump from platforms such as Facebook to a website to complete purchases. To minimize this painpoint for users, the website was integrated with Facebook and Etsy stores, allowing merchandise to be displayed and purchased where the user found the product.
User Testing
User testing took place with three users, making sure the variable products worked and were not confusing, the address verification worked as expected, checkout wasn’t overly cumbersome, and that payment went through without complication.
Variable Product Page
(hover for details)
05
Launch
After user testing, the website was launched in October 2021, in time for the 2021 holiday season.
Website Speed Through
06
Results
The muted colors, emphasis on sage green, and use of really great photography lifted 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 2021 Sales Season
07
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.
Users were pleased with the look and feel, which helped emphasized the handcrafted and heirloom nature of the products. They appreciated being able to find and buy the products on other websites such as Etsy.