02 Define
02 Define
Introducing the final product
Introducing the final product
A NEW LOOK, A NEW FEATURE
A NEW LOOK, A NEW FEATURE
After
After
After
Before
Before
Comparison tables before (top) and after (bottom).
One category, “recommended use” with both terrains and activities
One category, “recommended use” with both terrains and activities
One category, “recommended use” with both terrains and activities
Activities mentioned by customers added
Activities mentioned by customers added
Terrains added
Terrains added
Terrains added
Terrains added
Recommended use has now 2 subcategories, Activity and Terrain
Recommended use has now 2 subcategories, Activity and Terrain
Recommended use has now 2 subcategories, Activity and Terrain
Comparison tables before (top) and after (bottom).
Elements that just made more sense.
Elements that just made more sense.
A lot of the UI elements from the previous comparison app lacked visual/brand consistency. Despite the limitations of customization, I focused on adhering to the brand’s design assets for the UI elements.
Below are some highlighted changes that were made: the icon logo and the bar.
A lot of the UI elements from the previous comparison app lacked visual/brand consistency. Despite the limitations of customization, I focused on adhering to the brand’s design assets for the UI elements.
Below are some highlighted changes that were made: the icon logo and the bar.
2
Black icon hinders prominence
Black icon hinders prominence
Black icon hinders prominence
Number of items added to compare isn’t visible enough due to lack of constrast in colour
Number of items added to compare isn’t visible enough due to lack of constrast in colour
Number of items added to compare isn’t visible enough due to lack of constrast in colour
Numbers are more visible
Numbers are more visible
Numbers are more visible
Reinforced logo visibility and consistency with brand colour(D88133)
Reinforced logo visibility and consistency with brand colour(D88133)
Reinforced logo visibility and consistency with brand colour(D88133)
Compare
2
Compare
2
Icon logos from before (left) and after (right).
Icon logos from before (left) and after (right).
Compare
2
2
Compare
Compare
Clean up
Clean up
Close
Close
TRAIL CRAMPON PRO
TRAIL CRAMPON PRO
TRAIL CRAMPON ULTRA
CTA colour aligned with brand primary colour
Disabled unnecessary all-caps product names.
Disabled unnecessary all-caps product names.
Just #1 task for users is to “compare” not necessarily decide between a yes or a no.
Just #1 task for users is to “compare” not necessarily decide between a yes or a no.
Before
After
Bar that shows selected items for comparison from before (left) and after (right).
Before(top) and after(bottom) of bar that displays selected products by users.
Platform Constraints
Platform Constraints
UNDERSTANDING HOW DATA WORKS ON SHOPIFY
UNDERSTANDING HOW DATA WORKS ON SHOPIFY
Data edits first, then deal with the design elements.
Data edits first, then deal with the design elements.
Because of the nature of Shopify, the solution strategy had to be further carefully considered and looked into.
It wasn't that you could just design however you wanted to on a blank canvas. I had to understand:
First, how to edit product data and then how to edit the design elements.
Basically, the product information is all managed under each individual product page (as shown below). Whatever edits made here is automatically reflected onto the design.
Because of the nature of Shopify, the solution strategy had to be further carefully considered and looked into.
It wasn't that you could just design however you wanted to on a blank canvas. I had to understand:
First, how to edit product data and then how to edit the design elements.
Basically, the product information is all managed under each individual product page (as shown below). Whatever edits made here is automatically reflected onto the design.
No categories, just one blob of text/info
Product page
Flow to adding/editing product data.
Flow to adding/editing product data.
Takeaway
Because all product specifications are put under "description", the platform was not able to recognize the different product categories such as "weight" or "dimensions".
Takeaway
Because all product specifications are put under "description", the platform was not able to recognize the different product categories such as "weight" or "dimensions".
How might we
How might we
DISCOVERING METAFIELDS
DISCOVERING METAFIELDS
Custom data to categorize product information in detail.
Custom data to categorize product information in detail.
The next question was this:
How might we compartmentalize the product specifications?
After some digging and brainstorming, I discovered a feature within Shopify called “Metafield”s.
These are custom data mechanisms that help online stores customize the functionality and appearance of the Shopify store by letting you save specialized information that isn't usually captured in the Shopify admin.
Help Center page dedicated to introducing/explaining Metafields.
Help Center page dedicated to introducing/explaining Metafields.
Comparable
Comparable
Hillsound Equipment, February 2023
Hillsound Equipment, February 2023
Compare
Compare
Key desktop version product comparison tables.
Compare
Key mobile version pages.
My Role
Solo UX/UI Designer - Problem-solving, UX Research(UXR), Information Architecture(IA), Cross-functional Communication
My Role
Solo UX/UI Designer - Problem-solving, UX Research(UXR), Information Architecture(IA), Cross-functional Communication
Worked with
Marketing Coordinator
Customer Service Representative
Business Management Team
Worked with
Marketing Coordinator
Customer Service Representative
Business Management Team
Timeline & Constraints
No code sourcing
Solution apps on within the Shopify App Store
5-6 weeks time constraint
Timeline & Constraints
No code sourcing
Solution apps on within the Shopify App Store
5-6 weeks time constraint
Hillsound Equipment’s Goals
Audit/improve the current comparison app, LDT Compare
Reduce the number of inquiries on their expert chat service, Remark
Hillsound Equipment’s Goals
Audit/improve the current comparison app, LDT Compare
Reduce the number of inquiries on their expert chat service, Remark
Overview
Hillsound Equipment(HE) is an outdoor brand that produces backpacking, hiking, and trail running accessories including a good selection of crampons and gaiters for different purposes.
HE had problems with helping its users find the right product for their needs. They used various tools to tackle the problem but weren’t satisfied with their performances and sought further improvements.
I examined and surfaced a deeper user issue to propose a design solution that increased product comparison efficiency.
The launch of the feature gave a notable positive impact, with a 9% decrease of product recommendation inquiries on the website’s customer service platform.
Overview
Hillsound Equipment(HE) is an outdoor brand that produces backpacking, hiking, and trail running accessories including a good selection of crampons and gaiters for different purposes.
HE had problems with helping its users find the right product for their needs. They used various tools to tackle the problem but weren’t satisfied with their performances and sought further improvements.
I examined and surfaced a deeper user issue to propose a design solution that increased product comparison efficiency.
The launch of the feature gave a notable positive impact, with a 9% decrease of product recommendation inquiries on the website’s customer service platform.
The Problem
Users weren’t able to effectively compare products due to the disorganized and indistinguishable product specifications.
The Problem
Users weren’t able to effectively compare products due to the disorganized and indistinguishable product specifications.
01 Research
01 Research
Audit - customer service chats
Audit - customer service chats
WHAT WERE CUSTOMERS ASKING FOR?
WHAT WERE CUSTOMERS ASKING FOR?
Activities coupled with terrrain.
Activities coupled with terrrain.
Hillsound had a gear expert chat service live on the website, where users were asking questions about products.
I delved into 50 of the most recent conversations and discovered a trend:
95% of users were looking for crampons and gaiters based on a specific use case in pairing with a specific terrain.
Hillsound had a gear expert chat service live on the website, where users were asking questions about products.
I delved into 50 of the most recent conversations and discovered a trend:
95% of users were looking for crampons and gaiters based on a specific use case in pairing with a specific terrain.
Hi, I’m looking for a crampon that will all of my boots. I want a crampon that will be good on deep snow, and some icy terrains. Good for all around. Not like Everest type nor driveway type. - Olivier
They are for my daughter who likes to climb mountains - in the Adirondacks and White Mountains. - Karen
Hi, what are the best crampon for ice but for in town? - Ethan
Choosing the best gaiter and size for walking in the bush in snow. - Melissa
... And is it better on ice? What about deep snow? -Karen
Hi, I’m looking for a crampon that will all of my boots. I want a crampon that will be good on deep snow, and some icy terrains. Good for all around. Not like Everest type nor driveway type. - Olivier
Choosing the best gaiter and size for walking in the bush in snow. - Melissa
They are for my daughter who likes to climb mountains - in the Adirondacks and White Mountains. - Karen
...snowy and icy trails. Just hiking. - Reuben
Hi, what are the best crampon for ice but for in town? - Ethan
... And is it better on ice? What about deep snow? -Karen
Customer convo compilation from gear chat service, Remark.
Customer convo compilation from gear chat service, Remark.
Audit - existing product comparison app
Audit - existing product comparison app
WHAT WAS HILLSOUND DOING ATM
WHAT WAS HILLSOUND DOING ATM
So much information with so little order.
So much information with so little order.
I needed clarity on what was going on at Hillsound.
Users weren’t able to compare product descriptions/information efficiently. Looking into the compare feature HE had been using, there were major visual design, user-centric design issues right off the bat.
There were so many more, but just to list a few:
I needed clarity on what was going on at Hillsound.
Users weren’t able to compare product descriptions/information efficiently. Looking into the compare feature HE had been using, there were major visual design, user-centric design issues right off the bat.
There were so many more, but just to list a few:
1
2
Hillsound’s previous product comparison table.
Hillsound’s previous product comparison table.
1
Missing specification from viewport.
Missing specification from viewport.
I can't compare the 'Shoe Compatibility' for all products added in the same viewport. See how the 'Shoe Compatibility' is missing for the 'Trail Crampon'.
I can't compare the 'Shoe Compatibility' for all products added in the same viewport. See how the 'Shoe Compatibility' is missing for the 'Trail Crampon'.
2
No rows.
Tiring on the eyes.
Only 2 products have the same category on the same row. It was safe to say that rows never existed here in the first place.
Not a single product spec on the same row. My eyes are already tired just by trying to spot the rest.
3
Hillsound’s previous product comparison table.
Hillsound’s previous product comparison table.
3
Confusion/Inconsistency in information.
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?
Both products have 'backpacking' as a recommended use, but why is one specified in parentheses? In fact, what does that mean exactly?
Comparative Research
Comparative Research
CLEAN ROWS & CLEAR HIERARCHY
CLEAN ROWS & CLEAR HIERARCHY
Taking a climpse of industry standards.
Taking a climpse of industry standards.
To premise, I looked up 8 outdoor equipment brands’ websites to see what features they use to help users compare their products.
For industries that sells products with specifications, clean and clear tables were key.
Another thing to note was that brands display a very good sense of hierarchy - especially ones that have a vast amount of specifications to show.
To premise, I looked up 8 outdoor equipment brands’ websites to see what features they use to help users compare their products.
For industries that sells products with specifications, clean and clear tables were key.
Another thing to note was that brands display a very good sense of hierarchy - especially ones that have a vast amount of specifications to show.
2
1
1
Product comparison tables from MEC (left) and Arcteryx (right).
Product comparison tables from MEC (top) and Arcteryx (right).
1
Clear Rows.
Clear Rows.
It was a no brainer that all tables intended for product comparison were put into clear rows - whether that be lines, spacing, or differently coloured backgrounds.
It was a no brainer that all tables intended for product comparison were put into clear rows - whether that be lines, spacing, or differently coloured backgrounds.
2
Clear Hierarchy.
Clear Hierarchy.
The categories, Description, Price, Reviews etc., are put under another heading, Product Information. This helps users compare information without getting lost.
The categories, Description, Price, Reviews etc., are put under another heading, Product Information. This helps users compare information without getting lost.
03 Constraints/Brainstorming
03 Constraints/Brainstorming
Reinforcing Information Architecture
Reinforcing Information Architecture
SPECIFYING WHAT CUSTOMERS WERE LOOKING FOR
SPECIFYING WHAT CUSTOMERS WERE LOOKING FOR
Activities & Terrain.
Activities & Terrain.
Before adding the metafields, I teamed with the marketing coordinator to figure out how we could structure the custom data. Based on the research findings from the expert chat service, Remark, we needed to specify the use cases for each product.
We asked the industrial/product designer to help us jot down an exhaustive list of the activities as well as bring in naming conventions that were mentioned in the customer conversations on Remark.
Due to time constraints, we quickly did a poll within the internal team and landed on the term, “Terrain”.
Before adding the metafields, I teamed with the marketing coordinator to figure out how we could structure the custom data. Based on the research findings from the expert chat service, Remark, we needed to specify the use cases for each product.
We asked the industrial/product designer to help us jot down an exhaustive list of the activities as well as bring in naming conventions that were mentioned in the customer conversations on Remark.
Due to time constraints, we quickly did a poll within the internal team and landed on the term, “Terrain”.
Activity
Activity
Backpacking
Beach/surfing
Camping
Cross-country Skiing
Backpacking
Beach/surfing
Camping
Cross-country Skiing
...
Winter walking
Urban running
Hiking (ice, snow, mud)
Backpacking (ice, snow, mud)
Winter walking
Urban running
Hiking (ice, snow, mud)
Backpacking (ice, snow, mud)
Recommended Use
Recommended Use
Recommended Use
Recommended Use
Terrain
Terrain
Icy Sidewalks
Snowy/icy Trails
Frozen Lakes
Glaciers
Icy Sidewalks
Snowy/icy Trails
Frozen Lakes
Glaciers
...
3
1
2
4
After
Before
Previous IA (left) and redesigned IA (right).
Previous IA (top) and redesigned IA (bottom).
1
Getting rid of ambiguous terms.
Getting rid of ambiguous terms.
What does “winter walking” mean? Snowy sidewalks? Icy sidewalks? We eventually got rid of ambiguous activities like these.
What does “winter walking” mean? Snowy sidewalks? Icy sidewalks? We eventually got rid of ambiguous activities like these.
2
Consistent naming conventions.
Consistent naming conventions.
Previously Hillsound used parentheses to further describe terrains. We took this away to keep a consistent look and enhance readability.
Previously Hillsound used parentheses to further describe terrains. We took this away to keep a consistent look and enhance readability.
3
Introducing subcategories.
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.
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.
Specific terrains and environment.
In addition to specifying the terrain, there were 2 things to consider: where and the condition. Volià! “Icy Sidewalks”!
In addition to specifying the terrain, there were 2 things to consider: where and the condition. Volià! “Icy Sidewalks”!
Finding app solutions
Finding app solutions
LANDING ON AN APP SOLUTION THROUGH PRIORITIZATION
LANDING ON AN APP SOLUTION THROUGH PRIORITIZATION
Comparable, the app that best met our needs .
Comparable, the app that best met our needs .
After revamping the product data, it was time to implement an app that provides the comparing feature.
Due to the fact that Hillsound has a good number of product variants and option values which influence the number of metafields, Comparable enabled the best compatibility with
Metafields
Grouping for category hierarchy
After revamping the product data, it was time to implement an app that provides the comparing feature.
Due to the fact that Hillsound has a good number of product variants and option values which influence the number of metafields, Comparable enabled the best compatibility with
Metafields
Grouping for category hierarchy
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
BTS on how metafields and grouping is done with product data.
BTS on how metafields and grouping is done with product data.
METAFIELD COMPATIBILITY.
METAFIELD COMPATIBILITY.
Comparable offered customized and hassle-free migration of the many metafields for Hillsound's products.
Comparable offered customized and hassle-free migration of the many metafields for Hillsound's products.
CATEGORY SECTIONS.
CATEGORY SECTIONS.
Further grouping and categorization enable the visual hierarchy which is crucial when comparing products.
Further grouping and categorization enable the visual hierarchy which is crucial when comparing products.
07 Metrics
07 Metrics
06 Final designs
06 Final designs
Reflections
Reflections
IN HINDSIGHT...
IN HINDSIGHT...
Here’s what came to mind after wrapping up the project.
Here’s what came to mind after wrapping up the project.
1
Raw data turned out to be the golden nugget.
Raw data turned out to be the golden nugget.
Due to resource constraints, I had to work around by collecting and analyzing data manually using spreadsheets, which was fairly time-consuming.
However, having done this, I was able to surface a more underlying user problem. Reading the customer enquiries myself, I was able to understand that not only did customers want product comparison in recommended use cases, but more specifically activities coupled with the terrain.
In sum, I've learned that raw data analysis can also be beneficial to uncovering insights. This is something great to in further projects where there aren't any dedicated resources to finding data for synthesis.
Due to resource constraints, I had to work around by collecting and analyzing data manually using spreadsheets, which was fairly time-consuming.
However, having done this, I was able to surface a more underlying user problem. Reading the customer enquiries myself, I was able to understand that not only did customers want product comparison in recommended use cases, but more specifically activities coupled with the terrain.
In sum, I've learned that raw data analysis can also be beneficial to uncovering insights. This is something great to in further projects where there aren't any dedicated resources to finding data for synthesis.
2
Adapting different user research to different situations.
Adapting different user research to different situations.
Analysis and synthesis through customer enquiries enabled swift problem surfacing and solution redesigns. Taking into account that this was all done within 6-7 weeks, I realized how utilizing existing user data could greatly impact design processes such as this one, and it was pretty wise!
Also, user testings would be the first research method to come to mind when collecting feedback for potential iterations, however, I now see how other options are available and doable depending on the time and resource available.
Analysis and synthesis through customer enquiries enabled swift problem surfacing and solution redesigns. Taking into account that this was all done within 6-7 weeks, I realized how utilizing existing user data could greatly impact design processes such as this one, and it was pretty wise!
Also, user testings would be the first research method to come to mind when collecting feedback for potential iterations, however, I now see how other options are available and doable depending on the time and resource available.
08 Reflections
08 Reflections
3
04 Designing - IA
04 Designing - IA
Restating the problem
Restating the problem
SO SIMPLY PUT, THE KEY PROBLEM IS..
SO SIMPLY PUT, THE KEY PROBLEM IS..
Unclear data & UI layout.
Unclear data & UI layout.
So the overarching problem was this:
Because of certain technical products, it is important that users understand the specifications of each product. However, HE had problems with helping its users find the right product for their needs.
HE has had a comparison feature running on the website but through the research above, a key problem surfaced:
Users weren’t able to compare products - especially the recommended uses because of unclear data and the UI layout.
So the overarching problem was this:
Because of certain technical products, it is important that users understand the specifications of each product. However, HE had problems with helping its users find the right product for their needs.
HE has had a comparison feature running on the website but through the research above, a key problem surfaced:
Users weren’t able to compare products - especially the recommended uses because of unclear data and the UI layout.
Recommended use
Recommended use
Hiking (ice, snow, mud)
Backpacking (ice, snow, mud)
Trail Crampon
Trail Crampon
Recommended use
Recommended use
Trail Running
Trail Running
Hiking/Backpacking
Hiking/Backpacking
Fastpacking
Fastpacking
Trail Crampon Ultra
Trail Crampon Ultra
A
B
B
B
D
E
1
Hiking (ice, snow, mud)
Backpacking (ice, snow, mud)
2
Simplified comparison table of Trail Crampon (left) and Trail Crampon Ultra (right) within a single viewport.
Simplified comparison table of Trail Crampon (left) and Trail Crampon Ultra (right) within a single viewport.
1
Unclear data.
Unclear data.
Both products have Hiking and Backpacking as recommended use but one has more information in parentheses. Then what is the difference exactly?
Both products have Hiking and Backpacking as recommended use but one has more information in parentheses. Then what is the difference exactly?
2
Unclear layouts.
Unclear layouts.
Pretty much not a single element was aligned properly. This includes the placement & layout of product data, the alignment of text - these do not serve in helping users complete their task.
Pretty much not a single element was aligned properly. This includes the placement & layout of product data, the alignment of text - these do not serve in helping users complete their task.
05 Designing - Apps , Implementation
05 Designing - Apps , Implementation
Outcomes and metrics
EVALUATING THE PROJECT
EVALUATING THE PROJECT
A 9% drop of enquiries.
A 9% drop of enquiries.
To recap on what Hillsound wanted to achieve from this project were:
To reduce the number of inquiries on Remark
To help customers better compare products
Previously, the percentage of inquiries with crampon/gaiter recommendations was 30% of the total enquiries received.
(12/14/23 - 01/08/24)
Since the launch, this was reduced by 9%.
(01/30/24 - 02/24/24)
To recap on what Hillsound wanted to achieve from this project were:
To reduce the number of inquiries on Remark
To help customers better compare products
Previously, the percentage of inquiries with crampon/gaiter recommendations was 30% of the total enquiries received.
(12/14/23 - 01/08/24)
Since the launch, this was reduced by 9%.
(01/30/24 - 02/24/24)
02/24/24
01/30/24
(Launch)
21%
30 days
12/14/23
01/08/24
30%
30 days
-9%
Graph which shows the decrease in the amount of product recommendation inquiries over time.
Graph which shows the decrease in the amount of product recommendation inquiries over time.