Beyond Wireframes
Posted in design, strategy, user experience on September 1st, 2010 by Ehab Bandar – CommentsTurning a product idea or feature into reality usually starts out with a sketch (see 37 Signal’s Sketching with a Sharpie), and then all hell breaks loose. Depending on who’s involved, deciding whether to shape and communicate the idea by powerpoint, wireframe, clickable prototype, and visual design (to name a few) is the tip of the iceberg. If you go down the path of wireframes, it’s debating between low-fidelity and high-fidelity wireframes, placeholder content vs real content, real vs fake photos….well, you get the picture. The trouble is that how you communicate your ideas depends as much on who’s looking at the picture as it does on what stage the picture is in.
The reality is that wireframes (of the low- or hi-fidelity variety) are meaningless to most people outside the information design world. Most people, especially marketing and business types (i.e., those who can’t read latin or understand lorem ipsum), have a hard time imagining what a wireframe design is supposed to do or will look like in real life. They judge it based on what else they’ve seen. It’s the equivalent of an architect handing you a blueprint and asking you what you think of the bedroom windows.
I generally find that with new feature ideas or enhancements that break with the current way of doing things, a rough sketch or high-level wireframes will do to ground the design. At this point, you’re looking to make sure that the design approach is consistent with the product strategy. In other words, design is the tactic that makes the product strategy come to life. If the strategy is weak, so too is the best executed design.
The first step of visualizing the experience is to ensure that the problem and strategy are well defined. Often, the problem is general enough where the designer and product leads must work closely together to iterate on the design concepts. Both inform each other to arrive at something that neither alone could have come up with, almost like the left and right sides of the brain working at full tilt. And because you’re working closely with one or a few individuals, the design sketches can be seen in context, brainstormed and analyzed in-depth. At this stage, as a designer, you’re looking to identify the right visual metaphors and concepts to achieve the product strategy and business goal. You’re also testing the limits of the technology itself, its constraints and opportunities. Ideally, you’d also include an engineer to brainstorm ideas with. You’d be surprised what’s possible to build, which even the best designers can’t imagine.
At this point, increasingly, traditional low-fi (i.e., black and white) wireframes are useless unless you’re designing a content-heavy, CMS-driven site. Even high-fidelity wireframes are just that, wireframes, which don’t do much more than polish up the sketches you just made earlier. Instead, low-fidelity visual designs are the way to go, done by user-focused visual designers with a good grasp of HTML and CSS. It’s a new breed of designers that can do it all.
With design influencing so much of a product — from the interaction and usability to performance and branding — the days of highly specialized design skills may be numbered. Instead, companies (mainly startups) are looking for product designers who resemble renaisance men more than traditional designers with a beautiful portfolio. As an example, Quora’s job posting expects designers to have a “strong portfolio including self-started projects” plus the “ability to build what you design.” Most information architects, interaction designers and visual designers I know wouldn’t fit the bill.
The other design trend is the need to iterate quickly on product ideas. This is driving the need for designers to wear multiple hats to try new things, while being flexible and grounded in product strategy and user-centered design principles. Put another way, to create innovative products, designers have to be more than creative visually, but technical, business-minded, and able to understand what motivates people to use a product.



