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.

So we want to keep you in the loop with the latest information regarding these exciting changes. As well as, provide some heads up on things you should do on your end to prepare. Get tips on hiring, onboarding, and structuring a design team with insights from DesignOps leaders. First of all, we align all of our roadmaps, and we make sure that the design system hopefully is going to provide solutions that we need by X amount of time. That was crucial to get right because before I got to the company, there had been central top-down-driven initiatives to try to get all the brands to adhere or be cohesive, and those initiatives from my understanding had failed just from the standpoint that they were top-down-driven.

I think some executives can think of like in design 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.

Since you’ve started working at the design system, have you seen changes or improvements to the product development process?

We have a saying around our debits and credits 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.

• Another initiative I was part of was essentially looking at re-platforming the web technology into something more modern.
• It can be a whole range of things, and the delivery … so the artifacts of delivery also can range quite a bit.
• Let us know what you think of it in the comments section below, and join our webinar next week to learn more.
• 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?
• Plug into apps you already use for seamless integration.

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.

How did the problems faced by the design systems team change over time?

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. To find out, we spoke with Joe Preston, Director of Design Systems and Engineering at Intuit. Co-founder of the enterprise UX consultancy Momentum Labs, he joined the Intuit team in 2016 to help them scale their design system across all products.

The way they build their UIs is really progressive, and so they can bring a set of expertise to the table that we can all benefit from and vice versa. QuickBooks too has been doing some really interesting stuff in terms of … The new sort of text stack we’re moving with is something that the whole company actually really likes that new text stack. I think those are what we’re seeing now on the horizon as a big value add that the system can bring to the company. Then, the other thing is there are some business units that don’t have a design system, don’t have a team, don’t have resources, and for them, it’s nice to get a whole bunch of stuff that’s highly involved and been tested essentially for free. If you do believe that your job as a design system is really to enable the products to do the best work that they can and to support them, but not to be the determinant factor of what gets released in products. To be honest, we’re still in the midst of it.

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.

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.

Webinar Recording: Sandbox, Harmony, and You

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.

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.

I think that’s really the key skillsets of design system folks because you’re the connective tissues with all these different people, and so it’s those social and the soft skills that come in the most handy more than I think technical skills, and that’s hard. When people come on my team, it’s like I know they just want to put the headphones and start cranking away a sketch, but it’s like unfortunately, you’re in a lot of meetings because you’re having to influence people or you … The other part of it is you have to see the breadth of what teams are designing in order to have those conversations in order to figure out like, “Oh, wow. That’s a new emerging pattern that we’re seeing happening right now. That is a really nice addition.” You have to be there and talk to those people to be able to experience that. The other 30% of my time, I’m trying to dedicate to the Intuit design system and make it more over time. Another change was that mobile became more of a focus.

Run your business with 3rd party software that works with QuickBooks

It could be … We added a new color to our color palette because we realized that we’re having some accessibility issues with one of our colors in particular. It can be a whole range of things, and the delivery … so the artifacts of delivery also can range quite a bit. Then, when we became more involved with Intuit design system, what we decided is there needs to be a central team to drive this, so at the Intuit central or group, we hired a small team, and that was a designer, a developer, and a program manager since they like … That person acts basically like a product manager. Coming out of an agency where all I felt like I was constantly selling even really large clients like in Intuit on how to build, and design, and even ship your product, but really not having experience that from a large software company perspective, so that was really what I was looking for in my career. Then, the small business group, basically QuickBooks side of Intuit, had had a design system working for a while known as “Harmony,” and so I took over when I started for the previous person that was managing Harmony, and it was just an interesting … I just found it an interesting challenge. We’re looking forward to talking with you in detail about the Harmony Design System next week Tuesday, January 13, during Intuit Developer’s monthly webinar.

• UXPin is a product design platform used by the best designers on the planet.
• Or, if you are more of a hands on person, you can give the new “harmonized” QuickBooks Online a test drive yourself.
• Once I find out how, I’ll post a follow up here.

That can be really frustrating to people because most of the design systems are not on the bleeding edge of innovation. Brad Frost actually had a great article about this recently called like “The best design systems are like the really boring ones,” and there’s some truth to that. Like it depends on what the artifact of the system is and how we would measure success, but we’re definitely … Velocity is huge to us, and then also making sure that what we put out is being contributed to a lot, and then is being adopted by teams a lot.

Whereas when you sit down with them, and you open up the IDE, and you start changing the code, boy, it was a lot faster than anyone expected. When we looked at it, we said, “Hey, look. We’re not on the same technology stack, so what can we develop that will help accelerate adoption and help with cohesiveness or dare I say consistency, which was a CSS framework? First, I brought in two contract front-end developers to work with the design system team, and then we actually built out a design engineering team that works in parallel with design systems. That way, we could really have a nice blend of designers and developers, but again, we were still operating mainly under QuickBooks with that model. Arriving at a process, and a contribution model, and a decision-making framework that we could scale, especially where all the businesses of Intuit felt like they had ownership, felt like they had a sense of the design system is by the people, for the people.

How do you measure the success of a design system? Are there like certain metrics that you’re looking at?

Layouts displays all of the different content containers, and the different ways we put them together. This can help you determine how to best layout your screens. Many patterns, like buttons, help you decide which element works best in each situation. The guidelines in each pattern help as you figure out important tasks and content.

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.

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. Essentially, if we don’t have component code yet, then we would start production, but a lot of these things will finish with a code component, but it could be other things. It could be adding styling variables to our CSS framework.

QuickBooks Enterprise

Create invoices, take photos of receipts or see your company’s activities from the QuickBooks mobile app anytime, anywhere. We hope the toolkit gives you valuable insight into how to build with us, and help us all create a cohesive operating system! Let us know what you think of it in the comments section below, and join our webinar next week to learn more. Creating a roadmap for enabling developers to integrate their solutions into the QuickBooks Online user experience.

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.

Income, expenses, outstanding invoices, and other key business financials are on view as soon as you sign in. Instantly see how your business is performing. With a single click you can quickly see your profit & loss, balance sheet, and dozens of other reports.

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.