Keep an eye on your inbox!
Hmm, that didn't work. Try again?

Webflow at Work with Intuit's Nathan Bailey

Find out how Intuit's Nathan Bailey uses Webflow to build design style guides, and get insights on his processes for design ideation and collaboration.

John Moore Williams
November 17, 2016
Inspiration

Intuit's goal is to simplify the business of life. So it's no surprise that they're a leader in user-centered design, with robust guidelines for building harmonious user interfaces across a wide variety of products tailored for distinct users. As a member of Intuit's Design System team, Nathan plays a key role in not only defining those guidelines, but also in helping his designer colleagues identify, ideate, and iterate on new experiences.

So when I heard Nathan was a Webflow fan, I couldn't wait to get him on the phone for this interview.

So how did you get into graphic design?

I’ve been doing what you might call graphic design since I was two years old. When my brother was born, my mom was busy, so I would just sit in my room for hours and draw stuff. But obviously, I had no concept of art. I would always say, "I'm making something."

And as it turns out, in today's language, I was doing "rapid prototypes," because I would create these paper objects. I had paper, and tape, and scissors in abundance. So I would make 3D physical things, or I'd draw pictures of them. So I started with that and going through school, I was always known as the "guy who can draw," you know?

And then around age 15 or 16, I started a business with my brother. I designed the logo and business cards and all that stuff for our business. So I was my first client.

That's a good way to start. You always know what you're looking for!

Yeah, you're a good client to work with. The business was called Laser Services Incorporated. We really liked lasers, so ...

Sure. What growing young boy doesn’t?

Basically, it was a business where we would take printer cartridges from our clients — because normally, they would just throw them away — and make them reusable. So we were able to provide this usable ink cartridge for half the price that they would pay for a new one.

Right, early sustainable business! What was your next step?

Then I went and got a degree in advertising design — well, actually, that was my degree path. I ended up getting a full-time job in the software industry about halfway through college. And I was having to wrap up the degree and move on because I already had a job.

Because I’d taken some college-level fine art classes in high school, it just turned out that I had enough credits to get a fine art degree. I didn't have enough quite in advertising design, and there was a required course for advertising that was only offered every two years. So I said, "You know what, I'll just take the art degree and go with it."

So what are a few places where you've worked and what have been your specialties over the years?

My first job was in the screen printing industry, then I got into software. My first software job was in computer-based training. So I helped create visual content and user interface design.

From there, I worked at a traditional advertising agency for a while. And then just around the dot-com boom, I got a job as an art director in a global digital agency with about 2,000 employees.

Then I decided to go off on my own. So I was a freelancer for a few years and that evolved into me and my brother starting a design studio, Evil Twin Brother.

The website for the Bailey brothers' agency, aptly named Evil Twin Brother.

We did that for roughly 7 years, and we eventually grew to about six or seven people. We created a lot of video game mini-sites and consumer electronic stuff. A lot of work for Samsung. Like the sizzle reels when they come out with a new device and they got the commercial where it's spinning and... well, you know.

From there, I decided to get back into a group and really learn UX a lot more. Intuit had been a client for a couple years, and about two years ago, they brought me on board full-time.

Why did you go freelance and then back to the in-house world?

I've always been entrepreneurial and I've always liked to do my own thing. So going freelance, then founding the agency was all about flexibility: being able to make our own path, determine what kinds of clients we wanted to work with, etc.

As to going back into a company, one of the reasons was just the resources a company like Intuit has. Instead of just working with product designers, I interact with dozens of designers here, and I can learn something from all of them.

Plus, Intuit is very heavily focused on user experience, which was just becoming a growing field. I felt that if I could get in with a company that already had a very established practice, then I could advance faster than I could with my little studio.

You’ve said that you love to condense and focus the output of creative groups. I feel like that’s not that common for creative types.

Yeah, that's kind of evolved for me out of necessity. You know, when it comes down to delivering something, at some point, we have to narrow to one idea and move forward with it.

There's so many talented people here at Intuit that there's never a shortage of brilliant ideas. But where I found my niche here is in helping the group narrow down to an idea, and not being afraid to fail.

I would rather quickly narrow to one thing, try it, see it fail, learn from it, and then try something else than stay in the space of ideation without really executing.

What do you specialize in at Intuit?

I'm part of a few teams at Intuit. Here in Plano, Texas, I'm a visual designer in the experience design group for ProConnect, the tax professional segment of Intuit. I work to establish visual design standards and components that the experience designers can use in their work.

I also work with product development and review their work to make sure it matches our designs.

And then I'm a part of another team called the Intuit Design System, which aims to provide a system that unites the whole suite of products. There's a lot of variation in the experience and the visual components across that suite. So it's an effort that we've just started in the last couple of months to systematically align core elements. So if you're an Intuit customer using TurboTax and you decide you're going to start using QuickBooks, it will feel familiar to you, while still preserving the brand identity of each product.

There's also a subgroup of that, the Intuit Consumer Design System, focused on the consumer segment: Mint and TurboTax, primarily.

And then I'm also a part of the Innovation Catalyst Group. It's a group that the founder Scott Cook started, focused on facilitating problem solving. Through this group, I'll facilitate hour-long sessions where we'll identify a customer, identify a customer problem, and create a vision statement. Or we’ll generate ideas for solutions, rank those solutions, and then narrow into an experiment based on one of those solutions that we can test with the customer.

So what are the biggest challenges you face in your role?

Some of the challenges are around what I was talking about before: narrowing in on an idea. There's a lot of complexity in our work. Getting people to align on something is like wrangling this massive cloud of ideas into something cohesive and concrete.

For example, yesterday, I was working with a group and we were ideating and wordsmithing around some “leap-of-faith assumptions.” (Basically, an assumption we're making that, if proved false, makes the whole thing fall apart.)

So we're ideating around that and we had a stack of sticky notes of all these different ways to phrase it. And I end up being the one to drive us toward a single solution. So I wrote down what I thought was an aggregate of everyone’s concepts, and helped us land on something specific to try.

So it's great. I love that there's so many great ideas here. It makes it easy for me to do what's  kind of become my job: narrowing. And I like to do it in a way that's always permission-based. I never try to sell people on anything, I just make suggestions. And if people go for it, then great. If not, then I'll make another suggestion. That's just kind of how I like to work. 

I could probably learn something from you on that. Do you have any rules of thumb you apply when you're going through that process of narrowing down?

Yeah, great question. We've got a few tricks. Like, let's say we've got this multitude of ideas, the first thing I'll try to do is group similar ideas.

A lot of times, ideas are just a little bit different from each other. So we'll inventory those ideas and come up with themes. That narrows things down a little bit, so out of 100 ideas, we now have maybe 10 categories, or themes.

From that point, we'll do exercises like dot voting, where everyone in the group gets three dots they can use like votes to help us identify the most popular ideas.

Often, we’ll use a two-by-two grid to facilitate decision-making. So let’s say we’re trying to identify which of a group of ideas we want to test. So we'll chart out two qualities along a spectrum. For example, "very known" and "very risky," or "not important" and "extremely important." And then we’ll place our ideas within that grid to identify which idea is most risky, and most important, then test that.

Decision-grid.png
Visualizing ideas along a spectrum of importance and riskiness helps the team home in on the right concepts.

I think what I don't do, which has become kind of the default in a lot of groups, is group brainstorming.

Free ebook: Web design 101

Master the fundamental concepts of web design, including typography, color theory, visual design, and so much more.

Read now
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Oh yeah, I hate brainstorming.

Because a lot of times, it just becomes a group discussion where the loudest person wins. So I try to avoid that. When that starts, a lot of times I'll just say, "Okay, let's take three minutes and write down your ideas quietly on a sticky note and put them on the board.” And then we'll do some of the exercises we were just talking about, like dot voting or the two-by-two grid.

Are there a lot of people who use Webflow at Intuit?

There's a handful of people who use it right now. But I’m promoting it, and hopefully I'll demonstrate enough value to other designers to where they'll get interested in using it as well.

So what made you go, "Oh, damn, I need to try to work Webflow into my process?"

Well, it started with Bobby Bray Jr. He'd created some brand guidelines for Intuit and he used Webflow and I just saw the “webflow” part of the URL. So I asked, "Oh, what's Webflow?" So I looked it up, asked him some more about it, and then I started using it in some brand product guidelines.

Two things really attracted me to Webflow: 

  1. It's structured like code. It doesn’t feel like another WYSIWYG — more just a different way to code.
  2. The speed with which I can go from zero to a website that's live on the internet. That I can just link people to, and people can see in no time. That was a game changer for me.
Bobby Bray Jr's fantastic made-in-Webflow portfolio.

What did your design process look like before you started using Webflow?

At Intuit, we don’t really have a consistent workflow in documenting design. That’s actually something I’m figuring out as I’m starting to collaborate with some of the other teams here. Until recently, business units acted like separate companies, but now we are starting to collaborate more and the story of our workflow is very much still unfolding.

My current steps go something like this:

  1. Audit current experience
  2. Note opportunities to improve
  3. Document patterns that are working (Sketch, Webflow, code)
  4. Share existing patterns with designers (post updates on Slack, Craft library)
  5. Address design opportunities: design/prototype/test
  6. Document new patterns
  7. Repeat

At what stage in the design process do you jump into Webflow?

Lately, I've been experimenting with designing in Webflow. Well, my design process evolved from using primarily vectors in Photoshop to using Sketch, and I still use Sketch a ton. But I've experimented with just designing in Webflow. I have a side project that I'm doing on my own time. And I've built this prototype in Webflow instead of using InVision. So the interaction is a lot richer.

In some ways, it’s faster to design in Webflow than designing something in detail in Sketch and then going to prototype. That’s because Webflow forces you to create the CSS for any element. It creates that spacing and cascades it immediately. And so it's this forced discipline that most design products don't have.

I've always thought you don't really need Sketch if you're using Webflow. For content-driven websites, it's so much faster and easier for me to just start in Webflow.

Oh, yeah. Often, in Sketch, I’ll spend time thinking, "Okay, I'm designing this in a way that it can be coded." But if I’m designing in Webflow, I don't have to think about that, because it is coded.

In some ways, it’s faster to design in Webflow than designing something in detail in Sketch and then going to prototype. That’s because Webflow forces you to create the CSS for any element. It creates that spacing and cascades it immediately. And so it's this forced discipline that most design products don't have.

Can I ask about your side project, or is that super-secret?

Yeah, yeah, that's totally cool. I guess you could say it's "Uber for bartenders and waiters."

I have a business partner who has a catering services company and so it's basically borne out of her frustration. She's been in the business for about 12 years now, and she spends a crazy amount of time tracking down bartenders and servers to work her events. So really, it started as building a tool for my friend and then we started finding out, this is a very, very common problem.

And so we have event planners lined up to use our MVP. We're probably two or three weeks out from it being ready. We have 2 test users and about 400 servers and bartenders ready to use our first MVP.

So I'm super excited about it. It's a very common problem. We're able to use technology to cut all this manual wrangling time, tons of texting back and forth, people forgetting they agreed to work, etc.

And there are obviously a lot of companies that are addressing this problem, but not as specifically as we are. We're starting with the server first, whereas a lot of companies start with the hiring manager and a complicated application process. So it's almost like it's digitizing the existing workflow. Whereas we're starting with the user first and working backwards from there.

A screen from the prototype for Nathan's side project.

Prototyping digital products is a particularly exciting use case for Webflow.

Yeah, that's a big area at Intuit where I think there's opportunity. Most designers don't make a lot of mini-sites and brand guidelines like I do here, but everybody prototypes, mostly with Sketch and InVision, if not on paper. Which is great, but it's still just a few clicks down from the functionality that HTML and CSS offer. So that's a huge use case. I'm going do my best to help evangelize that as I get more experience with it.

Can you tell me a bit about how the style guides you’re building with Webflow are used within Intuit?

Well, it's used by designers, developers, and product managers. The designers — and content designers, copywriters, and interaction designers — will use it to get components. For example, we'll spec out, "Here's how we make a button that has a 3-pixel corner radius and a 20-pixel margin" or whatever, and they can just reproduce that on-brand component. So that kind of detail.

We'll also use style guide sites to communicate brand attributes, like, "Here's the kind of voice we use when we talk to our customer. Here are some design principles around motion or illustration.” Things like that.

I also created a brand color palette with a bunch of color swatches any designer can just copy and paste the hex codes to easily use them in their designs.

I've just started creating a one-stop shop for anyone involved in product design, where they can get just about anything they need. Or if it's not there, it'll have a link to another asset list.

Product managers can use these sites similarly. They're more high-level, focused on strategy. So for them, I try to help people visualize the relationships between brands within Intuit, and with positioning attributes of an Intuit customer and how we talk to that customer.

And lastly, developers will use these sites to get the technical specifications primarily. And a lot of times, especially if it's a front-end developer, they'll use some of the voice and tone, and design principles. Depending on how much latitude they're designing with, they'll use it for that as well.

Want to get your team designing with Webflow?

It's free to get started—and the Team plan's just $78 a month. And if you're not convinced yet, check our top 10 reasons your design team will love Webflow.

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.