Experience Design Models: Minding the Gap Between Ideas and Interfaces

Fill in the blanks.

Related posts:

I have never, ever, had an original song or melody pop into my head. I frankly think it would take me a lifetime to become a one-hit maker; let alone a one-hit wonder. I have however, had numerous occasions when I’ve heard a song and then imagined a movie scene play out. For me, the inspiration needs to first come in the way of a soundtrack. I can then fill in the blanks with a storyline.

In becoming mindful of my own personal nature, I’ve recently started paying more attention to how others around me think as well; and more specifically, how they approach design problems. It’s been my experience that many of my non-designer colleagues – typically stakeholders such as executives, product managers, and developers – don’t visualize like designers do. Their strengths generally lie elsewhere. That’s not to say that non-designers can’t be imaginative or creative, but chances are that their day-to-day responsibilities have shaped their thinking to be more matter-of-fact. Put another way, you’re generally better at what you do often; and to some degree, you also have to factor in how you are hard-wired neurologically. Some folks are just better suited to visualize stuff than others.

In thinking about the differences between these types of personal attributes, I’ve also started noticing that we designers sometimes leap from nascent ideas to interfaces far too quickly when faced with a design problem. By jumping right into our typical design process and favorite tools, we squander golden opportunities for enhancing experiences through more systemic thinking. When that happens, we deny ourselves a critical period for both incubation and ideation – which can potentially limit real innovation. In other words, once you show wireframes or mockups to stakeholders, you’ve already impressed upon them a specific direction, which is almost impossible to erase. And chances are that by showing design documents, you’re more than likely committed yourself. That’s just a natural position to take as you pitch your design rationale.

So what can we do to better communicate experience design vision during that window of opportunity between raw ideas and design deliverables? How can we use our abilities to visualize for the greater good? Enter experience modeling.

What? A means for communicating design vision.

What exactly is an experience model? I’ll define it as a vehicle for communicating systems-level experience design concepts. Granted, that’s a little abstract, so let’s break it down a bit.

Experience modeling should first and foremost be rooted in user research. This ensures that a designer has the necessary foundational knowledge to make educated design decisions. Upfront research should include an understanding of the current journeys a user goes through to accomplish their intended goals. Once you have an understanding of the steps involved in the process – ideally from observing and interviewing real users – you’re armed with invaluable information about the lifecycle and its stages.

To illustrate, let’s take the simple example of paying household bills online. The model should initially capture what the process of bill paying looks like from the point a user receives their bills to when they’re paid in full. You can’t improve an experience unless you fully understand its current flow and workarounds.

The next aspect of the model is actually rethinking the experience in the way of redesign. By having done the legwork with research and then breaking down an existing process, designers are in a position to uncover opportunity gaps and latent needs – in this case, ideas for streamlining and consolidating online bill paying options.

And so this is where representations of the new-and-improved experience needs to illustrate how a new model might work; and more importantly, how the proposed paradigm is better! It should convey big-picture design intent and serve as the roadmap for where you want to go; the design destination, if you will. It should also highlight how users will interact with a system and how the system will behave in return.

There are many ways to represent experience models, so more on that later. The key takeaway here is that this is essentially an intermediary step so you don’t get bogged-down in the details just yet – most notably around the actual interface and technological constraints. You simply want to frame your vision and gain alignment with your stakeholders.

In short, experience models serve to communicate design direction for getting team members to, at the very least, be talking about the same thing. (Whether they agree however, is something else entirely!) Having a stake in the ground early on is incredibly important to avoid confusion and divergent opinions when the user interface is being designed later on.

Why? People, *ahem* stakeholders, are strange.

Experience modeling is especially valuable early in a project when it is common to have a great deal of ambiguity. At this point in the process, designers should strive for alignment and buy-in on a general direction so as to begin working on the actual details.

To illustrate how this might come into play with the aforementioned stakeholders, let’s imagine our earlier scenario in which your product department has identified a market opportunity for consolidating online bill pay options. What generally happens next is that the business communicates the opportunity to the individuals who will be doing the actual work. At this point in the process, the evolution of a concept has already begun to take shape in people’s minds. The product folks are thinking about one thing, architects another, and the marketing team perhaps something else entirely different. The bottom line is that everyone is visualizing and the idea is inevitably taking on a life of its own.

In simply scratching the surface on some neurological research out there, it’s widely thought that the left brain is more rational, analytical, and requires sequential information, which means it has to first process bits of information in order to get a holistic view. The right brain, on the other hand, is more visual, intuitive, and able to see the bigger picture first – filling in details afterwards. I’d be willing to bet that most product folks are in the left brain camp and that designers tend to be slightly more right brain oriented.

And so our techniques for communicating design concepts should therefore adapt to meet these potential discrepancies much earlier. Far too often at this stage however, we tend to gravitate back to our comfort zones. By going directly to the design of screens, we may miss the proverbial forest for the trees. Early brainstorming input from stakeholders is stunted because it bypasses their own opportunity to do some systems-level thinking. Social scientists have also shown that abstract thinking can enhance creativity in all types of individuals. Again, what we need at this point is a direction for the team to agree upon (i.e., a model); not a precise solution (i.e., mockups of specific screens.)

In keeping with our imaginary product example, you wouldn’t want to show independent bill pay screens. That’s much too detailed. Instead, you’d want to focus on the benefits of having it all consolidated and displayed in one place. It’s that overarching value proposition of having everything integrated into one view that’s at the heart of the experience we should be championing at this stage in the game.

When? Well ahead of the typical design process.

There isn’t a whole lot to say with respect to timing. Whether you’re creating new products, or making significant changes to existing ones, getting in on those initial conversations with decision-makers is incredibly important. That’s when a designer can make the most significant contributions to the overall vision of a product.

Thankfully, getting user experience designers involved earlier in the product design lifecycle is happening much more often as companies are begin to recognize the value they deliver.

How? Make it your own.

There’s no one, optimal way to represent an experience model. What’s appropriate and relevant depends on your particular situation. You ultimately want the medium you choose to communicate your ideas in the most effective way possible.

I’ve seen models represented as paper drawings on poster-size paper, storyboards, videos, and even as a series of comic strips – which are a surprisingly powerful way to illustrate key interactions. (For some additional examples, check out an archived piece from AIGA’s Journal of Interaction Design).

I’ve also seen designers act out scenarios of how a system is intended to work. This is more common in the service design industry where interpersonal contact is remarkably important (e.g., checking into a hotel.) With digital product experiences, designers can of course play the role of users, but they can also anthropomorphically convey how a product responds. Acting out a few, important sequences is a fun way to communicate and it generally leaves a lasting impression on observers.

Whatever approach you choose, here are a few tips to keep in mind. Good experience models should:

  1. Tell a story. You should, at the very least, have a point of view. Having a story also implies a beginning, middle, and an ending. As we’ve seen, you don’t want to leave important aspects of your vision at the mercy of stakeholders’ imaginations.
  2. Showcase the talent wisely. You want to focus the spotlight on the most important aspects of your design vision. If a system is incredibly complex, consider chunking it into a series of sequential segments. Or, highlight the most critical paths a user might take. Whichever route you choose, always be sure that the key interactions stand out.
  3. Avoid interfaces for now. Unless they are truly meaningful, focusing on the details at this stage can be a distraction. Again, what we’re after here is alignment on a general direction; not the color and placement of screen elements. If you do find yourself needing page-level design, keep it fairly conceptual and lightweight.
  4. Use points of reference and metaphors. Providing context and background information is always a good idea. And think of creative ways to describe your offerings with references that your audience can identify with (e.g., “It’s like Mint.com for household bills.”)
  5. Be engaging, sharable, and fun! Short videos are a fantastic medium for representing models and high-level interactions. Think about how a movie trailer needs to be all encompassing: it summarizes the plot, sets the tone, and generates some excitement. There’s nothing better than the buzz associated with a clip like this going viral within your company!

Scoring the ending

As the saying goes, knowing thy users is incredibly important; but so is knowing your stakeholders. Understanding how they view the world gives you insight on how to better craft a more compelling design argument. These opportunities also ultimately give us a chance to showcase our design thinking skills. And it’s generally at this stage of the process that real innovation gets a fighting chance.

In short, you need to know where you’re going before you decide how to get there. Experience models can make what you envision a little more real and help chart the course during that window of opportunity between ideas and interfaces.

And so with great powers to visualize comes great responsibility to communicate that vision. Use it wisely, folks.

Time to picture some closing credits… Cue the musical score, because I surely can’t come up with a tune.

Marc Sasinski

Marc Sasinski is a User Experience Lead with Citrix Online in Santa Barbara, California. His previous experience includes working for a User Research and Design consultancy in Chicago, Illinois with clients ranging from start-ups to Fortune 500 companies. Marc also holds an M.S. in Human-Computer Interaction from DePaul University.

4 comments on this article

  1. Pingback: Experience Modeling « jpreardon.com

  2. really enjoyed this post Marc!

  3. Pingback: Useful stuff w. 27 | Samir Fors

  4. Pingback: Riley Graham