Hillsound Equipment, February 2023
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
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
Instead of taking time to seek newer customers, I chose to learn the customer data that was already available to save time. 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 a clear trend:
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.
Detailed Research Analysis
Choosing the best gaiter for
walking in the bush in snow. - Melissa
activity
terrain
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:
1
'Shoe Compatibility' is missing from viewport.
The 'Shoe Compatibility' content for all products aren't aligned due to missing rows.
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 that mean exactly?
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
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
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
B
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.
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.
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
After
Before
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”!
Now that we have taken care of the product data, it was time to figure out how the UI is to be displayed. Or in this project, it was time to implement an app that is capable of showcasing the product information and the comparison function.
Where are the wireframes and sketches?
My approach deviated from conventional design steps. I began with comparative research on available apps, followed by creating a prioritization matrix to evaluate functions and features, ensuring the selection of the most suitable app solution.
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.
Ultimately, I chose the app Comparable for its superior compatibility with:
Metafields integration
Category hierarchy grouping
3
1
5
3
3
2
Flexsteps Crampons
Freesteps6 Crampons
Trail Crampon
Trail Crampon Ultra
Trail Crampon Pro
Cypress6 Crampons
Skikeeper
4
colour
warranty
weight
(per pair) XS: 316g / 11.1oz
Lifetime
Black
Black
Green
Product Information
Sizes
Colour
Warranty
Patented in
XS
black
2 years
Canada
S
M
L
XL
green
U.S
METAFIELD COMPATIBILITY.
Reason: Comparable offered detailed customization when trying to migrate the Metafields for Hillsound's products.
CATEGORY HIERARCHY GROUPING.
Reason: Further grouping with headings to boost visual hierarchy was crucial due to extensive product specifications.
Comparison tables before (left) and after (right).
Before
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
Compare
2
CTA colour aligned with brand primary colour
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
Was this truly the best design that you could come up with?
1
Customer inquiries as a 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.
