New Year, New Look: Introducing Intuit’s Harmony Toolkit Intuit Developer Community Blog

I think some executives can think of like in unearned revenue just seem like, “Okay, cool. So, you work on this for a couple months, and then we’re done, and it’s all good? Awesome.” I think it is important to set that expectation of like, “No, we have a milestone we’re going to hit, and you’re going to see some success from that.

I was talking to Nathan Curtis yesterday, and we were talking about this same kind of concept. Keep your existing QuickBooks Online “classic” companies, because it’ll be a while before your your existing QuickBooks Online customers will be migrated to the “harmony” experience. I think the answer would be, “What problems does your organization or your product have that you feel like a design system could provide a solution for? Especially, can you explain that to executives and stakeholders, and even quantify that problem, sometimes you need to, down to a dollar amount, or a time amount, or some sort of customer experience metric or whatever? Then, based upon that, I would decide what is the design system that we need that fits our org, that fits the problem we’re trying to solve for our org. QuickBooks in and of itself has a whole bunch of products under it, and QuickBooks … Just to give you an idea of scale, the small business group or the QuickBooks group has 170 designers in it.

Do more with QuickBooks

Then, the next level is it’s actually being used by customers and they like it. Those are the KPI or the success metrics that we’re working with right now. Then, over time, you’ll start to narrow down your focus and iterate on particular past. This is where we also might start prototyping it in code, putting it possibly in front of customers again in code, and then final process is the same group basically approves it. We do have approvers … or Leslie Witt from SVP and Kurt Walecki from TurboTax. The QuickBooks side of the house already had a design systems team, which I came into, and so that consisted of four designers.

But then, this thing keeps going.” Setting that expectation early is crucial. There are pretty easy matrix you can make in terms of cost benefit ratios about adopting the design system, and you can make tradeoffs about what are the elements of the system that you need to be aware, and so we did a lot of that. In terms of … We also identified like who are influencers amongst each of the product groups and made sure that they had a hand in helping not only gather use cases, but helping review the design proposals that were coming through, so that they felt like their voice is heard. Secondly, once Intuit design system takes on an initiative, we’ll basically have that person write a proposal. And then we’ll actually turn that into just this document.

I’ve been with Intuit for a little over a year and three months now. Before that, I was partner at an Enterprise UX agency where I did mostly enterprise software design. Apps add more features and functionality to your QuickBooks to help you run your business. Eliminate tedious, manual data entry by integrating apps you already use.

Webinar Recording: Sandbox, Harmony, and You

Like a product, you need to have a roadmap, and you need to almost have a product manager to it, and you can have … By what sprint do you want to have X? That could be like a nice milestone. Say, “Look at what we did in this time.” But then, soon or after, you have to set the expectations like, “But hey, now this thing doesn’t stop. There’s another milestone and another milestone.” Even on the stuff we just did, this is a living design system, so if we learn new information that improves upon that, we’re going to change it. My advice would primarily to be understand what’s the problem.

Finally, check out the Downloads & Tools section, where we have layered .psd files of all our common elements. Use these to mock up your screens and make quick prototypes. Read this QuickBooks Online “harmony” Preview blog post from QuickBooks expert, Charlie Russell. As you can imagine, this is going to affect you, and your customers.

How many people are on the design systems team now at Intuit?

Sync data from popular apps like QuickBooks Time, Shopify, PayPal, and many others. Payroll, benefits and HR built for small businesses. Join thousands of companies and optimize your design process with UXPin.

• How about we sit down with one of your front-end developers and give us a couple days, and we’ll just crank this out?
• Creating a roadmap for enabling developers to integrate their solutions into the QuickBooks Online user experience.
• ” Hopefully, that’s backed by some customer or some business benefit, so I think as funny as it sounds, I think it is crucial to at least upfront spend a little bit of time defining that stuff.
• There’s another equivalent for TurboTax, Mint, and ProConnect.
• We should be, let’s say, story completion time that it took us to build that component, but now we’re taking it to the max level, and we’re actually looking at how many instances of that component are being used in the product and where, and we’re also starting to look at how much traffic, how much customer traffic is actually going through that component.

We used at least the starting phases of Intuit design system as a way to prove we can roll out a whole new brand in a fraction of the time that it would have taken us before, and that was a big sort of proof point I think. We started really doing the brand work I’d say about July of last year, and we rolled it out across at least all of our online products, a couple of our mobile products, and then our web or marketing products. I think it depends on the element that we’re using, but let’s say like a UI component gets introduced. What we’re starting to measure now is the number of contributions to that UI component.

How did you structure out your design systems team?

How about we sit down with one of your front-end developers and give us a couple days, and we’ll just crank this out? ” That makes the conversation go a lot easier. Then, we also had to embed and pair programmers and designers with each product team. It’s amazing what happens when … If you just ask an engineer for an estimate based on a red line spec, you get a very high estimate.

When I came in, there was a … If we just take, let’s say, our web products, there was a variety of JavaScript-based UI component libraries out there. JQuery, a little Bootstrap over here. Another initiative I was part of was essentially looking at re-platforming the web technology into something more modern. We had another team on angular as an example. That was also where we looked at … We borrowed from the salesforce lightning tokens, design tokens idea of, “We could at least develop like a CSS framework or a set of CSS variables.” We can even transpose or transform those variables into like whatever syntax or format we want, so that helped become this bridge between the design system and the disparate at technology. Then, each of the business units have assigned representatives that really drive the initiatives forward.

Meaning, like we pre-cache everything. All the components are responsive, even adaptive, and the user doesn’t really know that it’s actually web, which is … It’s funny. Like in my old job, that has been tried so many different ways by so many different companies that when I heard that, I’m like, “This is a terrible idea.” But then, we actually pulled it off where it’s actually pretty seamless. The central team really acts as…making sure the work scales for the ecosystem, making sure the documentation is tight, and then making sure that the information is served, collected centrally, and disseminated out to all the teams. I love a new challenge, and I think the stars aligned for me somewhat in that I was walking into a design system that already had some legs underneath it, but there’s a good and a bad to that too. There are some legacy issues with the design system that I also inherited too.

Intuit Practice Management

We have a saying around our company a lot which is, “Don’t fall in love with the solution. Fall in love with the problem,” because solutions are always going to change, but I think … and understanding what is the problem that the design system solves for your company would be what I would spend a lot of time on, and making sure you’re really clear on that, and making sure you can communicate that to other people. We really liked the lightning team had built just for internal testing or internal monitoring of how people are using stuff. We’ve been looking to build not exactly like they’re doing, but had some similar concepts. Separately, we did arrive at using the React for our UI components, so we built our UI components using React, ES6 syntax. Then, separately, we’re looking to do similar with native mobile components, and so we’ve got some competing technologies at play.

You can just do like the mini Bootstrap library. It’s plenty fine for most start-ups and most small companies. The other things we’re doing are adding like continuous integration, so some CICD stuff where we’ve got linkers, we’ve got automated functional tests both locally like an automated unit test, and then we fire off a more significant set of functional tests, functional automated tests the minute you try to submit a poor request, so we’re trying to like tighten up our CICD of our library. Right now, we made really good progress.

That really I think is the crucial piece to making it work, and that’s really … to use another Nathan courtesy dimple. That’s really having a small central team to help drive initiatives. Then, really having a delegated model where there’s a whole wide variety of stakeholders that give you that diversity of thought that you need. To be honest, I think that was actually the more crucial piece to design system. In terms of future-proofing a design system, that’s a great question, and it’s probably my biggest concern always.

In the meantime, here’s a primer on what it’s all about and how it can benefit you, your app, and your customers. About 12 weeks ago, at Scaling New Heights, during our developer tech track, we introduced you to the concept of “harmony”. For those of you that were not at our developer track, “harmony” is essentially the unification of our Intuit product experiences. Across products, platforms, and devices.

The Python OAuth client provides a set of methods that make it easier to work with Intuit’s OAuth and OpenID implementation. Dotnet component that enables us to structure asynchronous tasks in a Hierarchy. That calculates overall progress, allows caller to start the execution of child tasks in concurrent or serial fashion. Or, if you are more of a hands on person, you can give the new “harmonized” QuickBooks Online a test drive yourself.

• Design systems can become dated or they can become irrelevant to companies for a variety of reasons, and so part of what I found interesting and challenging was how to make it more relevant and how to make it solve problems that the company was having now when I joined, which were different from when the problems it was trying to solve when they started Harmony.
• If I were to add in all the contributors though, then we’re probably getting up until like 30 or 40 people, but a lot of those people are just brought in part-time capacity to drive through whatever initiative we’re working on at the time.
• But then, this thing keeps going.” Setting that expectation early is crucial.
• Here is where you’ll find guidance, information and resources for creating delightful experiences.

We’ve been using the toolkit for over a year internally, and now we’ve opened it up to you, because we believe that partnering with folks who develop apps that work in the ecosystem is essential to build this awesome, harmonious experience that our customers love. Maybe at the hands of QuickBooks and TurboTax, but that’s okay because we know that if one of us gets better, we all get better, so I think that’s the other thing we’re looking forward towards is, is everyone contributing their own little special areas that they’ve spent a lot of time focusing on? Like TurboTax, those guys have been through the wringer as far as like usability testing with customers and all sorts of stuff.

We’re still in the early stages of that. We’re building basically a toolkit or a source of the truth for Intuit design systems, starting with components and those sort of foundational visual language elements. Whereas on QuickBooks Harmony side, we’ve actually had a site, a source of truth for a long time, so we’re taking all our learnings from Harmony, and we actually have a new site, design.quickbooks.com. We’re taking all those learnings and applying them now at an Intuit-wide level. Dos and don’ts are another great way to show more example-based guidelines in terms of where you’d be prescriptive.

The design system isn’t fully adopted across all the products to the same level. When we looked across that landscape, it was very disparate and very all over the place, and so the company’s mindset had shifted to thinking about really the product only being the core tenant of the experience to looking more holistically at that, what we call the “end-to-end experience,” so that was one change. I actually knew Suzanne Pellican because she had spoke at some meet-ups that I run for client and Enterprise UX meet-ups, and I was always really impressed with her, and I had always thought of Intuit as a design-driven company.

Whereas all of Intuit has, I think, 200-something, so over two-thirds of at least the design support we have to offer is just for QuickBooks because there’s QuickBooks Self-Employed, QuickBooks, QuickBooks Accounting. We probably have eight or nine people 100% dedicated to design systems. If I were to add in all the contributors though, then we’re probably getting up until like 30 or 40 people, but a lot of those people are just brought in part-time capacity to drive through whatever initiative we’re working on at the time. One of the first things we wanted to get right was making sure we’re taking more of a bottom-up approach in terms of not only what gets proposed to be added to the system, but then also, how decisions get made and then how decisions get disseminated.