Here at ZURB, we like to sketch, and we've been thinking about it a lot lately. We've shown you some workflows and low-fi wireframes, but we're missing one key step that precedes both of those—opportunity sketches.
Let's BeginIt's the start of a new project. You meet with a client who needs help finding ways to improve her existing product; a housing search engine geared towards college students. The application lets users find apartments based on the proximity of where their friends live, which is gathered from their address book.
As it currently is, the website simply finds the biggest cluster of friends and finds nearby apartments/homes for rent, but the client is looking to ZURB to make those results better.
So where do we start? Do we hit the ground running and go straight into wireframing? Or should we be even more devilish and jump right into code? Neither. We start old school with a good ol' round of opportunity sketches
The Opportunity SketchAt ZURB, we think of an opportunity sketch as an illustrated question. Each sketch represents a focused idea we have about the product, and it can be something to tackle within the timeframe of the contract, or a piece that can serve as a reference for a further release. The questions that these sketches pose include:
- How are we addressing the current problems of the existing product?
- Is this idea possible with the current technology?
- Does this opportunity fit within the product's mission and goal?
- Will this help ease the user's workflow, or make it more complicated?
- Are we providing something that's actually useful, or is it more form than function?
Show Me, Don't Tell MeUsing our scenario from above, here are three opportunities that resulted:
There are some folks who have a ton of friends (I mean, Tom from MySpace has 11,943,171), so we should allow users to be able to highlight certain friends and gear their results closer to them.
Sort by Transportation
Instead of simply finding out who's near you and targeting that area, we should ask users how they travel. If they're a walker, then the current system would work. However, if they're a biker, driver, or bus rider, there's a bit more leeway in finding the perfect spot.
Feature Surrounding Amenities
Knowing college students, they'll eat anything and everything that comes their way, so why not tell them what's around? DIsplay grocery stores for the cooks, fast food restaurants for the non-cooks, and places open late for those with a nocturnal lifestyle.
Note: It would've been easy to layer all three of these opportunities into one sketch, but that gets confusing. Remember to stay focused on the big idea!
Maximum Results With Little InvestmentThose three sketches would probably take about 15 minutes to produce (we figure you can do about 10+ sketches/hour), which is a lot quicker than trying to mock it up in Omnigraffle or Photoshop. That could take hours or days. For a fully fledged session, do 45 sketches over 3 hours. This is the ideal amount to get the most out of your ideas, but feel free to do more if your brain isn't worn out by then.
This process has given ZURB the ability to develop quickly and efficiently, which provides maximum wins on both ends.
Never Forget the Almighty SketchWe're all about producing a ton of ideas, even a couple of dumb ones, because in that stack of sketches you'll find a few gems that will make the project shine. Use your sketches as a talking point and get your client's feedback on which sketches both fit their business strategy and excites them. From there, it's all about focus so refine those sketches even more until you're ready to move on to low-fi wireframes (and always keep your client involved with each round).
Try incorporating opportunity sketches with your next project and use the time you've saved to catch the latest episode of GLEE. You can even download some awesome sketchsheets that will help keep your work organized.
Amped? Go for it! Put down that mouse and bust out those Sharpies, highlighters, and pens and get sketching!