Lo-fi prototypes are simple representations of your Web pages, “site sketches” that limit their focus to the essential. They lay out the content and navigation that help users complete critical tasks. Rather than colorful and photo-filled, they’re black-and-white diagrams that nail down Website real estate and functionality. Even as Web applications become ever more sophisticated, lo-fi prototypes can improve your site design process and your return on investment.
Early in the design cycle these prototypes can be sketched by hand, increasing the pace and quality of the review process and the speed with which a project is defined. They can later be presented to programmers as detailed wireframes — site blueprints that efficiently capture the specifications that coders need so that they can start working sooner and with fewer costly false starts.
Your site sketches produce the best results within an appropriate sequence. So you should start by identifying your Website’s users and the tasks they need to complete on your site. Next, determine the content your users will need to meet their goals — and yours. Then start using lo-fi prototypes to brainstorm, build, and refine your information architecture: task flow, site map, navigation, and individual pages.
Multichannel merchants who come online from the catalog world often prefer to mock up Web pages with highly polished comps — refined visual representations that, in the case of Web pages, show layout and content as well as typography, color palette, and graphics. Comps can be visually stunning and elicit a strong emotional response. But using them as a blueprint for your site can set your project back and increase your costs.
Ask a project’s executive sponsor what he thinks of a slick Photoshop mock-up and he may unconsciously filter much of his intended feedback. That’s because your polished page sends a specific message: This project is pretty far along, so there’s little sense in suggesting wholesale changes. But if you show the same person a sheet of paper with a sketched pencil diagram, he’s less likely to hold back useful criticism. The unfinished look of your design makes it clear that you’re open to real suggestions. Lo-fi prototypes elicit comments that are more creative, less constrained, and even less nit-picking. Unlike a more refined mock-up, a simple black-and-white sketch won’t cause your senior creative to criticize font color in the footer when you need to lock down the placement of the page’s cross-sell box.
Because they can be made with tools as simple as paper and pencil, lo-fi prototypes wrest control away from the folks who often rule the design process. Programmers and Web designers are on equal footing with marketing directors, site merchants, and contact center managers. And when technical barriers are removed from the prototyping process, the team’s sense of what’s possible on your site broadens. You get more good ideas from more good people more quickly.
From the moment your customer clicks the “buy” button (or tries to find it), a Web page is first and last a user interface. Site owners can profit from software industry wisdom: It’s estimated that it is 100 times cheaper to make a change before code has been written. Using lo-fi prototypes to create, test, debug, and refine your pages yields lower development costs across a project’s lifecycle. The highest-impact changes to user experience are typically discovered in the earliest reviews of a design. Iterative rough prototyping lets you remove unusable features before they eat up a significant chunk of your development budget. And when your programmers work from wireframes instead of comps, you gain the increased efficiency of tasks being completed in parallel: Developers can code while creative makes final visual design choices.
To get a clear sense of how lo-fi prototyping can break up logjams and improve site economics, consider two real-life examples. In the first, a leading soft-goods cataloger knew it was time to redesign its Website. A close reading of site analytics had revealed that conversion was inordinately propped up by print-qualified customers using the site as an order-taking mechanism, while sales from other visitors lagged behind, failing to provide the incremental return needed to justify online advertising.
Senior management asked the marketing team to deliver a new site. Our firm was engaged to provide a comprehensive third-party assessment of the site’s entire shopping process. We found that the biggest roadblock was the product detail page. An unoptimized, cluttered layout required shoppers to parse more than 100 pieces of information simply to add an item to their cart. The creative and IT teams knew the page was problematic, but print deadlines and the lack of common language in which to hammer out a design spec had stalled progress.
We supplemented our assessment with a wireframe diagram for a redesigned product detail page. The new design reduced clutter 66% and granted prime real estate to critical conversion levers that had previously been absent or hidden. This black-and-white prototype helped IT and creative focus on the most important elements of the page. The team rallied and released a new page and Website in time for the company’s peak season.
The second case study is a bit more unusual. It involves a nationally known retailer with a strong brand. But beneath the surface and unknown to most consumers, this “national brand” is actually a confederation of independent sister companies operating in different geographies. Because each sister company has its own management and profit-and-loss statement, they were stymied as to how to design and promote a national Website.
The companies retained our services to help template a central site. The unique relationship among the firms posed political and technical challenges. How should the national site present the regional sites? Should the national site have its own cart, even though the order would ultimately be taken by one of the regional companies? Each regional company had similar but not identical products — how should this be communicated to the national shopper, before the site knew the shopper’s location?
We diagramed a series of options for the site. The various prototypes provided different approaches to where and how the interaction between the national and the regional sites would occur. The prototypes were intentionally rough and, as such, allowed the stakeholders to focus on the business and technical issues on the table. After several iterations, the sister firms agreed on a model. The development of the national site — and a successful season of holiday selling — soon fell into place.
As with any other tool, using lo-fi prototypes well takes practice. Here’s an exercise to get your team focused on creating a quick site design for an inhouse test.
Complete the following in a single day: Choose one Web page and one problem. To choose the page, consult your site analytics reports, customer comments, and third-party site assessments. You should select a problem that’s relevant to the page and to your business. For example: How can we increase sales of accessories from our product detail page without diminishing sales of the primary item?
Pull together a small team to determine a new design for the page. Be sure to include front-line staff such as contact center agents. Each member of this group should sketch his ideas for the new page with pencil and paper.
Next, have the team review these prototypes. Choose the two best, and then test those two designs. Your testing protocol should be organized around two key concepts:
-
What are the tasks I want the user to complete? In this case, you want the user to buy the primary item as well as the cross-sell item.
-
What are the features or page elements on which I require input? For instance, will the customer still see our branding elements?
Before probing on the specifics, your protocol should include universally useful questions: “What can you do on this page?” “What can you click?” “What do you expect to happen when you make that click?”
Round up five willing test subjects from areas of your company that are removed from your design process, such as accounting or distribution. Give them each 10 minutes to review and comment on the tests.
Then regroup your cross-functional team to go over the identified strengths and weaknesses of the two designs. If needed, sketch a hybrid version incorporating the most successful features of each and any “a-ha” elements the testing revealed.
A fast lo-fi prototyping exercise like this helps you identify a new Website design’s most obvious pitfalls, rapidly and with minimal cost. It primes you to test future designs with real users screened to reflect your actual customers. And once it’s time to write code and CSS, you’ll be developing a far stronger page.
Larry Becker is vice president of marketing and development at Rimm-Kaufman Group (RKG), a search marketing and Web consulting firm based in Charlottesville, VA.
Tools of the trade
There’s a spectrum of tools available for your lo-fi prototyping. Even Photoshop can work. While it’s usually too “heavy” for early mock-ups, it actually works well for final wireframes, if your designers can avoid the temptation to create full-blown comps. Lighter-duty tools include Microsoft Visio and upstart rival SmartDraw.
Also worth a look are two free programs that play up the “unfinished design” factor: Denim is a simple app that deliberately “roughs” the look of its output, and Napkin Look & Feel is a Java-based mock-up tool that produces similarly unfinished-looking results. Also consider Frametastic, a free download that lets you drag and drop to create simple wireframes directly in your Web browser window. And finally, don’t forget about that $3 pad of graph paper.
— LB