Intuit Responsive Grid

Our first mobile-first responsive grid system, made in SCSS

  • Design technology
  • Content design
  • Evangelism and education

Challenge: Intuit had placed an emphasis on mobile-first, responsive design, but most engineers did not know how to implement the designs given to them, and no reusable code existed to make it easy.

Hypothesis: If a mobile-first, responsive code package and training materials were provided upfront, designs could be implemented in a consistent, repeatable way that reflects the modern state of browser-based products.


Context: Intuit and the QuickBooks organization had mandated that all designs be made mobile-first and have responsive breakpoint artboards. This mandate had been declared multiple times over the years, but never got traction.

Problem our customers were facing: The customer (Intuit designers and front end developers) were asked to design and code this way, but there was no resource to train those who did not know how to implement designs given to them with responsive breakpoints, and many designers were not familiar with the conventions of multi-breakpoint design in Sketch or Figma.

Business objective: To create a reusable code package that would build-in everything needed to implement mobile-first responsive designs, and the education needed to bring designers and developers up to speed.

This project's primary customer: The QuickBooks product design and development organization.

Role: Strategist, design technologist
Team: Developer Platform, QuickBooks core, Intuit Central Technology
Status: implemented
Coding and development

Making a reusable code package based on the success of the grid

In the portfolio piece, I talked about how a mobile-first responsive grid was needed for that site. Due to the success of the implementation, the code was stripped out, made generic, and refined into a drop-in code package that could be used in any project.

Writing good documentation

This turned into something of an internal "open source" project that had to be treated like any other open-source project. A GitHub repository was made with documentation, examples code, and a working demo.

For the written documentation, I had to approach this knowing that some people would be entirely unfamiliar with how a grid like this works. The language and examples are meant to be understood by both newcomers and those familiar with the system and just need specifics.

Documentation intro
Documentation continued

For the more experienced, a QuickStart guide and inline comment documentation was included. Many developers chose this route and were instantly able to start, as they knew what to do but had never been provided a company-wide platform to imlement.

QuickStart guide and easy-set preferences

And for the real aficionado, all code had plentiful commenting and explanation throughout, both for implementation but also for maintenance by future owners.

A extensively customized SCSS grid framework originating from the Bootstrap 4 theory of grid implementation
Highlighted skills
Template and pattern creation

Making the reusable design assets in Sketch

Code was only one half of the equation. With the package deployed and tested, designers needed their resource. Intuit used Sketch at the time (before switching to Figma), and a pixel-perfect set of artboards and design documentation was needed.

As the grid has 8 breakpoints, we needed 16 artboards. 8 for a centered design, and 8 for the QuickBooks template which had a left-aligned sidebar. Designs didn't need to have 16 versions, but we wanted a grid that covered all known and future use cases.

The sixteen artboards

In addition to the template artboards, annotated examples were included for viewing from within Sketch for easy reference, measurement, and copy-paste.

Sketch grid documentation
Sketch grid documentation

Including working demos

One more aspect of the resources was the working demos available on the corporate network, which showed how the grid responded and moved. This was both a troubleshooting and education tool, as many designers had never seen how their designs would "react" when taken off the static Sketch artboard.

Highlighted skills
Education and evangelism

Creating the mobile-first responsive roadshow for QuickBooks designers

The last piece to this puzzle was the excitement and evangelism phase. Even with the code and templates made, I still needed to get people to want to use it. For this, I teamed up with designers from the QuickBooks Core team to create a learning roadshow we presented to each product business unit.

Establishing the need and giving the data was first...

Slide helping inspire empathy with our organization and user

Then, the concept of why mobile first design AND code was important. This is something that most designers and developers familiar with responsive design did not understand. They knew how it worked, but not the importance of the context of why.

These slides always got a chuckle from the audience as they finally saw the rationale.

Designing AND coding mobile first illustrated with overflowing screens.

The other aspect was to tie this into the writing of the CSS the developers would have to do based on the artboards. This slide was typically the first time a designer had ever been exposed to the concept of cascading mobile-first CSS, and it was usually a huge lightbulb moment.

The sequence of how the code is written matters

And finally, showing the application in several different examples inside of QuickBooks brought the education home, and showed in-situation use that told the story of how our old, non-responsive designs would come to live in the new world.

Slides showing how common elements would appear at different breakpoints
Highlighted skills

Reflections & learnings

This project was a labor of love born out of necessity. What started as something a small group of people needed to launch turned into the official Intuit grid package.

One thing I learned was the importance of creating not just documentation on how to use the platform, but also why to use it, and most of all, the context of why to use it (which is different!).

Helping people understand the journey that the thousands and thousands of designers and developers have gone on over the last decade to bring mature CSS-based grid systems to life is important. Each decision has a well-reasoned context that is almost never included. By bringing that context light, I was able to help people use and implement the grid not because they had to, but because they wanted to.