Intuit QuickBooks
App Marketplace Replatform and Redesign

Project highlights
  • Design strategy
  • End-to-end product design
  • Hands-on prototyping and design technology

Challenge: The Intuit App Marketplace at was on an abanonded tech stack, non-mobile and penalized by search engines, did not follow any Intuit design systems, and had a clumsy, bounce-prone user experience across the board, resulting in QuickBooks users never making it to connecting an app.

Hypothesis: If we provide QuickBooks users with an app marketplace that is easy to search and browse, clearly states the benefit of each app, and is mobile-ready for proper SEO discovery, we will see an increase in app discovery and connections, result in increased customer benefit and lifetime value.


Context: The QuickBooks App Marketplace (known as is a property that goes back to its acquisition by Intuit in 2000. It is the marketplace for 3rd party integrations that connect into QuickBooks Online. has undergone many revisions, but by 2017 the entire property had grown stale, was on an antiquated and brittle platform, and did not meet the needs of the QuickBooks customers who rely on it.

It is known that when a QuickBooks customer uses integrations, they gain quantifiable benefit and are more successful in the management of their business, which encourages them to stick with QuickBooks as their bookkeeping choice.

Human problem our customers were facing: was on an aging tech stack and had not seen any UX love in years. Searching for the right integration was a crapshoot, and browsing the site left the user without clear indications of what they should choose. To add insult to injury, the entire site was significantly mobile un-friendly both to the user, but also to Google's search algorithm which was penalizing it for its lack of mobile usage.

At the time, received a staggering amount of traffic was responsible for a significant impact on QuickBooks bottom-line, but lost most of its visitors to bounces and exits without taking action.

The property was underperforming and dragging the ecosystem down. Something had to be done.

QuickBooks Apps Marketplace as received by me and the team in 2017

Business objective: Maintain's SEO prominence, develop a scalable and malleable platform, and increase its effectiveness of connecting customers to beneficial integrations.

This project's primary customer: Small business owners who need to extend the capabilities of their business with QuickBooks and other business tools working together.

The ask: Replatform on a modern tech stack that would tap into the rest of the ecosystem's capabilities, create a mobile-first responsive strategy (code, design, and experience) to maintain SEO placement, and improve the entire customer experience to allow more customers to connect to the integrations they need.

My role: Design strategist and principal designer
Team: Developer Platform, App Marketplace
Status: launched
Problem definition and research

Getting crisp on hurdles, both technical and experiential in nature was determined to be a complete reboot, meaning we had a clean slate, but also ran the risk of repeating the mistakes of the past if we did not learn from them.

The pragmatic technical hurdles to learn from

One "must do" aspect of this replatform was the SEO penalty by Google's algorithm for being unfriendly to mobile users. The entire property had no mobile features, no responsive features, and the CSS/HTML was generated by an abandoned stack that was unsalvageable.

The path forward chosen by the engineering team was to build on a new stack from scratch, keeping the business logic but abandoning the unsupported legacy code. A breath of fresh air because now, we could build the mobile-first, responsive capabilities correctly from the start.

As the most experienced design technologist in the organization, I wanted to offer all the help I could to the engineering team to make sure we baked in what we needed.

The pragmatic user experience hurdles to learn from

There was no customer research or design documentation available on usage, and no personas or "Jobs to be Done" to rely on. We had historic knowledge and assumptions, which meant our task was to establish and validate who the customer was and their needs.

Establishing the current state of customer expectations and experiences

The baseline understanding of was that it was used by three customer types

  1. Small business owners looking for integrations to help their work
  2. Accountants looking for integrations to help their practice
  3. Developers looking for marketplace platforms to build their integrations
Presumptive personas based on historic knowledge as part of kickoff baseline presentation

Establishing a new understanding of customer and Job to be Done

Research interviews were conducted with a variety of the presumptive personas, taking the needs, pains, and Jobs to be Done from each and blending into a combined outlook on what the new iteration needs to do.

The core "job" of our customer was summarized as "I am trying to reduce the time needed performing the administrative tasks of my business so I can focus my energy on growth and making more money." The customer does not want to be finding integrations, they want more time.

With that, the research allowed us to arrive on three core experience principles:

  1. The marketplace should do its best to surface relevant apps using available customer data if they are a QuickBooks user already.
  2. Looking for solutions is an ad-hoc experience prone to mobile experiences.
  3. Search and browse fulfill two different motivations and should be optimized for a user who had an idea of what they want (search) or needs to see related information to narrow down (browse).

Competitive analysis of the state of app marketplaces

An evaluation of direct competitors and similar experiences was done, looking for patterns and inspiration. Cursory UX audits of parallel marketplaces were conducted to note what external practices could be adopted and fell within Intuit's expectations for a good customer experience.

Mural showing a breadth of similar or tangential marketplace experiences to learn from.

Moving forward with solid assumptions

With principles, a baseline Job to be Done, and a snapshot of the state of app & integration marketplaces, we were ready to move to the 2-pronged design and develop parallel phase.

Highlighted skills
Wireframing, concepting, protoyping

Designing with pixels and code in parallel

The design path for consisted of a loop that went:

  1. Create quick wireframe concepts based on research learnings and the QuickBooks Design System patterns
  2. Test mobile-first and responsiveness in live prototype
  3. Narrow on concepts via design review and/or user validation
  4. Increase fidelity of mockups and code and repeat

The amount of concepts for the key touchpoint on went very broad at first, then narrowed through review and testing. Our mindset was "perfect is the enemy of good" as we surged forward toward an MVP launch.

A pair-designer effort of tight iterations between design and code

The task redesigning was large, and there were two product designers working on it as a team; myself and another Senior Product Designer who was hired new to the company for this work.

We worked on the tasks in tandem, trading files and swapping back and forth. When an approach felt 80% stable, I would adapt the html/css prototype to match. Pair-designing and code-prototyping is a wonderfully fast and efficient way to get work done.

Mobile wireframing exploring research-based concepts
Desktop wireframing exploring the research concepts

Adding the design system and patterns

QuickBooks has a mature design system, and as we narrowed, these patterns were added to higher fidelity mockups, as well as to the prototype (as seen in the next section).

Designs were rapidly tested with users to validate their effectiveness, both over video calls as well as asynchronously with Concepts that had obvious shortcomings were dismissed in design review, and high-potential concepts validated rapidly with users.

Iterations using the QuickBooks Design System
Explorations that deviated from the "app card" model

Exploring alternative approaches

One set of explorations which was discarded was a story-based approach where instead of focusing on the breadth of apps, we would focus on the industry and story of the small businesses.

Ultimately this did not align with the principles of finding the right app quickly, but remains as a solid exploration of an alternative way to introduce apps to the QuickBooks user.

Story-based alternative approach

The individual "app details" page

One of the most critical pages was the individual "app details" page, where each developer entered the information, video, and screenshots of their app. As this was a template page that would be different for each app, many revisions were tested to ensure edge-cases were not left out.

The same process of wireframe, code, validate, and progress fidelity was followed.

Creating a baseline app details page to test and prototype in the html/css prototype (seen in next section)
Mobile and desktop explorations of the app details page
Edge-case variants designing for important but low-volume design scenarios

Validate, then validate again

With working code, could also be used to validate the resonance of if what we were doing was working. experiments to validate design decisions along the way

The design-thinking produce of UX continued as we neared the launch of our MVP, while at the same time the mobile-first responsive prototype progressed alongside, serving both designer and developer.

Highlighted skills
Prototyping, mobile-first, responsive

Iteratively building a working html/SCSS copy of our designs from the start

As a special mission for this project, I took on the role of parallel Principal Design Technologist and developed the mobile-first responsive CSS and HTML for the project (in SCSS using a modified Bootstrap grid as a base).

I built a working prototype on the code that translated design-to-browser, ensured proper front-end development, and educated the engineering partners on the "how" and "why" of building mobile-first. This allowed the developers to start their React.js components right away without needing final visuals.

The production-ready scaffolding of HTML and CSS (as .pug and .scss)

I was able to test the rough ideas for layout decisions and mobile responsiveness right in the browser and hand it over to engineering. The iterative prototype looked like this:

QuickBooks base branding CSS applied to "wireframe":
Sketch mockup visual styles applied to working prototype
Testing the interaction "kitchen sink" for the app details page

This process involved me performing the following steps:

  1. Creating the base SCSS package and responsive grid
  2. Blocking out the basic site components and applying the mobile-first SCSS
  3. Delivering the scaffolding to engineering directly in the code repository
  4. Progress the prototype to match the designs and make pull-requests to engineers
  5. Iterate as designs, prototype, and live site reached final parity

Throughout the process, I was also teaching the engineers unfamiliar with mobile-first development, responsive grids, and SCSS how to embrace these practices and apply them in their work.

BONUS: Turning the mobile-first responsive grid into a company-wide package

This approach and code packageevolved to become and Intuit standard and was turned into the central code package for use across the company, which I talk about in this portfolio case-study.

Highlighted skills
Launch and learn

A net-new platform and one of QuickBooks' first mobile-first responsive properties was re-launched using our deeply researched designs, mobile-first & responsive designs and code, and a whole new approach to the marketplace experience on a 20-year old property. is live and has met all of its performance expectations, and continues to be a showcase example of QuickBooks design, mobile-first awareness, and design+code collaboration.

Current live desktop and mobile view of
Left: New app details page. Right: New category page
Live individual app details page on lives on as a key Intuit property, and while I am no longer the designer for it, I enjoy watching it succeed and grow as a highlight of everyone who worked on it.

Highlighted skills

Reflections & learnings

Redesigning and replatforming was an enormous undertaking that would not have been possible without the excellent collaborative efforts between all involved.

This project further reinforced my belief in pair-design and pair-programming, both of which were instrumental in delivering a the rate and quality we delivered. Having a design partner on the UX and visual side, and also having a programming parter on the development side, was a stretch of good-fortune I don't often see.

One unplanned benefit that came out of this project was the development of the Intuit Responsive Grid package, which I talk about here. With the help of eager and collaborative developer partners, we took what we built for, made it generic and reusable, and made it available to the entire company. That sort of impact doesn't happen often.

Overall, the project outcomes are a highlight of my time at Intuit and exemplify the type of comprehensive design process I continue to evangelize and use.