Overview
What is QBO?
QuickBooks Online is Intuit's cloud-based accounting platform, used by millions of small business customers to manage expenses, payroll, loans, and other finances in one place. We launched a full site-wide redesign in 2025, refreshing the interface and bringing AI into the accounting workflow.
My Role
I was a Design Technologist on QuickBooks' Small Business and Self-Employed Group Design Technology team. My team of six built the redesign's first prototypes (I specifically built the Intuit Enterprise Suite's prototype for user testing) and contributed to the modernization of Intuit's Design System. I pushed for accessibility standards, shipped three of the most-used Button variants for AI-native workflows, reviewed designers' ideas to catch issues before they reached engineering, and used a CI/CD pipeline throughout 2026 to ship fixes quickly as user feedback and bugs came in.
The Results
Shipped across QBO's core navigation, its design system, and its AI-native components — several now used in QuickBooks Desktop, Intuit Enterprise Suite, and Intuit Accountant Suite
Tokenizing IDS cut manual, subpage-by-subpage updates down to a few hours' work
Caught accessibility and performance issues, including breaks in the site's main navigation bar and a table design that would have crashed under real data volume
Overhauling the Design System
Design Documentation
When I started auditing Intuit's Design System, I found hundreds of untracked tokens with no clear record of which were accurate, deprecated, or still in use. For reference, a manageable system typically runs closer to 25-30. Documentation was completely unsearchable because it was scattered across hundreds of PDFs and Figma files.
My team built an internal search tool to fix that. My piece was the data parsing: I wrote Node.js scripts to pull and reformat the Figma and PDF documentation automatically, feeding a teammate's model so designers could search for the right component in a basic chatbot and see the current file.
Agentic Component Styling
Showing customers when they're interacting with an AI feature matters for trust — the common pattern is a rainbow gradient border, which we added to Intuit's central Button component.
I pushed to make it work in Dark Mode and stay keyboard-accessible. Gradient-bordered buttons often break accessibility because developers tend to use multiple layers of containers to get the rainbow effect. We used a border-image with a composite mask to keep it a single button element. I also built the Split Button and Dropdown Button variants, now used on pages with AI features.
Agentic Button component shown across its size variants, from the Intuit Design System.
Tokenizing the Design System
Rolling our smaller token set into QBO's codebase meant updating thousands of manually-styled elements. When another team first used Cursor to migrate the codebase, changes went out without an engineering review, turning a handful of pre-existing issues into thousands of incorrect token references.
I wrote scripts to strip out the broken references, then corrected the rest by hand before pushing to our codebase.
Once it was done, adding a new theme became a matter of minutes instead of manual updates across every subpage. My Simplified color and spacing theme in April 2026 took just a few hours and three SCSS file edits to ship an entirely different-looking site.
Designers could update graph styling through token variables instead of needing to reach out to graph engineering teams.
Fixing Accessibility Gaps
Fixing Keyboard Navigation
As an Accessibility Champion (an internal Intuit badge), I pushed my teams toward WCAG and Section 508 compliance, auditing navigation with tools like Axe and manual keyboard testing.
QBO's primary navigation had keyboard support, but it ran in reverse order from the visual layout and several elements were empty bugs that broke the tab sequence with nothing for a screen reader to announce.
Elements are in the wrong order with multiple dead focus areas interrupting the tab order.
I restructured the navigation to the correct left-to-right order, worked with the teams behind widgets linked in navigation to make their buttons focusable, and tracked down and removed the empty elements before shipping the fix to customers.
Elements are now in correct order, with no dead focus areas interrupting the tab order.
Bridging Design and Engineering
Rapid Prototyping
Animation is hard to discuss in a live meeting because it's difficult to explain in words why one option is better, and the old process meant writing the code afterward and sending it over, stretching a quick decision across multiple meetings.
Learning to rapidly prototype in Storybook and Cursor changed that. I could mock up several versions live during a meeting and let designers and stakeholders see the differences directly, instead of just hearing about them. I would even set things up ahead of time by ordering the variants so my recommendation showed first and kept the discussion from wandering outside scope.
Storybook interface showing the LargeBanner component's variants for live design reviews.
Dismiss animation options I built with Cursor, shown in an IDS brainstorm.
Catching Design Flaws Before Handoffs
DataGrid, QBO's core spreadsheet component, is used across the product for tables running up to 100 rows. Several teams had independently added tooltips to their own columns, each unaware of what the others were doing — reasonable on its own, but a design that would have crashed the browser once combined under real data volume.
I proposed a sliding side panel instead, giving users the same information through a single added element rather than tooltips stacked across a dense table. The same thinking shaped other decisions too, including the chip navigation in Omni, Intuit's AI chatbot, and the site's left navigation's shift from icon-only to labeled sections.
Wrap Up
My team's template work meant my contributions reached across most of QBO, though I can't speak to outcomes for the redesign as a whole. What I can point to: accessibility fixes shipped to the site's core navigation, a tokenized system that now lets QBO ship new themes in hours instead of weeks, and design system components — including the Agentic Button and its variants — already carried into QuickBooks Desktop, Intuit Enterprise Suite, and Intuit Accountant Suite.
Quickbooks Online, being the flagship product of my organization, was an organizational monster to tackle. Sometimes that meant working line by line in a corrupted color variable file or midnight meetings with teams across the globe working in pajamas brainstorming data visualization slice widths and margins. Working on QBO taught me how to coordinate with people whose teams I had never heard of, how to track down bugs that felt like a needle in an ocean of haystacks, and how to speak up for users with disabilities when their needs aren't prioritized. I'm not sure if I'll work on a product this big again, but I'm glad that I got to learn everything I could from it.