Background
As part of the product roadmap to improve usability and scalability in a contract management platform, I led the redesign of the contract repository’s table layout. This is one of the most heavily used interfaces by legal teams, who manage hundreds of contracts at a time. My role spanned discovery, UX/UI design, and scaling the new structure across the platform.
Core problem
The contract repository suffered from clutter, inconsistent alignment, and an overwhelming number of competing interface elements, especially on small screens. Legal users found it hard to scan, locate contracts, or perform bulk actions. The UI lacked hierarchy and failed to guide user attention.
Evidence from support tickets + user feedback:
Key actions, filters, and views were crammed into a single strip, reducing usability.
Excessive green elements made important information indistinguishable.
Search was hard to find, and users mistook it for the global search.
Redundant import buttons created more noise than value.
Design constraints
Engineering required that the table be built using the MUI X Data Grid, which limited custom interaction models. Additionally, the custom-built filters bar could not be relocated without major rework. This meant the layout had to be redesigned within strict structural boundaries.
Discover & Define
Identifying the core usability problems through user feedback and internal analysis.
Analyzed support tickets to cluster key user frustrations.
→ These tickets highlighted patterns of visual overwhelm, action confusion, and inefficient workflows.Synthesized five primary pain points that affected scannability, attention, and efficiency.
→ These ranged from mixed alignments and visual overload to misgrouped controls and poor search discoverability.Interviewed internal teams to verify impact on onboarding and search behavior.
→ Legal customer success and QA teams confirmed that new users especially struggled to locate contracts quickly.
Findings
Finding 1: Table actions and filters are visually overloaded
Users reported that all controls, filters, view toggles, and bulk actions, were jammed into a single top bar.
This made scanning for relevant contract info difficult, especially on smaller screens.
→ Resulted in cognitive overload and visual fatigue.
Finding 2: Mixed alignment and color overuse cause attention loss
Contract titles, tags, and CTAs all used the same green color, with inconsistent alignment across columns.
Users found it hard to distinguish key data from less important elements.
→ This undermined the visual hierarchy and reduced scannability.
Finding 3: Bulk actions were misplaced and confusing
Bulk and item-level actions appeared in the same space as filters and view controls.
Users didn’t expect actions to be there, describing the UI as “random” and frustrating.
→ Led to slower task execution and steeper learning curve.
Finding 4: Redundant elements added to cognitive load
Icon buttons for importing from OneDrive/Google Drive were rarely used, and visually competing with more important actions.
→ Created unnecessary friction and cluttered the interface.
Finding 5: Search bar was hidden in visual noise
In usability sessions, most participants missed the dedicated contract search bar and used the global search instead.
Its small size, muted color, and poor placement were to blame.
→ Directly impacted task success for first-time users.
Diverge & Explore
Exploring layout options while respecting technical constraints and future scalability.
Audited all other tables in the platform to spot inconsistencies.
→ This ensured any new hierarchy would align with future efforts and reduce design/engineering debt.Sketched hierarchy layout variations for aligning actions, filters, and table controls.
→ Explored multiple configurations to balance clarity, usability, and feasibility within the MUIX Data Grid.Prioritized clarity, action grouping, visual hierarchy, and reuse potential.
→ Design directions were evaluated based on user understanding, scalability, and implementation cost.
Final Solution
The final solution had two goals: immediately improve the contract table’s usability and create a scalable pattern for the rest of the product.
1. A cleaner, more structured UI layout for the contracts table
Focused redesign to reduce overwhelm and improve task flow without increasing engineering scope.
Separated filters from action buttons to reduce visual competition.
→ This restored hierarchy and gave filters a clearer purpose separate from table and bulk actions.Re-aligned content and standardized emphasis (less green, better alignment).
→ Key contract info no longer competed with CTAs or tags, improving scanning and comprehension.Made the search bar larger and visually distinct to reduce misclicks.
→ Visibility improvements helped users locate contract-specific search faster, especially new users.Removed redundant controls to reduce mental load.
→ Icons for unused features were removed, making the top bar less noisy and more purposeful.
2. A reusable table framework for scaling
Designed with long-term efficiency and consistency across the platform in mind.
Designed previews of three other table types (tasks, deals, counterparties).
→ Demonstrated how the new layout could work across similar interfaces.Created a pattern that engineering can reuse, cutting dev time in half.
→ Engineering could now drop in consistent table structures with minimal design review.This introduced consistency across the platform and reduced onboarding friction.
→ Users moving between different modules now encountered a familiar, predictable layout.
Results and Impact
The redesign led to measurable improvements in usability, perception, and internal scalability across the platform.
By restructuring the layout to reduce visual clutter and cognitive load, users were able to complete tasks faster and more confidently. Internally, the new table pattern became a scalable system that could be reused across other parts of the product; accelerating development and delivering a more consistent product experience.
Usability & Task Completion
Users were able to locate and export contracts significantly faster post-redesign.
Reduced scanning friction led to quicker decision-making and fewer misclicks, especially among first-time users.
User Satisfaction & Confidence
Users reported a noticeable reduction in cognitive overload, especially on smaller screens.
The improved layout contributed to a stronger sense of control and trust in the product, reinforcing the platform's professional credibility.
Faster Time-to-Value for New Users
With clearer hierarchy, decluttered controls, and a more visible search bar, onboarding friction was reduced.
New users could now understand the interface more intuitively, reaching their goals with less trial and error.
Engineering Scalability & Efficiency
The new hierarchy pattern was built to conform to MUIX Data Grid constraints, making it feasible to implement without re-architecting.
Engineering reported a 50% reduction in dev time when reusing this table pattern in other modules like Deals and Tasks.
By solving for a shared structure, future table redesigns now have a ready-to-use, tested template, saving time across both design and development.
Summary:
The new design resulted in faster tasks, less friction, more confident users, and a cheaper path to scale, turning a previously cluttered UI into a modular, efficient experience for both users and the product team.
Reflection & Lessons Learned
This project taught me how to balance design intent with technical feasibility, while building patterns that scale across a product ecosystem.
Constraints can sharpen clarity
Working within the limitations of the MUIX Data Grid and immovable filter component forced me to focus on what truly matters: visual hierarchy, spacing, and grouping. Rather than fight the constraints, I adapted the layout to improve usability within them; a skill critical in startup and enterprise environments alike.
Consistency builds trust
While users didn’t ask for “consistency” directly, the frustration they expressed stemmed from unpredictable placements and crowded layouts. This taught me that UI consistency is not just aesthetic, it’s essential for speed, confidence, and scalability.
You don’t need to redesign everything to improve everything
Some of the biggest usability gains came from clarifying groupings, reducing redundant actions, and emphasizing the right elements, not from reinventing the table component itself. Small changes, when grounded in user insights, can lead to meaningful impact.
Support tickets are design signals
Rather than waiting for a formal UX research process, I leaned into the support team’s insights and grouped common complaints. This showed me that even “unstructured” feedback can drive a focused, effective redesign, especially in fast-paced environments.
Design systems aren’t just for UI kits
By framing this redesign as a reusable table pattern, I created a building block the team could extend to multiple areas. This kind of thinking goes beyond visual polish; it makes design a strategic lever for scale.