Darlington Custom Leather - UX Research / UI Design
My Role
UX Designer/ UI Designer
Timeline
1 month
Tools
Figma, Maze, GoogleForms, Mural, Zoom
Stakeholders
Valerie + TJ Marshall (owners), Lee O’Connor
Overview
Darlington Custom Leather (DCL) is a Montana-based custom leather goods business. They specialize in custom-made leather handbags, hats, wallets and ironworks. This small business is owned by couple Valerie and TJ Marshall, who sell primarily at in-store locations in Roscoe, MT.
Their goal is to grow their revenue by selling more products online.
They hired me to conduct usability testing on their current website to see if and where there were pain points, and also create improvements in the overall website design.
Results
As a result of my UX research and redesign, I improved the user experience by 81%.
Design Process
Empathize
Research
During my research process, I recruited 5 participants for usability testing via Zoom and also sent out a Google Forms survey to 15 people in my network.
In the Zoom interviews and survey, I walked each user through the following protocol:
Open the website. What are your overall first impressions?
Tell me what you think the differences are between the “Ready To Ship” and “Shop” menu options in the navigation bar.
Go through the process of ordering a custom bag. Tell me any thoughts/feelings that came up during this process.
Any more feedback about the website you’d like to offer?
Define
Key Takeaways
I made an affinity map to visualize all the pain points uncovered from the focus group. Some key takeaways were:
Users were having confusion over the difference between “Ready To Ship” & “Shop” categories in Navigation Bar.
Users were confused about how to build a custom bag and which items were customizable.
Over ⅓ of users thought “Ready To Ship” category contained order information after item was purchased.
Overall, a lot of users had design pain points, such as font size, font style, and lack of white space between images.
Next Steps
Based off my findings, I recommended:
A reorganization of the navigation menus, by consolidating the “Ready To Ship” and “Shop” categories into one“Shop” category.
The content within all categories will be sorted by product type, and availability will be indicated on each product page.
The amount of items in stock will be identified with a badge, and a customization option button will be included on each individual PDP (product detail page).
The “Custom Build” category on main nav menu must be prominent, not hidden in a submenu.
I also propose an overall website design update which will create brand consistency that will build trust and confidence in the user.
Competitive Analysis
For the redesign, I wanted to do some competitive analysis on other existing small business leather goods companies. The main things I wanted to analyze were:
Their navigation menus
How the product was organized
How they implemented custom ordering
Their overall branding (for inspiration for DCL redesign).
Findings
With this data, I proposed the following for DCL:
Categories in the navigation menu had to be consolidated/changed
Products need organization. Every brand that I analyzed used one main “Shop” category, and then other categories within shop that organized the content by type.
Implement a “Sold Out” badge on all PDPs that activates when item is out of stock.
Implement a “Customize Your Own” button on all PDPs. This button will send user to the “Custom Orders” page.
The custom orders page should offer ability for user to message the company, not just a phone call option.
Ideate
Sitemaps (before + after)
I sketched out a sitemap in Mural to reorganize the structure of the website. Below is the current sitemap, followed by my redesigned sitemap.
Current Sitemap
Proposed Sitemap
Reorganization of Navigation Menus + PDPs
Below are examples of the current navigation and the proposed redesign of the navigation.
I eliminated the “Ready to Ship” menu category and put all the items in the “Shop” category, where each product type will be further categorized into submenus.
I moved the “Custom Build” category to top-level navigation, instead of being a submenu option in the “More” category.
Current Website - Navigation Menu
Proposed Redesign - Navigation Menu
Current Website PDP vs. Proposed Website PDP
Wireframes
With my usability data, sitemap and competitive analysis as a guide, I sketched out lo-fi wireframes for the homepage using the Crazy 8's method. I then chose a design and converted it to a hi-fi wireframe.
Prototype
I built a hi-fi prototype in Figma where the user could test 2 flows:
a custom bag ordering flow
a regular in-stock item purchase flow
Test
I used the Maze software and recruited 40 users to perform a usability test with my Figma prototype. They were asked to perform the following task:
You want to purchase a bag.
Navigate to the bag page.
You want to buy the Bear Creek Bag, but you see it's sold out. You want to see if you can build your own custom version.
Proceed to order a custom version.
This task would test the general navigation of purchasing a product, as well as test how the user found the “custom order” experience to be.
Results
The heatmaps from the Maze test showed that 75% of the users followed the ideal paths I indicated for the prototype. 8 users gave up or bounced (I believe some of this was due to Maze software issues, as some users messaged me about test not working on their computer).
Overall, 81% of the users felt the overall design and experience had improved.
Additional User Feedback
Positive Feedback
Most of the users navigated to the Shop page successfully, chose a customization, and made a purchase successfully. The majority of users also felt the redesign was an improvement over the current website’s design.
Positive quotes from the Maze test:
“Pretty straightforward! Easy to navigate!”
“It was a much smoother experience this time”
“Love the new design”
Critiques
Some people also didn’t understand the testing instructions fully and were clicking on non-working parts of the prototype.
One user mentioned that they were still confused about whether customization was possible, even if an item is sold out. So, I took that into consideration and added a line of text on the Bags product page, which explains that all items are customizable.
Another user mentioned wanting to add further customization beyond just choosing a leather and a fabric, so I took that into consideration and added a text box, to provide DCL with additional notes/specifications that the user wants to add to their custom order.
Negative Feedback from the Maze test:
“Customizing still felt a bit confusing. It's custom but I can't change the straps, size, shape, accessories, etc”
“The "Out of Stock" options are only seen once a selection is made, it would help if there was a way to show what's still available before reaching that point.”
Style Guide
Color
Typography
Logo + Icons
