Sketchboards: Discover Better & Faster UX Solutions
It’s what we do well
Designers love the “breakthrough moments” in a working relationship. Those times when you suddenly reveal a picture of a solution that really nails the problem and gives everyone on the team a reason to cheer. Such moments bring together many of the most valuable capabilities of a designer, as follows:
- The ability to convey a solution pictorially
Showing a solution is more vivid and far less abstract than talking or writing about it; pictures are both louder and more clear than words. - The ability to presuppose new solutions
Despite incomplete information about the problem, designers make instinctual leaps to offer potential solutions that would not have been arrived at through deductive logic alone. Designers push the boundaries beyond the obvious alternatives. - The ability to fuse together a solution from competing constraints
Design constraints solved one by one can create an unwieldy solution. Great designers arrange components of a solution into a whole that is more elegant than the sum of its parts.
The trouble is that these moments are all too rare on normal design and development projects. After a designer sinks time into communication, requirements gathering, and documentation, there is precious little time to create amazing results.
Where wireframes fear to tread
The wireframe—default design tool of most UX professionals—is a significant part of this problem. While wireframes are often necessary at the end of a process to clearly document and communicate the design, using wireframes earlier in the design process focuses time and attention on all the wrong details and activities.
We often find UX designers working to define and arrange elements on a page when the real issue to confront may be much broader in scope, such as “Does the page need to exist at all?” or “How best can these series of interactions flow together?” Wireframes force your design solutions into a certain level of granularity that can’t match the big juicy problems you face. A design process starts with struggles against scope, flow and gestalt. Yet wireframes arm you with mere dropdown fields and “lorem ipsum.”
Wireframes constrain your creativity. Given the time it takes to generate a wireframe, we find that most designers can only create one wireframe per page. Then they slowly revise and compromise. We call this “the inch-by-inch trial-and-fail method,” where a designer slowly adapts his or her first idea for the page until it eventual meets all the criteria thrown at it, but slowly falls apart in the process. Such a process eliminates the opportunity to explore and choose amongst the myriad of possible forms an interaction could take, nor allows you to evaluate which approach might best adapt to the comprehensive set of criteria.
Wireframes also take designers into a hole. Wireframe development typically results in a designer slaving over a screen at his or her desk, not interacting with others, in order to improve upon the work. As documents, wireframes enable team members not to have to interact, which often results in work just getting thrown over a wall.
Simply put, wireframes are too slow and detailed. They aren’t going to deliver many breakthrough moments for you and your team. Instead, designers need to focus the early stages of work on techniques that achieve the following:
- Ways that focus the designer’s time and attention on the big problems that need solving before tackling the details
- Ways that quickly explore many different possibilities to find the right solution
- Ways that can involve others
- but yet can still do it all pictorially!
Enter sketchboards At Adaptive Path, we’ve adopted a technique, called the “sketchboard.” It starts with a big sheet of paper (think yards, not inches) that forms a large canvas on which we can explore, share and iterate on ideas. The paper is key—it brings all our thinking together into one space that we can roll up and take anywhere.
On this large sheet of paper we roughly organize our problems and constraints. We might paste up personas that we’re designing; stages of a user process; functional requirements; research findings, or screenshots of relevant real-life examples. This brings whatever elements that should be driving or inspiring us onto the same playing field. This way our work focuses on solving the problems that matter because they’re right there, staring us in the face. (Note: We love using drafting dots to tack things up onto the sketchboard. So we can easily rearrange and rethink the relationships of our work.)
At this point, we’re prepared to sketch a wide array of solutions with (gasp!) pen and paper. It may not be the most pixel-perfect portrayal of the final results, but it’s fast, it eliminates needless detail, and it can reasonably convey highly interactive experiences. (As proof of the last point, just think of animation storyboards).
We tend to sketch at two levels:
- We sketch thumbnails using this multi-page template, to quickly force out a half-dozen (or more) approaches to a problem, or to convey a flow of an experience across many pages. Here’s an example.
- Then we sketch full pages using this single-page template, to “zoom in” on a particular thumbnail idea. With slightly more detail, we can see where the idea leads to and better evaluate the possibilities it holds. Here’s an example.
We don’t spend too much time evaluating or critiquing our sketches, we just work on getting all the ideas out onto the sketchboard where everyone on the team can see and help make improvements.
So far this is, logistically, all very easy-peasy—but that’s the point. We don’t have to work very hard to have many ideas. Ideas are cheap, and the sketchboard technique just makes them even more affordable. So, the more ideas we explore, the more likely we’re going to hit upon something really compelling and really appropriate for the problems we’re addressing. Sometimes the best idea is the first one we have, but most of the time it’s the third, fifth, or eleventh one that really nails it, which creates that glorious breakthrough solution.
The sketchboard technique unleashes your right brain to find and convey great solutions pictorially. You get:
- Faster, but higher-quality design iterations that encourage heavy collaboration
- Exploration of many ideas before investing time in polishing one design
- Sketching and collage activities that provide design the same speed and focus that agility gives to coding
As a designer, the sketchboard allows you to create endless possible solutions in a vivid, pictorial form. You’re set-up, again and again, for breakthrough moments. And with more shots on goal, you can’t help but score regular and repeatedly.
Sharing the sketchboard
With a large canvas full of sketched solutions, we can have a very productive discussion with our clients and with our partners from other disciplines. To gain from their experience and insight, we lead our partners through a walkthrough of the sketchboard, presenting the sketches as potential starting points for the ultimate solutions. No matter what discipline or perspective they’re are coming from, they can easily point to a sketch, share their thoughts on what’s good or bad about it, and everyone on the team can understand what they’re talking about because we’re all on the same proverbial page.
This collaborative use of the sketchboard opens up the design process so that everyone can add valuable input before we become married to any one approach. From a process point-of-view, this increases visibility for management. Management can better appreciate the cost-value tradeoff of investments in additional design iterations.
From a solution point-of-view, the team’s walkthrough of the sketchboard brings us to place where we’ve got a pretty tight idea of what solutions we need to take forward into a detailed design. A well-reviewed sketchboard is a visual specification of the solution, with certain elements of specific sketches highlighted and circled, lots of notes, and several new sketches conveying the important details we’d made decisions about. Only at this point do we feel we’ve explored enough ideas, confronted the right problems, and received enough team input and perspectives to move forward into the detailed structure of a wireframe.
Originally, we started using sketchboards for the ability to quickly iterate on interaction design, but in the process, we found these additional benefits:
- Our design solutions are dramatically improved because there are more iterations on the right issues and a lot more people participate in the process
- We earn greater trust and win buy-in from stakeholders because everyone understands why the chosen solution is the best solution
- We rapidly move from loose requirements to a clear understanding of what to wireframe and prototype, and consequently, we are able to quickly produce higher fidelity wireframes
- The sketchboard adapts well to almost any type of design problem we come across, and works well within different types of processes
But, perhaps, the best result of the sketchboard is that you can proceed into wireframe documentation with the right answer in your pocket. You’ve got another breakthrough moment just waiting for you.
Another technique to explore interaction concepts comes from Adaptive Path. Brandon Schauer introduces the method and points out its advantages.
