Prototyping Your Workflow

Last year the digital agency I work for, Bluecadet, started a website redesign project for The Franklin Institute—a renowned Philadelphia science museum undergoing the largest expansion in its history. My colleagues and I were excited because not only were we getting to work with an iconic local institution, but the project represented an opportunity to incorporate a number of techniques into our responsive web design practice: atomic design, HTML wireframes, style tiles, element collages, and front-end style guides. We envisioned a series of quick prototypes that lent momentum to a harmonious back-and-forth between design and development. We felt like this was an opportunity to overhaul the way we created for the web, from start to finish.

And then we got stuck.

We couldn’t figure out where we would fit all of these new techniques into our preferred way of working. I don’t think we’re alone in this. The way we create for the web is changing so rapidly that if you’ve attended enough conferences or read enough books and blogs these last couple of years, you may feel like we did: excited but a little overwhelmed, and worried that your organization is the only one that hasn’t yet adopted the expert-approved way to create for a device-agnostic web.

There’s a seductive danger present whenever you see someone else outline their way of working, however. It’s easy to take their process as a rigid, universal truth. The trouble is, you and your team aren’t like everyone else—you have different strengths and weaknesses. Borrowing someone else’s process wholesale ignores the fact that it probably took them lots of fumbling to get to that point, and it’s going to take plenty of experimentation on your team’s part to figure out what works for you.

So perhaps the solution isn’t to transplant someone else’s guidelines in an attempt to fix the entire thing all in one shot. Maybe there’s a way to take the same iterative spirit of these new techniques and apply it to the overall workflow itself. To prototype your workflow, in other words. In some ways, it’s a mental trick—a way of giving yourselves permission to try things, even if you’re unsure of the outcome. It also lowers the stakes to a comfortable level: if we mess this up, we’re still okay.

What follows, then, isn’t a tidy recipe or a formula. It’s a collection of observations I hope will help you re-cast workflow change as an ongoing process of small, imperfect steps.

Technique is easy, talking is hard#section2

It’s easy to get fixated on the benefits of specific tools and techniques, and to assume that those benefits are self-evident to everyone. But over the course of the past year, it’s dawned on us that meeting the demands of our multi-device web is less a problem of technique, and more one of communication. Sometimes people just need to understand why you want them to change how they work.

Prior to the Franklin Institute project, my colleagues and I had been pooling all of these new techniques, but we instinctively focused on pieces that affected our part of the process. Designers and developers were talking and dreaming—but largely within the echo chamber of their respective disciplines. So when it came time to kick off the project, we had to have some hard conversations about how new techniques would work for us as an entire team, and sometimes we were downright skeptical of each other’s suggestions. On more than one occasion we asked each other: “That’s great, and it works for that agency, but how would that work here?”

You will probably need to make your case differently for each person on your team, then. If you’re a designer, it could mean explaining to your developer teammate that you would like to start breaking things into a design system so that you don’t have to do 20 different iterations of the same page layout. For developers, you might have to convince your boss that a style prototype will be the best way to present a site to your client.

Whatever the rationale, realize that change represents a very real cost (at least in the short term) to your teammates’ time and comfort, and their skepticism may be their reaction to that cost, rather than to the less-immediate benefits you say will follow. Focusing on the why instead of how can help balance those two competing forces.

Limit your focus#section3

As of this writing, Bluecadet has 22 full-time staff members. That’s just big enough to make it hard to work on intricate, shifting process details at a company-wide level. So we’re starting small, at the project level, instead of trying to craft a monolithic process that gets handed down from above.

Look at the projects you have on the horizon. Think about the portions of your workflow that you want to improve, and pick just one of those things to introduce into your project. Why just one? It allows you enough space to experiment without endangering your project.

A mentor of mine once told me that programming (and especially programming for the web) boils down to reducing the number of “unknowns” on a project to a manageable number. One is fine, two is a stretch, and three is asking for trouble. If you think exploring HTML/CSS wireframes could have a positive impact on your work, introduce just that one thing. Most projects have enough built-in friction without adding or changing multiple processes at the same time.

For the Franklin Institute project, we ended up deciding that the added wrinkle would be a front-end style guide. It wasn’t the biggest thing, but it was one small step that we thought could have a big benefit without affecting our schedule.

We made this decision based on two factors—factors that might be helpful as your team thinks about what that “one thing” could be:

• A good idea that didn’t quite work in the past: we had created a static style guide for a previous project that had quickly become outdated and was ultimately discarded. But we still thought the idea had merit. So when you gather as a team, think about past good ideas that might have stalled, and whether they could work if you approached them differently.
• (A little) experience mixed with (a lot of) enthusiasm: a new front-end developer joined our team, and he had already been experimenting with different style-guide generators like Barebones and Pattern Lab. More importantly, he was excited about building one. Does someone have something they’ve been testing on a personal project, or that they’ve used successfully at a previous job? If so, you’re already halfway there—you might just need to figure out how to make space for it.

Align your tools and techniques with your team#section4

One of the recurring discussions we have at our studio is: “Should our designers learn markup and start doing some of this design in the browser?” We’ve heard a lot of persuasive arguments for it, but in the end, we decided that the main focus should be how to get our designs into the browser earlier in the process, instead of who should be doing that work.

This led us to try pairing designers and developers early on in a project, and having the developer create markup that “waterskis” behind the designer’s sketches and Photoshop explorations. We’ve found that doing it this way takes advantage of our team’s individual strengths. It also means that our developers are providing feedback that makes it into design iterations while they are still malleable.

We’re currently in the middle of a redesign project for a literary magazine, and we’ve found that the rough HTML/CSS mockups created by our developer helped us pose the right questions to our team’s designer. Giving our designer a specific problem to solve (“These titles take up too much space at narrow widths”) allowed her to judge the problem in the context of the entire design. She could then explain what she was trying to accomplish visually, and even find solutions that extended beyond the immediate issue we were trying to solve. She’d look at the screen while we squished the browser back and forth, and then say something like, “If you move the titles below the photos this whole problem goes away.” Stepping away from dogmatic ideas of who should be doing what allowed her to focus on doing what she did best, which was solving visual problems.

Distinguish between internal and external needs#section5

When you start moving things around, you may start producing deliverables that are important, but only for an internal audience. That might be because they’re of limited use to the client, or they simply may not be mature enough. Managing expectations is as important as trying a new technique, so if the client is going to see something new, you’ll have to invest time preparing them for what they will receive—especially if it’s not how they’re used to working.

For a current project we are producing HTML/CSS wireframes to get an idea of how long they actually take to make. Since we don’t know (yet), the first rounds of client deliverables are still going to be static wireframes done in Photoshop. If we feel like the HTML/CSS prototypes are mature enough, we will introduce them to the client in the final round.

As you work, then, give yourself enough room to adjust: what if it takes twice as long to produce that wireframe? What if the client is resistant to parallel wireframe and design conversations? What if the thing you’ve produced has value, but only if accompanied by other deliverables?

Focus on products, not presentations#section6

One of the things we’ve had to do was clarify the ultimate goal. This seems obvious: “We’re making a website.” But if your process is anything like ours, you actually spend a lot of time making anything but a website. Mostly you make pictures of a website.

Recently, while working on a beta build of a website, we found out that the majority of our client’s team members were using older versions of Internet Explorer and Firefox. Those people were surprised to see something that differed from the comps they’d been presented earlier in the process.

That experience taught us a lot. Setting client expectations is one way to avoid those surprises, but we’re also slowly agreeing as a team: the browser is the final arbiter of what we do, so let’s stop shoving it to the end of the line. The components of our process need to support the final product at every step of the way.

Put your process prototype on the agenda#section7

It’s easy to nod and agree on something: “We’re going to do this!” But when you get immersed in detail work, it’s just as easy to forget that one new thing you all agreed to put in the mix. So task someone with making sure that you revisit your process prototype repeatedly. This might mean you start meeting more frequently. We’ve found it helpful to have official meetings, but our hope is that eventually we start doing this in a less-structured way, choosing to meet informally when we feel the need to discuss something.

If you’re working on a project-based team, remember to share what you’re doing with other groups. For example, on a recent project, we implemented modular content blocks that could be reordered as needed, inspired by a post by Christopher Butler of Newfangled. We then showed what we were doing to a colleague, and she integrated some of what we learned into her next project. She also had some incisive questions for us that helped us improve the content-authoring experience for our client.

By sharing with others, everyone wins: your colleagues will pick up your new skills, and you’ll be forced to clarify your goals and assumptions.

Iterate your workflow (play the long game)#section8

When you’re reworking your process, it’s good to keep a running log of the things (both good and bad) that you encounter with each new change you introduce:

• Did something take more (or less) time than you expected?
• Were there people who were negatively affected by the change?
• How did the client react? If you’ve worked with them before, were they receptive to change?

By breaking things into focused pieces, you’ll be able to evaluate how effective they were. You can keep the stuff that worked, and refine (or throw away) what didn’t. Having a forum to share those pieces is important, too—at Bluecadet, we’ve made sharing lessons from completed projects with one another a regular part of our monthly all-staff meeting.

Over the course of three separate projects, we’ve now field-tested:

• Atomic/modular content and layout
• Front-end style guides
• HTML/CSS wireframes

Here’s the thing: each of those things that we tried? We’ll probably do them just a little bit differently the second time around, because of all the data we gathered from the first go-round. If we had sat around until we were sure about The New Way of Doing Things, well, we’d still be sitting around today.

One of the things I’m most proud of is that by working piece-by-piece, we’ve pushed our workflow forward while being honest with our clients. One of our internal guidelines is that our clients shouldn’t be bankrolling our workflow remodeling project—our fine-tuning should result in tangible internal benefits for us, but, more importantly, a better product for our clients.

Try something new, now#section9

As I finish writing this, we’re trying out yet another thing that we hope to add to that list: HTML/CSS prototypes as a design deliverable. Maybe they will replace static comps, or simply accompany them—we don’t know yet. But it’s okay that we don’t know. By the fall, we’ll probably be building things far differently than we are right now, informed by the experimentation we’re doing piece-by-piece along the way.

I hope that this encourages you and your team to take some small steps, too. Get together and talk about the parts of your workflow that can be improved, pick one thing to try together, and figure out where you can make space for it. Like us, you’ll probably never be able to draw a line on the calendar and say, “That’s when we started doing things the right way.” But you’ll find yourself much further along—one thing at a time.