Designed settings framework to improve how users retrieve information in data heavy workflows and scaled feature development across teams.
Bill.com
B2C | Fintech | Information architecture | Systems thinking
My Role
As a senior designer, drove end-to-end design of the Settings framework, conducting research and mapping workflows, while collaborating with cross-functional teams to ensure scalability.
Project Details
Timeline: 6 months
Team: Collaborated with a cross-functional group:
Lead Product Manager
Engineering Lead, Frontend and Backend Engineers.
Impact
Achieved full analytics coverage
Key task completion rate improved by 25%
Launched 3× new Settings pages
The Problem
Outdated and fragmented Settings caused navigation issues, inconsistent UI, and slowed feature updates across teams.
Settings hadn’t been updated for years, this created challenges just as Bill.com planned to expand features, integrate an acquisition, and grow the Settings space.
How might we streamline Settings so users can complete tasks faster and teams can scale features efficiently?
The Solution
SOLO: a scalable micro-app framework
Turned the User Profile into the new landing page for Settings, giving people a clear starting point.
Added feature summaries, inline edits, and autosave so changes felt quick and effortless.
Cut task time by 30% while allowing flexibility for future updates.
First Bill.com React app fully built on Trinity.
Delivered 3× new Settings pages in the first release cycle.
Created a consistent, accessible system across 9 feature teams for the platform.
Smarter menus were structured according to each user’s role and permissions.
Users only saw what was relevant to them, reducing confusion.
Critical tasks like password resets were 25% faster.
Research:
Current State Audit & Competitive Benchmarking
Uncovered 125+ Pages of Settings Complexity
Through a full audit and competitive benchmarking of 10 platforms, I mapped over 125 Settings pages.
This revealed major issues with navigation, consistency, findability, and scalability that helped shape the redesign strategy.
"Inconsistent design increases cognitive load making interfaces more difficult for users to navigate and use effectively."
Source: Jakob Nielsen's usability heuristics
Stakeholder interviews
"These interviews point clearly that Settings needs a redesign, the workflow is full of pain points."
Source: Product manager at Bill.com
I interviewed 35 stakeholders across 9 product teams, uncovering major pain points in Settings: unclear page ownership and overly complex workflows.
Product Teams:
Accountant, Midmarket, Sync
International Payments & Card
Core AP, AR, Onboarding
Risk, Core Payments
Basic, Network, Mobile
Partners
AI, Tools, Billing
Customer Support
Onboarding, Get Started
Validating Information Architecture with Mental Model Testing
Card sorting study drove the need for a new information architecture
I led a 2 part card sorting exercise: results revealed misaligned mental models and inconsistent terminology, confirming the need for clearer categorization.
Analyzing data
Research insights shaped design principles and identified core user needs.
I turned research data into an affinity map, generating insights. This helped define design principles, core user needs that worked as a common language for the team and shape a direction for brainstorming design ideas.
Information Architecture: Visualizing the Ideal Setup
1 site map to align all teams
I created an application map that organized 125+ pages into sections, categories, and actions. More than a static sitemap, it visualized user flows and relationships, helping the team align priorities, plan builds, and keep stakeholders coordinated.
Design
Multiple explorations and iterations
Building on research insights, I sketched and iterated multiple navigation models, interaction flows, and layouts.Through close collaboration with design system partners and engineers, these ideas were iterated over a few weeks into scalable solutions, paving the way for React adoption and a micro app architecture.
Evaluation Method: Heuristic Walkthrough + Prioritization Voting
I ran a structured walkthrough of the design explorations, asking evaluators to complete common tasks (e.g., updating billing info, adding a user) while referencing the proposed flows. Each design was then scored through guided questions and prioritization voting.
Team Alignment
…and then there were 2
The voting ended up with two promising design concepts that we considered for implementation which leveraged latest design system components, fresh layout ideas including dashboards, new illustration styles, and creative color palettes.
Evaluation
A/B testing with 32 participants suggested…
Design A: Nested design
Design B: Separate app design
Participants completed benchmark tasks in both versions, "Separate app design" showing a 22% faster average completion time and a 30% reduction in errors. Feedback highlighted clearer navigation labels, more logical grouping of settings, and easier page hierarchy. A post-task preference survey showed 68% of participants favored "Separate app design", citing confidence and reduced guesswork. These results established the "Separate app design" over "Nested design" as the stronger foundation for the final Settings redesign.
Final design
Micro-app for Settings
The final design included a focused modal experience with a neutral framework, making it easy to customize for private-label bank channels. The bank channel is currently considering a full transition to the new Settings
Small but mighty wins around domain driven development…
React App: BILL's inaugural React app boasted a modular architecture, facilitating ease of extension and maintenance.
Backend-Driven Navigation: Implemented a navigation system driven by the backend, enabling dynamic menu item display based on factors like roles, permissions, feature flags, and subscription data.
UI/UX Parity: BILL's initial application debuted exclusively with the Trinity design system, ensuring consistency in user interface and experience.
Enhanced Performance: Achieved faster server-side rendering and improved efficiency through lazy loading.
Module Federation: Introduced a portable micro-app structure capable of module federation, optimizing organizational ownership and maintenance.
Legacy Support: While not seamless, the new architecture accommodated older JAVA pages until they were ready for redesign.
Want to learn more? Reach out for the full case study
© 2026 Surabhi Sontakke. All Rights Reserved.