Expressing UX Concepts Visually

May 7, 2012

It is all too easy to create UX deliverables that are not visually pleasing. But UX expertise encompasses Web design, graphic design, and branding, so why should we be satisfied with mediocre design in our deliverables? When we present our personas, sitemaps, user flows, wireframes, and other design deliverables to our clients and stakeholders, it is our duty and responsibility to create well-designed deliverables.

Words and Objects Are Not Enough

People visualize words differently. If people read, “The apple fell from the tree,” some might picture a red apple; others, a green apple. However, if we show them a green apple, it is obvious to everyone that we’re talking about a green apple. Words are not always sufficient to describe things accurately.

Champion Advertisement
Continue Reading…

People also visualize objects differently. If we show a drawing of a rectangle to a group of people, some will interpret it as just a rectangle, but others will see it as a brick. None of these interpretations is wrong. But if we show an actual brick to the same group of people, everyone will understand that it is a brick. The way we present even the simplest visuals affects people’s understanding.

Consequently, it is not right to expect our clients to understand a concept that we’ve outlined purely with boxes and arrows or words and objects.

Why Visuals Are Important

Our perception of the world is primarily visual. In fact, according to the article “Seeing Clearly: The Story of the Human Eye,” by Bradford G. Schleifer, we receive 80 percent of the information that enters our brain through our eyes. Thus, it is no surprise that visual communication lets people perceive concepts and ideas most easily. As UX professionals, we present concepts and ideas to our clients or other stakeholders every day. The deliverables through which we communicate these concepts and ideas should be well designed. Designers know that great visuals not only help people understand concepts, but also create empathy in their audience. If we fail to create empathy in our clients and stakeholders, we’ve lost the essence of our work.

A More Visual Approach to Communicating UX Concepts

I come from a creative design background, and it has always been frustrating to me to see UX deliverables that are not well designed. This is why I started to look for better ways of presenting UX deliverables. In my search for better ways of communicating concepts visually, I have come across some great ideas for presenting UX concepts from others—like the personas UserInsight and Jason Travis created, shown in Figures 1 and 2, respectively, and the user flow Hochschule Luzern created, shown in Figure 3.

Figure 1—A persona UserInsight created
A persona UserInsight created
Figure 2—A persona Jason Travis created
A persona Jason Travis created
Figure 3—A user flow Hochschule Luzern created
A user flow Hochschule Luzern created

While I was fascinated by all of these UX deliverables, some of them seemed to be too cluttered, while others lacked words. I wanted to create something new, better, and even more usable. Next, I’ll outline my ideas for presenting personas, sitemaps, user flows, and wireframes more visually. The aim of these UX deliverables is to help clients and stakeholders understand our work better. In fact, they may even help us to design better user experiences.

A Complex Speech-Bubble Persona

The idea for the speech-bubble persona shown in Figure 4 was to give Lucas more personality and, thus, create more empathy for him in stakeholders. I used speech bubbles to enable my persona to speak for itself. This persona reveals important information about Lucas, including his world view, what he is and isn’t looking for, his most recent and next experiences, what motivates and demotivates him.

Conversations give us good insights into the lives of people, so I created a conversation between my persona and a colleague. The work of Jason Travis compelled me take into account the fact that the items people possess reveal much information about them. So I added some things that Lucas possesses or would like to own or experience—for example, record albums, a house, a dog, a dream holiday. I also added some questions he might ask, because these can also reveal a lot about his personality. On my Web site, you can┬ásee a full-size image of this persona and read my article “Complex Speech Bubble Persona,” which describes in greater detail how I came up with this idea.

Figure 4—Lucas, a speech-bubble persona
Lucas, a speech-bubble persona

A Commented Sitemap

When I create a sitemap, there are lots of ideas and thoughts in my mind. I have a dialogue with myself about how a page might look, what information it should provide, and what visual elements I might use on the page. So I started writing these thoughts down, and doing this helped me to remember the reasons behind my decisions. Consequently, I thought it would be a great idea to share this information with my clients, so I created the commented sitemap shown in Figure 5. My Web site shows the full-size sitemap, and you can read my article “Commented Sitemap,” which describes the evolution of this idea.

Figure 5—A commented sitemap
A commented sitemap

A Speech-Bubble User Flow

Finally, I combined the persona and the sitemap that I’d created in a user flow, adding a bit of a personal touch to the user journey. A brief quotation from the persona and a scenario head the flow. These help to set the goal for the user journey and create its context. I again used speech bubbles, adding the persona’s thoughts at each point in the user journey. Figure 6 shows this user flow, which you can see in greater detail on my site. My article “Speech Bubble User Flow describes how I developed this deliverable concept.

Figure 6—A speech-bubble user flow
A speech-bubble user flow

A Big-Brother Prototype

The concept of a big-brother prototype arose out of the frustration of my forgetting to use my personas at the wireframing stage. The photo shown in Figure 7, which I saw in a great doctoral thesis titled “Personas and Scenarios in Use,” by Rósa Guõjónsdóttir, inspired this idea.

Figure 7—Personas observing a developer at work on a project deliverable
Personas observing a developer at work on a project deliverable

Photograph by Robert Jäschke

This photo made me want to put my personas everywhere. First, I printed them out and stuck them on the wall in front of my desk. But there was too great a distance between the world on my screen and the analog world, so I then realized that I had to put the personas into my prototypes—and so I did. My personas then became constant reminders of who I was creating my prototypes for. Figure 8 shows a big-brother prototype. You can see the complete prototype on my Web site. My article “Big Brother Prototype / Wireframes describes how this idea evolved.

Figure 8—A big-brother prototype
A big-brother prototype


I hope using these ideas will help you to make your UX deliverables more visual—and your concepts more readily understandable to your clients and stakeholders. I believe this greater understanding will help you to get buy-in for your concepts more quickly and easily. 

Freelance UX Designer

London, England, UK

Barnaby NagyOriginally from Hungary, Barnaby is a freelance UX designer who works in the UK. He is keen on making things well organized and simple for users and believes that common sense and empathy are the most important attributes of UX professionals. Barnaby creates personas, sitemaps, user flows—or user journeys—prototypes, wireframes, and functional specifications for his clients. He also conducts usability testing in an endeavor to understand the needs of users and ensure that his UX design solutions meet both business requirements and the usability requirements of target users. His clients’ domains include ecommerce, banking, PR, law, healthcare, marketing, sports, training, motor trade, and real estate. Barnaby enjoys finding solutions to complex design problems and helping his clients to understand how User Experience can benefit their business.  Read More

Other Articles on Communicating Design

New on UXmatters