Using Wireframes to Jumpstart a Project

Meg Davis  

January 25, 2011

Related Topics

Our clients have a wide range of expectations when we start partnering with them. Some clients come in with a fully-fleshed out documents and sitemaps, while other clients come to us with little agreement on some vague adjectives for an experience. The latter situation can present the challenge of defining the project, but it also presents the opportunity of exploration. When a project is not fully defined, we can collaborate with our clients in open exploration. The basis of the project springs from ideas that are deeply rooted both in our organization and our client's organization. Not only does this mean that the ideas are typically more innovative, but it also means that everyone involved in the project fully buys into the foundation of the project.

So, as user experience experts, how do we successfully lead this exploration and engage our clients in the process?

The foundation to exploration to me is sketching, diagramming, and creating. Thinking hard about the problem and consolidating stakeholder viewpoints can be valuable, but creation of interim ideas takes the thinking one step further. As user experience experts, we must create and refine. On a recent project, we used wireframes to explore vague concepts and to grow the concept into a full idea for a client website.

Step 1: Using wireframes for concept direction

At the outset, we knew the ultimate goal of the project was to keep customers engaged with the website. The first step of our exploration was to brainstorm about ways to engage customers and to explore the implications of each approach.

We brainstormed as a team about different ideas, sketching out different scenarios. We expanded on our client's ideas. Then we created static wireframes (in Illustrator, as the graphic possibilities are endless and it offers an environment of exploration). Each wireframe presented a divergent concept from the rest. All had the same goal: engage customers to come to the website every day. By putting these concepts on paper, we were able to start to realize the implications of each concept.

We presented these to the client. We particularly stressed the "sketchiness" of the wireframes and that each wireframe represented a concept, not a design. The client was able to mull over the concepts and pick a direction that seemed to resonate with everyone in the company. There was no lack of discussion, excitement, and generation of even more ideas from the client. However, something was not quite right about the concept direction yet.

Step 2: Using wireframes for experience exploration

Once we agreed on a paradigm of engagement, we needed to understand how we could pull that paradigm of engagement in different directions. Again, we went back to the drawing board, sketching and brainstorming.

We created interactive wireframes that went a bit deeper into each of our divergent directions. These wireframes told the story of the how someone would go through the website and what would motivate them to come back. We imported the Illustrator files into Axure to make them interactive. The process of creating these wireframes revealed the gnarly interaction design problems that we were to face with the project. We became intimately aware of the advantages and disadvantages of each approach as we lived with the ideas through a user who went to the website every day for 3 months.

Again, we exposed our rough wireframes to the client. The great thing about having something concrete yet unrefined to present to the client is that it empowers the client to get in there and create their own ideas around the wireframe concepts. After mulling over the idea, we again came to a stopping point for this round of wireframes: one experience idea for a concept of engagement made sense.

Step 3: Using wireframes for refinement

After several rounds of exploration, we decided to use wireframes to refine the idea we had. This is when detail work came in - looking at where all the information would be placed and how much emphasis should be on what parts. We were able to attack more detailed interaction problems by exploring alternatives in wireframes at this point.

Although many times I feel like wireframes are touted for being a great tool for refining a concept before getting into full-out design, I think wireframes can also be great tools for guiding exploration of concepts and ideas. They give everyone involved in the process a common, tangible thing to discuss and build off of. They are quick and allow us to be flexible with representations of complicated concepts. By adjusting the fidelity of wireframes, we are able to control the kind of feedback we can expect: low fidelity wireframes yield larger concept feedback and increasing fidelity wireframes yield more detail feedback. As user experience professionals, our biggest contribution to jumpstarting a project is to create, create, create. I believe wireframes are a great creation tool for guiding a collaborative exploration between our team and our client's team.