When you step into the room with a client, you are a visitor from the future. You, web professional, spend your days immersed in the new paradigms of the multi-device web. Yet even for you, the constant change and adjustments that come with living on the internet can feel overwhelming. So how do you think your clients feel?
The web is fluid and mercurial. Our processes for working with it—and our clients—need to reflect that. It’s time for us to shed the vestigial mindsets we’ve inherited from the advertising world—the closed communications and drama of the “big reveal”—and build new systems based on honesty, inclusion, and genuine communication. We can bring our clients into the process right away, letting them see all the flaws and bumps along the way. Through this relationship they will become true partners—rather than confused, anxious bystanders—as we learn to better navigate this strange, evolving digital universe together.
Perspective is everything#section2
When your clients first think of a website, the mental image they conjure is likely that of a web browser as rendered on a desktop computer. This is completely understandable—after all, the majority of their website experiences occur while sitting at desks, fiddling with the things sitting atop those desks.
From where we’re sitting, however, we see the web as comprised of many more devices. Until recently, it’s been convenient to think of those devices as belonging to definable buckets like “smartphones,” “tablets,” and “laptops.” But as more and more varied devices have entered the market, those buckets have multiplied and overflowed, giving way to an amorphous continuum of display sizes, resolutions, browsers, operating systems, conventions, and interface possibilities.
This has required an overhaul in our thinking. Rather than websites being a series of perfect constructions rendered on each screen in exacting detail, web designers have started thinking in terms of systems. Flexibility has become a more valuable currency than specificity.
If your clients have ever been part of a traditional design project before, this is not what they’re expecting to encounter in your meetings. So how do we begin bridging this gap? How do we help our clients start seeing the internet through our magic design goggles? For heaven’s sake, how do we talk about this stuff?
How do I explain this internet?#section3
There are three big components to acclimating the uninitiated, which I think of as the three S’s: statistics, stories, and specifics.
Statistics are great because they can quickly make a point about the urgency of a matter. For instance, when speaking with clients about the importance of mobile markets, I often refer to this statistic:
That’s the power of statistics. They don’t give a lot of context or provide any kind of holistic understanding of a problem, but they do turn heads and introduce a need. A hard-hitting stat is a terrific way to begin a conversation like this.
Stats sure can make a point, but humans are social and emotional creatures. To make ideas memorable and help them stick in one’s craw, it can be helpful to reach for a personal story that exemplifies the issue, making it more tangible. Comme ça:
See how that worked? Now my statistic supports a narrative. My story has characters, a setting, and an (admittedly simple) plot. It’s more engaging than a PowerPoint slide with convincing stats on its own, and now my clients are more likely to incorporate this idea into their view of the internet. When they begin to think of “mobile users,” hopefully the image of Matt Griffin on the couch absorbed in his iPhone while being manically circled by a pajama-clad toddler will enter their brains, along with our old friends Guy in Line at Grocery Store and Woman Waiting at Bus Stop. Paradigm: shifted!
Show, don’t tell#section4
“But wait,” you say, “there was a third S!”
Excellent, you are a very astute reader and have passed the first test. Let’s talk specifics. Specifically, which specifics? Glad you asked!
If what you’re used to is a tiny, multi-column site on your iPhone, and pinch-and-zoom is standard procedure, you may look at your first responsive site and wonder where everything is. Where’s the navigation? Where’s the sidebar? Where’s all the stuff?
I find that a useful exercise is to simply pull up a responsive site on my phone and hand it around the room, while I resize the same site on the projector or TV that I’m using for the presentation. Clients can see that the main navigation collapses into a hamburger icon. The sidebar moves down below the main page content.
Watching this interaction on the big screen while they reproduce it on a handheld device helps everyone to make that connection between the mobile and desktop experiences. They can see that the content isn’t disparate, just recontextualized.
Demoing a few sites like this in the kick-off meeting (particularly well-known brands like Starbucks and Paravel’s Microsoft homepage) helps to reinforce that responsive design is a growing standard that users likely expect to see on your client’s website as well. After all, if some of the world’s most established consumer brands have already taken the plunge, it will feel a whole lot safer for your clients.
Delivering the deliverables#section5
Helping your client be more aware of responsive conventions will provide the context necessary for them to give you better feedback on your design work. But first, you need to show them which deliverables they’ll be reviewing, and let them know what sort of feedback will be useful for each one.
For responsive designs, we’re finding that smaller, more focused deliverables coupled with frequent client feedback get us on the right track more efficiently.
Get it in writing#section6
We start every project with a short, written specification that includes project goals, feature descriptions, site information architecture, a site map, and a branding profile. For a recent project Bearded worked on with the Andy Warhol Museum in Pittsburgh, we kept everything in a text document on Basecamp, where it was editable (and version-controlled) by everyone on the project. That helped us update it quickly, without misleading, out-of-date versions floating around. Version control also made sure that we had a record of any changing decisions, should they come into question later.
The specification document spells out the goals and strategies for the project. It’s the victory list and the game plan.1
Getting an early version of this document into your clients’ hands is essential. Make sure each and every stakeholder knows how important this is, and has read it and given their thoughts or concerns before you continue. I suggest a message like this:
Often these suggested edits spark new conversations about what’s important to accomplish on the project. If someone’s idea for a feature or approach sounds off-base to you, ask why they think it’s crucial. How does it relate to the project goals? If it doesn’t, do you need to revise the goals, or does this stakeholder just need to be reminded of the big picture?
Once these key plans are in place (and everyone on the team is finished making edits), we have what we need to start getting visual.
Frame your wires#section7
To define page layout accurately and efficiently for responsive design, the browser is the place to be. For the Warhol Museum, we built this responsive wireframe. It came out of our front-end starter kit, Stubble, and took about two and a half hours to put together. It’s not pretty, and that’s the idea. No one’s going to mistake this for a website design. But they will understand that these are the first steps toward defining information hierarchy and layout.
When we show our clients wireframes, we ask them for content-oriented feedback:
At this stage we’re trying to make sure we have all the stuff we need on the page before we start designing it. But just because we’re still working out the page content, doesn’t mean we can’t also dabble in aesthetics.
When lo-fi is the best -fi#section8
Wireframes are great at being wireframes, but they don’t do squat for look and feel. Somewhere between a style prototype and a traditional page mockup, a lo-fi mockup embodies web design pragmatism—efficiently conveying the overall tone. We quickly assembled this lo-fi, static mockup as a companion piece to the Warhol wireframe.
With these lo-fi mockups I tell our clients to ignore the details for now, and give us feedback on the broad strokes:
Make your feedback a loop#section9
The granularity of your client’s feedback should match the level of detail of the deliverable they’re looking at. So lo-fi visuals get lo-fi feedback and sign-off. Let’s look at a common reaction:
You should adjust things until the group agrees that we’re “close enough,” but don’t sweat the details. It’s not the place for it. When you feel that twinge in the back of your mind that says, “We’re getting nit-picky,” that’s when it’s time to say:
Moving on, of course, means more detail. Less metaphor, more reality. That’s right, you guessed it: it’s time for some HTML/CSS mockups!
Conversations, not revelations#section10
In-browser comps are the full-on deal. Honest-to-goodness hi-fidelity interactive mockups using semantic, reusable HTML and CSS (as discussed in my previous article, Responsive Comping). After approving the wireframes and lo-fi comp, our client saw this mockup for the Warhol project.
Not only is it responsive, but it’s a significant evolution of the aesthetic presented in the earlier lo-fi mockup. It’s taken the spirit of the static mockup and the organization of the wireframe that everyone agreed on, and added a new level of refinement, detail, and polish—all right there in the code.
Any client feedback now will likely be pretty minor. Why? They’ve been participating in the whole process, guiding it to this point. They knew what to expect and weren’t surprised by what you presented. It’s the polar opposite of the “big reveal.” No drama—just a natural evolution toward an effective design solution.
Remember: each client request for a revision is actually a request for a conversation. My default response to any change is, “Why?” Help your client focus on the “why,” and remind them that figuring out the “how” is your responsibility. Focusing on “why” helps you address the root cause, rather than a possibly incidental symptom.
Now we can begin#section11
Taking the extra time to help our clients understand the challenges we face and the role they’ll play in our process makes them easier to communicate and work with. It will help build their confidence in you, strengthen your rapport, and bring them more fully into your team for this and future projects.
It’s true that your new clients may not yet know and love this squishy internet the way you do. But enthusiasm is infectious. Help your clients see the internet for what it is (magic design goggles optional), and all your client interactions will benefit.