Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Customer Experience ›› Case study: Category hierarchy

Case study: Category hierarchy

by Tornike Kurdadze
3 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Walk through the process of designing for hierarchy and learn its main challenges.

Everybody has chosen categories while filtering the content out. This action might have been overwhelming or boring for some of us while facing the ‘family tree’ of categories, their child categories, grandchild categories, etc. This endless hierarchy can make us feel lost at some point.

Case study - category hierarchy, categories

This problem is easily solvable if we have two levels of categories. To my mind, Reddit has found the best way to provide categories and subcategories in a visually appealing way.

After testing several potential users of our application, it turned out that the tree structure didn’t sound amusing for them either. Looking at the competitors of our eCommerce platform, it turned out that an optimal solution had yet to be found.

For example, on eBay, after choosing a category, you get redirected to the list of its subcategories, choosing which guides you to another list showing all the parent categories that are not highlighted enough to be easily differentiated.

I had to find a better solution for the eCommerce app with multi-levels (about 5) of categories.

The main challenges were the following:

  • Users should be able to see the path of his/her current selection.
  • Users should be able to return to the parent or any descendant category easily
  • Child categories should be different from the parent one
  • Users should not have to scroll a lot
  • Users should be able to search with keywords
  • The overall interface should be smooth and intuitive

Instead of a mere list of categories, I decided to present them in the form of chips — chips are easy to use and look cool and modern too. You will ask, how it is possible to show hierarchy via chips? After thinking it out, the following turned out to be the solution:

I provided categories as a default in the form of chips. Each chip that has subcategories — has an arrow, showing that users will be redirected to the second level when they tap on it. There are several subcategories shown right on the chips too so that users have a full expectation of what kind of interface they’ll have to deal with when they follow the flow.

In addition to the section with a bunch of chips, I placed the navigation bar at the top of the screen, right below the Categories’ search input. As a default, there is a single tab called categories, but as soon as the user chooses a category, the second tab with the name of the chosen category appears right next to the ‘Categories’. If the user goes deeper into the subcategory, the third tab appears with the corresponding name. In the end, the user has it all in hand — All the tabs to navigate or go back to any level, and easily scannable chips for the subcategories.

Category hierarchy - subcategories

Later on, after building the product, I tested the flow, and turned out that 87% of the users (132 participants) were satisfied while interacting with the interface.

Future improvement ideas:

  • When only two levels are left the Reddit model can be integrated into the process.
post authorTornike Kurdadze

Tornike Kurdadze
Mobile Engineer and UX Enthusiast with several years of experience in developing applications.

Tweet
Share
Post
Share
Email
Print
Ideas In Brief
  • Since choosing categories while filtering the content out can be complex and monotonous, it’s crucial to provide categories and subcategories in a visually appealing way.
  • Tornike Kurdadze, Flutter Engineer at Netguru, found a solution for the eCommerce app with multi-levels (about 5 of categories)
  • During testing and research, the author found that when creating hierarchical categories, there are several things to keep in mind:
    • Users should be able to see the path of his/her current selection
    • Users should be able to return to the parent or any descendant category easily
    • Child categories should be different from the parent one
    • Users should not have to scroll a lot
    • Users should be able to search with keywords
    • The overall interface should be smooth and intuitive

Related Articles

Discover how AI is changing UX research. It’s not just making data analysis faster. It’s also encouraging people to think more deeply. Learn how to strike a balance between human insight and AI-driven efficiency to create more thoughtful designs.

Article by Charles Gedeon
How AI and Metacognition Are Shaping UX Research
  • The article talks about how AI can speed up data analysis and encourage people to think more deeply about biases and missed insights, which can improve the quality of user-centered design.
  • It shows that AI-powered UX research tools need to include reflection checkpoints. These checkpoints let researchers critically assess their assumptions and conclusions.
  • The piece highlights the collaboration between AI’s ability to recognize patterns and human judgment to make sure the research outcomes are meaningful and consider the context.
Share:How AI and Metacognition Are Shaping UX Research
4 min read

How can thoughtful workspace design transform collaboration and creativity? Discover how a human-centered approach reimagined 21,940 square feet into a flexible, inspiring environment that employees love.

Article by Aalap Doshi
Rethink Space: Designing a Human-Centered Workspace that Supports Flexibility, Collaboration, Privacy, Innovation, Creativity, and Transparency
  • The article explores how human-centered workspace design can improve collaboration, flexibility, and creativity by addressing employee needs.
  • It highlights solutions like open zones, quiet spaces, and pod-like configurations, showing how these changes boosted teamwork and morale.
  • The piece emphasizes the value of co-creation, adaptability, and clear communication in rethinking office spaces.
Share:Rethink Space: Designing a Human-Centered Workspace that Supports Flexibility, Collaboration, Privacy, Innovation, Creativity, and Transparency
7 min read

Why do designers grumble at the mere mention of PowerPoint? Discover smart strategies that turn frustration into creative solutions.

Article by Jim Gulsen
Why Designers Hate PowerPoint (and How to Fix It)
  • The article examines why PowerPoint often frustrates designers, from its limited design capabilities to inefficient workflows, and explores opportunities to bridge those gaps.
  • It highlights strategies like building systematic design elements, creating templates, and augmenting slides with other design tools.
  • The piece underscores the importance of collaboration, simplicity, and proactive planning to elevate design and streamline workflows.
  • It highlights practical methods to help designers balance quality and speed for presentations that are both functional and visually engaging.
Share:Why Designers Hate PowerPoint (and How to Fix It)
4 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and