Ever felt stuck trying to compare tons of data, endlessly scrolling back and forth? I knew there had to be a better way and that’s exactly what I set out to solve in Carbon Hub’s project comparison page.
The comparison view had too much categorized data, making users scroll a lot and struggle to spot key differences, leading to frustration and decision paralysis.
High Level Goal
To simplify the comparison experience by reducing excessive scrolling, highlighting key differences, and making decision-making faster and more intuitive.
Getting in to work!
I started with what seemed like a straightforward task: researching comparison sites to get a grip on the best practices.
[Source : GSM Arena / Versus]
While reviewing the project data, I noticed the overwhelming categories and excessive scrolling users faced, over five sections packed with information! I knew there had to be a better way. After sketching concepts and exploring competitor sites, user testing helped pinpoint key issues and refine the solution.
Identified Key Issues
Endless Scrolling
Difficulty Adding and Removing Projects
Difficulty Finding the Respective Data Category
Overwhelming amount of information forced users to scroll back & forth to find relevant details.
The process of adding or removing projects was clunky, making it difficult for users to customize their comparison view with ease.
Users struggled to quickly locate the correct data category they were looking for, leading to frustration and inefficiency.
First attempt of tackling endless scrolling
To fix the endless scrolling, I had the idea to add data category tabs above the comparison table. This way, users can just switch between category tables instead of scrolling forever to find what they need.
UGHM! UGHM! But Client wanted all the details on one page.
The client wanted all the details on one page. So, I had to think how can I use my idea while still meeting their requirement? That’s when I decided to keep the tabs but make them work differently.
Second attempt of tackling endless scrolling
Instead of switching tables, I thought of letting users jump directly to the exact data section on the page by using the tabs. Plus, by sticking the tabs to the top, users can switch between sections easily, no matter where they are on the page.
Fixed Issues
Endless Scrolling
Difficulty Finding the Respective Data Category
Simplifying Project Addition and Removal
Simplifying Project Addition and Removal
Hmm... Something was not right!
To allow users to add and remove projects easily, I initially placed the project customization slots above the comparison table. This kept the selection area clean and accessible at the top. However, during user testing, I realized a major flaw in this approach.
Prototyping & User Testing
Prototyping and user testing helped me refine the design, ensuring a smoother and more user-friendly experience.
❌ So, What Actually Didn’t Work?
While testing, I noticed that the project slots scrolled away along with the table. Users had to scroll back up every time they wanted to customize their selections, disrupting the workflow and making the process frustrating.
✅ So What DId I do?
To fix this, I decided to make the project slots sticky along with the tabs. This way, users could always access them while the table data scrolled freely below. This small adjustment significantly improved usability, making project selection and customization seamless.
What else I discovered?
What if a user needed to browse other pages while adding a project?
That’s when I came up with the idea of a mini project selector similar to an add to cart feature This tool let users add projects without losing their place, making the process even smoother.
It was a lot of going back and forth – A complete Non-Linear Iterative Design Process.
Reflections and Takeaways
This project reinforced the importance of iterative design and user testing in solving real usability challenges. The tab navigation and sticky project slots significantly reduced friction, while the mini project selector streamlined the comparison process.
Impact
Faster decision-making became effortless as users could compare projects without getting lost in endless scrolling.
Seamless project customization became effortless with sticky slots and a mini selector, making adding or removing projects a breeze.
Improved usability made navigating large datasets more intuitive with categorized tabs.
