Butter Home
E-commerce Site Redesign
For this General Assembly class project, I was tasked to analyze and rework the website of a local business, focusing on the purchase flow of the site's e-commerce section. I selected Butter Home, which sells gifts and home goods primarily made by independent artisans.
My Role: UX Designer
Project Length: 2 Weeks
Skills Used: User Research, Information Architecture, Interaction Design, Usability Testing, Stakeholder Interviews, Rapid Iteration
The Problem:
Over 80% of people in the US shop online with their mobile devices, and busy, discerning shoppers need a way to easily browse and purchase unique artisan goods on the go. However, shoppers will abandon their carts and look elsewhere if a site is difficult to use.
The Solution:
A smooth, mobile-friendly website with easy navigation, quick browsing and shopping, and a focus on the shop’s unique goods and the artisans that make them.
Initial Analysis: The Butter Home Site Today
Homepage - Mobile
"Kiddos + Pets" product page, with only one item - Desktop
Main Site Usability Issues:
-
The site is not responsive, and is extremely difficult to use on mobile.
-
There are no products on the home page.
-
There's only one photo of each item
-
Only a small representation of the shop’s total stock is for sale on the site.
-
Users need to hover over an item in the shop to see the item’s name and price, which means that when using the site on mobile, the user has to click to the individual product page to see even basic information about the item.
-
The “shop” menu has far too many categories, several categories only contain one or a few items.
-
There’s almost no information about the individual artisans that make the items sold at Butter Home.
"Shop all" products page, cursor hovering to indicate price and item name - Desktop
Stakeholder Interview
Though this was a theoretical class project and interacting with our "client" was not required, I reached out to Claire (Butter Home's owner and founder) to ask her to meet to discuss some of the challenges of running e-commerce as a small business. A classmate and I joined her at her Seattle home on a Saturday afternoon. She was very open with us, and shared her experience with the challenges of running e-commerce as a small brick-and-mortar business.
Key Interview Insights:
-
Many items carried in store are not listed online because she receives them in very limited quantities, and maintaining stock that closely is a pain.
-
She would like to have a way for artisans to submit their work to her
-
She wants the layout to be relatively minimalist, so products can speak for themselves.
-
Less than 5% of their sales come from online purchases.
-
She is wary of promoting the shop on social media because it feels a bit phony to her, but would like the opportunity to further promote the artists who make the items she sells at Butter Home.
The Target User
Note: Because of the short time allowed for this project, and the project's focus on sharpening prototyping and user testing skills, the persona to design for was provided to me.
Lauren's needs that directly informed the site's new design // and how the redesign met those needs:
-
She cares about authenticity, exclusivity, and uniqueness of purchases, and she collects unique jewelry and home goods.
Butter Home sells unique artisan goods, many of which are made in limited numbers. The site redesign highlights extra-exclusive items by giving them their own section of the shop
-
She likes a well-maintained and frequently updated inventory.
The "online exclusives" area allows the shop to sell items made in very limited quantities exclusively on the online shop, both to foster urgency for shopping online, and to ease the burden of closely maintaining stock between the shop and the website.
-
She would like to purchase from mobile, and wants a responsive website.
The redesign is responsive, and was designed mobile-first.
-
She wants to know all product details and likes large product photos.
Each product listing in the shopping menu would have the item name, price, artist name, and color options (if more than one is available), so that shoppers can access critical info before they would need to click to the individual product page. Should users click through to the product page, they will have access to several product photos, as well as all of the specs and information available about that product, including links to any artist feature information on the site.
-
She doesn’t like a lengthy checkout process.
The cart and checkout have been condensed to just one page each, with an option for users to populate the billing, shipping, contact, and payment info with information saved in their account for faster purchase.
Next, I took a look a look at the websites of similar local businesses, to see what worked well for the competition. I looked at Prism, Glasswing, Moorea Seal, and Totokaelo, and did an element analysis of their sites.
Here’s what I found their sites had in common that would later inform the redesign:
-
Simple design: They all had a light, neutral design with an emphasis on product and/or editorial photos.
-
Product listings usually contained a plethora of information about the product, materials, designers, information any picky shopper would want.
-
Additionally, most competitors showed a lot of information before the user even has to click on the product page—designer, price, and color options visible in the main shopping menu, so the busy browser can get a lot of what they need without leaving the main shopping menu.
Competitor Analysis
Information Architecture
Card Sorting
I began to explore the site’s information architecture by holding an open card sort, where I wrote down the names of items from the shop, and looked for common patterns in the ways testers arranged them. The image shows the cards used in both card sorts, as well as the cards added for the closed card sort.
I noticed that some of the items were being sorted rather strangely in the open sort, and I realized that some of the items most represented in the shop's actual stock were not being proportionally represented in the card sort. For example, Butter Home sells a wide variety of jewelry, but I only had a few cards representing them. I decided that in the closed sort, I would add a few more varieties of the shop’s most popular items (adding things like “birthday card”, to prints. Adding necklace, ring, bracelet to jewelry), as it’s likely that having only one or two of the more popular items represented can skew how users would categorize them. My hunch was confirmed, once the new cards were added, and the broader category names applied for the closed sort, item organization became more consistent between testers.
Current Site Navigation
As it is now, the site navigation is extremely broad. Under the shop menu, there are 12 store categories for fewer than 100 items available for purchase.
Proposed Site Navigation
Built from card sort and usability testing feedback
The proposed architecture of the new site cuts the number of shopping categories in half, saving users a lot of clicking effort, and increasing the chances that they might stumble onto and purchase additional items that they may not have otherwise. With an added account and wishlist feature, encourage buyers to come back again and again, and more information is available via footer, providing information and answering questions this busy small business owner won't have to spend time dealing with.
Meeting Business & User Needs
Usability Testing
Scenario Presented to Testers: "You are Lauren, a woman that likes unique, handmade items, and wants to be able to shop on the go. Her best friend Tina, who loves to cook, just bought a house, and you’d like to spend around $60 on a unique gift for her kitchen. Assume that you are already logged into your account, and please browse the products available and order the perfect gift for Tina.”
This scenario encouraged browsing the entire site over a direct search for a specific item, to make sure the categories made sense and things were easy to find. The scenario also went through a complete purchase to make sure the checkout process was simple and efficient.
There wasn’t much trouble with the navigation of the shopping portion of this scenario. All five testers were able to find their gift quickly, and I got some great usability feedback, outlined in the examples below.
Clickable Prototype: First & Final Versions
Within the confines of interaction design, most changes between iteration 1 (left) and iteration 4 (right) were in the cart/checkout process.
Some examples of the changes made to these areas based on user feedback:
On the new site’s cart page, I wanted to indicate to the testers that there were items in the cart, should they want to check out, but every tester presented with the page on the left hesitated some, as there seemed to be too little visual information to indicate whether or not there was something they needed to do on this page. I raised the fidelity a bit by adding prices, quantity, and a remove option for each item in the cart. Later testing indicated that this helped more easily guide the tester to complete the task.
Iteration 4
Iteration 1
On this checkout page, I wanted to indicate that the billing, contact, shipping, and payment info was already filled in, demonstrating that the info was saved in the user’s account, and auto-populating at checkout.
Testers of the first iteration (left) were unsure as to whether they needed to enter the information or why it would already be there, so I added a couple autofill options to the fourth iteration (right) to indicate that they had saved the information in their account.
Iteration 1
Iteration 4
Next Steps
Were I to take this project further, I would start by building out the artist features, which would not only get more content onto a sparse site, but shoppers could get information about the makers of the unique goods sold at Butter Home.
I would also want add a feed to the site populated by a designated instagram hashtag for the shop. This takes some of the pressure off of the shop’s owner regarding social media, and it shows their actual shoppers enjoying their purchases.
For the shop's owner, I would want to smooth out the online ordering system, tailoring it to her needs as a busy small business owner, and fine-tuning the shipping calculator so that she doesn't have to waste as much time with corrections and refunds.
Takeaways
-
Feature prioritization is key - It is possible to be too ambitious with a project, especially with a short sprint, and most especially when you don't have a team. Though I feel this project was successful, I do wish that I had settled on prioritizing the checkout feature earlier in the process instead of letting myself get distracted by ideas for 'bonus' features.
-
The critical, game-changing nature of stakeholder interviews - Though we were not required to speak to business stakeholders, the hour I spent talking to the owner of Butter Home was probably my most learning-rich hour of the entire project. I not only learned about her own business, but gained insights into the multitude of challenges that come with managing e-commerce as a small business, many of which would have been much harder to come by on my own (for example, the challenges of maintaining stock, or how difficult it is to spend time maintaining your small business' website when you are trying to maintain every facet of your business at once).
-
Users will almost always find a way to surprise you - This was my first major foray into Information Architecture and usability testing, and I've learned a lot about letting go of my preconceived notions of what will serve users best. For example, I thought the IA for this redesign would be cut-and-dried, but it turns out there are many ways people group home goods and other retail items.
-
Small changes can make a huge difference - While I was aware of how UI details can impact usability, it's an altogether different thing to see it in action: a button here, a shift to the left, a checkbox there...all of the little details had the greatest usability impact.
Other Projects:
