Redesigning Clover’s Navigation for 6,800+ Merchants
Clover serves 6,800+ business owners who rely on our POS and back-of-house management system to run their businesses. But while competitors like Square and Toast offered intuitive navigation experiences, ours had become a chaotic mess of 25+ unorganized options. This was a clear competitive liability that was actively hindering growth.
Company
Clover
Industry
Fintech
Year
2022
Timeline
1 Month
Role
Senior Product Designer
My Role
I was the lead and only product designer on the team. I created IA diagrams, led discovery, got stakeholder feedback, and working with our user researcher to conduct and analyze usability tests.
My Team
1 User Researcher
Various Directors of Design (For consultation)
The Challenge
Clover's navigation had evolved organically from a small startup into a comprehensive platform without any intentional information architecture strategy.
The problems were systemic and growing:
Navigation bloat: Over a dozen disparate items crammed into the left sidebar with no organizational logic
Zero information architecture: No consistent categorization or hierarchy as features were simply added wherever there was space
Merchant confusion: Users couldn't predict where to find functionality, leading to frustrated task abandonment
Scalability crisis: Every new feature made the problem exponentially worse
So, we asked ourselves…
How might we create a new navigation that could bring order to chaos as well as provide a platform for future expansion?
The current navigation had little to no organization and led to users having no idea where to look for certain pages.
The Solution
I reorganized Clover's information architecture and designed three distinct interaction models to solve the navigation crisis.
Through user testing, I discovered that a conventional expanding tree navigation delivered the best experience. Users could quickly find what they needed without getting lost in complex interface patterns.
The Impact
Our executive team, including the VP of Design, VP of Product, and VP of Engineering, all bought into the need to build the new navigation system.
How we got there
We started by thoroughly mapping and evaluating our information architecture.
I collaborated with my Design Director to audit our existing navigation and develop new organizational schemas.
With our new IA in place, I explored multiple navigation options to accommodate the breadth of our product offerings.
Option 1: Traditional Tree Navigation
Familiar expandable categories, but risked continued bloat as features grew.
Option 2: Parent > Child Panels
Contextual focus with persistent orientation, but required significant screen real estate.
Option 3: Mode-Based Navigation
We replaced the entire navigation with the submenu. This maximized expandability while reinforcing our merchants' natural mental models.
Outcome
We tested interactive prototypes with five merchants, which showed us that while the mode-based navigation had merit, they all preferred the simplicity of the standard tree-based navigation.
This also allowed us to create clear page templates that any team could use to structure their content.
Final Note
At the time of my leaving Clover, the executive team, including multiple VPs and directors of design, had bought into this new layout and template structure to bring order to Clover's web experience. However, I cannot say to what degree it was implemented since that began after I left the company.
Key Learnings
Architectural Problems Require Long Term Thinking, Not Feature Fixes
Navigation bloat can't be solved by incremental improvements—it requires fundamental rethinking of information architecture and user mental models. Sometimes the best solution isn't the most obvious one.
User Testing Validates, But Strategy Guides
While user testing confirmed preferences between options, the strategic decision required weighing long-term organizational benefits against immediate usability wins. Both data and vision are essential for architectural decisions.
