| Hillsound Equipment's product comparison feature.
✅ For who?
Hillsound Equipment, a company that provides a selection of professional outdoor gear for nature enthusiasts.
✅ What did I do?
I helped Hillsound improve their product comparison feature, Comparable.
✅ What impact?
This led to a 25% decrease in related customer inquiries, reducing costs for the business.
My Role
Lead UX/UI Designer working in a company-wide team of 11
Worked with
Marketing Coordinator
Customer Service Representative
Business Management
Timeline
8 weeks, February 2023
Hillsound Equipment
Hillsound Equipment Inc. is an outdoor brand that produces backpacking, hiking, and trail running accessories for outdoor enthusiasts.
Key mobile version pages.
Hillsound Equipment’s Goals
Audit of current comparison feature
Reduce the number of relevant customer inquiries
What I ACTUALLY did
The product 👩💻 : Reinforced IA and Comparison Feature Redesign.
I recategorized and modified product specifications based on customers' needs.
I redesigned the comparison feature focusing on usability heuristics and function prioritization.
The impact 📊 : 25% decrease of product recommendation inquiries.
The redesign and launch of the feature gave a notable positive impact, with a 25% decrease of product recommendation inquiries on the website’s customer service platform, which dropped costs for the business.
CX Analysis
What were Customers Asking for
To save time, I chose to learn the customer data that was already available instead of alloting time and seeking newer customers. Therefore, I connected with the customer service representative to access and take a look at customer service chats.
By analyzing 50 of the most recent conversations, I identified some trends:
76% of all inquiries were related to product comparisons or recommendations.
58% of these focused specifically on the product's recommended use.
85% of customers sought crampons and gaiters tailored to a specific use case combined with a specific terrain.
This insight became instrumental in refining product specifications and improving the user experience.
Choosing the best gaiter for
walking in the bush in snow. - Melissa
Feature Self-audit
What was Hillsound Missing
No rows and confusing product data.
To gain clarity on Hillsound's challenges, I perused the compare feature. A closer analysis revealed significant visual design and user-centric issues.
While there were many areas for improvement, here are a few key examples:
The 'Shoe Compatibility' content for all products aren't aligned due to missing rows.
1
'Shoe Compatibility' is missing from viewport.
1
Missing specification from viewport. (No rows)
There are no clear rows in this table. Therefore, I could not compare the 'Shoe Compatibility' for the added products in the same viewport.
2
Confusion/Inconsistency in information.
Both products have 'backpacking' as a recommended use, but why is one specified in parentheses? In fact, what does the whole thing mean exactly?
Design Referencing
Mining the Archives
Given the niche-specific nature of the products, I aimed to better understand how competitors supported product comparison. To do this, I analyzed the websites of 8 outdoor equipment brands to identify features designed to facilitate comparisons.
Here are some key highlights from my findings:
1
2
Research Takeaways
Hillsound's current product comparison feature lacked organized tables and accurate product information.
Customers were asking for product recommendations the most, however, more specifically based on desired activity AND terrain.
The High-level Goals
Building the Blueprint
We need: A working table + comparable product data.
Based on the research findings and takeaways, I summarized the higher level goals I hope to achieve with the project.
A Working Table
Compare the product specifications stress-free.
Comparable Product Data
Platform Deep-dive
Addressing Goal A
:Configuring a readable table
Additional tags needed to be assigned for a table.
You could raise the question (Believe me, I did too),
'Seems like an easy fix, why was a table with straight rows and columns difficult to achieve for Hillsound?'
This is how looking into the platform took off.
Basically, all product information was managed under each individual product page (as shown below). Here, the product information was written under "Description". Because there were no other tags/identifiers, the software was just merely allowing users to compare "Description"s, hence, the unordered tables.
No categories, just one blob of text/info
Opportunity
How Can We
Compartmentalize Product Specifications
Through research, I discovered Shopify’s Metafields feature. Metafields are custom data tools that allow online stores to enhance functionality and appearance by saving specialized information not typically captured in the Shopify admin.
By integrating Metafields into product specifications, we created tags that enable Shopify’s system to organize and differentiate product details based on their respective Metafields. This enhanced the store’s ability to deliver tailored information and improve the user experience.
Information Architecture
Addressing Goal B
:Providing customers with information they need.
Before integrating Metafields, we revisited the product specifications based on insights from customer chats. Many inquiries paired a specific terrain with an activity when seeking product recommendations.
Adding "Terrain" as a standalone specification felt semantically off. According to our team of outdoor enthusiasts, "The environment or terrain could fit under Recommended Use."
To address this, we refined the specifications by splitting "Recommended Use" into two categories: Activity and Terrain. After conducting a quick internal poll, we aligned on these terms to ensure clarity and relevance.
...
...
3
1
2
4
Previous IA (left) and redesigned IA (right).
1
Getting rid of ambiguous terms.
What does “winter walking” mean? Snowy sidewalks? Icy sidewalks? We eventually got rid of ambiguous activities like these.
2
Consistent naming conventions.
Previously Hillsound used parentheses to further describe terrains. We took this away to keep a consistent look and enhance readability.
3
Introducing subcategories.
Specifically, the “Recommended Use” could be further divided into 2 subcategories: Activity and Terrain. The different terrains would complement the use cases(activities) that customers consider when comparing products.
4
Specific terrains and environment.
In addition to specifying the terrain, there were 2 things to consider: where and the condition. Volià! “Icy Sidewalks”!
Requirement Prioritization
Sifting for Gold
Working around dependencies and the project scope, my approach deviated from conventional design steps.
The following is how this process went in a nutshell:
Comparative Research
:Focusing on features, flows, subscription fees, UI customization.
Prioritization Matrix
:Evaluating functions and features, ensuring the selection of the most suitable app solution.
Proposals and Revisions
:Communicating with client regarding findings and decisions.
Ultimately, I chose the app Comparable for its superior compatibility with:
Metafields integration
Category hierarchy grouping
Why? The key requirement for this project was seamless and flexible integration with Metafields, given Hillsound’s extensive product variants and option values that directly impact the number of Metafields.
Where are the wireframes and sketches?
Final Designs
A New Look, a New Feature
Before
Recommended use has now 2 subcategories, Activity and Terrain
Comparison tables before (top) and after (bottom).
The previous comparison app's UI elements lacked visual and brand consistency. While customization options were limited, I prioritized aligning the UI elements with the brand's design assets to create a cohesive experience.
Highlighted Changes:
Icon Logo
Comparison Bar
2
Compare
2
Black icon hinders prominence
Reinforced logo visibility and consistency with brand colour(D88133)
Numbers are more visible
Bar that shows selected items for comparison from before (left) and after (right).
Outcomes and Metrics
Measuring the Milestones
Hillsound's primary objectives for this project were:
Reducing the number of inquiries on Remark
Cutting costs associated with responding to inquiries
Did we achieve these goals? Absolutely.
Before the launch, 76% of total inquiries were related to product recommendations and comparisons. Following the launch, this was reduced by 25%.
Of these inquiries, 58% specifically focused on recommended use. Post-launch, this number dropped by 17%, from 58% to 41%.
This measurable improvement reflects the success of the project in addressing Hillsound's goals.
-25%
12/14/23
01/08/24
30 days
02/24/24
01/30/24
(Launch)
30 days
Reflections
IN HINDSIGHT...
Was this truly the best design that you could come up with?
1
Customer inquiries were an incredible source of qualitative data.
Due to resource constraints, I conducted user research by analyzing customer inquiries, which served as a rich source of qualitative insights.
This approach revealed a deeper user need: customers wanted not only product comparisons for recommended use cases but also guidance on pairing activities with specific terrains.
By leveraging existing data, I saved time compared to traditional research methods and learned to navigate limitations effectively, delivering impactful results under tight deadlines.
2
30 Days VS 50 Conversations?
By the end of the project, we successfully achieved Hillsound's goal of reducing the number of inquiries. By identifying a key user issue and addressing it effectively, I contributed to this reduction in inquiries.
However, there is one thing I also noticed. I measured performance by tracking the number of inquiries gathered over a consistent 30-day period. In summary, I’m curious how the metrics would compare if they were based on the same number of inquiries as before—specifically 50 conversations.
