Making a reusable code package based on the success of the Apps.com grid

In the Apps.com 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.

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.

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

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.

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

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.

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...

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.

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.

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.