Curious how we get from project kickoff to finished creative? Let’s take a look at some parts of the creative process here at Clockwork using a site that we launched not too long ago, Tours Abroad.
Our creative process is flexible and constantly evolving. Tours Abroad was one of the first times we did a full-on sketchboarding session and since then it’s become a very integral part of the process. Other exercises such as mood boards, inspiration boards, competitive analysis and user interviews all contribute to the creation of a Strategy & User Experience Brief which guides creative through the rest of the project.
In this post, we’ll focus on the sketchboards created for Tours Abroad. Look for a follow-up post where we’ll look at some moodboards and rough sketches for the Tours Abroad identity.
An important first step in the design process is understanding your audience. Before we began sketchboarding, we identified the primary and secondary audiences to get a feel for what users would be looking for on the site. There are many ways to get this information, and in this case we chose to create an audience spectrum.
One of the unique things about Tours Abroad is that they offer both photography packages where attendees learn from a photo expert, as well as companion packages for those more interested in experiencing the culture. So, on the spectrum, the Y axis goes from a little photography passion to a lot. On the X axis we have a little tour knowledge to a lot, which covers both experienced and novice travelers.
With the X and Y axis defined, we then identified a user in each of the four quadrants: the Seasoned Photo Adventurer, the Photo Enthusiast, the Traveler, and the Companion. This helped set the stage for sketchboarding and gave us a way to think about what each user would need from the site.
First, some necessary credit: a few years ago, several of us saw a presentation by Leah Buley from Adaptive path titled “How to be a UX Team of One.” The basic idea was that to get to the best end result, you need to brainstorm a lot, collaborate with others, and then select and refine the best ideas. One of the techniques she discussed was sketchboarding, where you assemble a team and sketch out the various pages of the site. We’ll talk a bit about how we use this technique, but if you’re looking for a good overview, read this post on Adaptive Path’s site.
We generally have 4-6 people in a sketchboarding session. Everyone from designers, to project managers, to programmers are invited. The best creative ideas often come from people who don’t think of themselves as sketchers or artists, so it’s important to encourage people to let go of any hang-ups they might have.
The tools you use are completely up to you. We like thin black markers along with a couple shades of grey for shading and a yellow marker for highlighting. It’s important to remind your sketchers that these are not meant to be masterpieces; they can — and should — be quick and dirty. It also helps to have templates printed out so that everyone’s sketches are the same size.
We typically hold a series of 5-10 minute sketch sessions with a break between each to post on the wall, share and receive feedback. Each round then builds off of the good ideas from the previous round. Ultimately the sketchboard is a compilation of sketches for the same page.
For Tours Abroad, we did several days of one-hour sketchboard sessions, each day refining until we had some pretty solid directions. Then before jumping onto the computer we presented the sketchboards to the folks at Tours Abroad to get their thoughts. Involving them in the process helped ensure that we were on the right path.
While sketchboards aren’t appropriate in every situation, we’ve found that for many sites it’s a great exercise to get the entire team involved in the brainstorming, and ultimately to end up with the best ideas. But sketchboards are just one part of the creative process. Look for a follow-up post where we’ll show off some of the Tours Abroad identity work that happened in conjunction with these sketchboards.