Speech Bubble User Flow

I have never liked the way user flows were done. This is speaking about my personality quite much – always in search of something better and looking for opportunities to innovate. Anyway, most user flows seemed to me too clunky or they just simply freaked me out. I thought to myself there had to be a better way.

Concerns

My concerns with these user journeys were:

• Will clients understand these user flows?
• Will clients understand that we are trying to show how their users will navigate their websites?
• Will they have patience to read these kind of electric-panel-like charts?
• How will clients be able to visualise the pages?
• Will they have empathy for the user when trying to understand these diagrams?

Search for a better solution

So I started to search for a better way of doing user journeys/user flows. And these are the types I found:

1

2

No 1 proved that there is a way to visualise the pages which a user’s journey touches. However, it looked like a long process to create this type of user flow. First off, you need to create your wireframes in order to be able to insert them into the user flow. Not a great idea. But the visual concept fascinated me.

No2, this did not entertain the idea of showing thumbnails of pages compared to No 1, but it displays the user’s activity, a little profile picture and a timeline. I thought the timeline was a pretty good idea but it was hard to read. I also thought that the profile picture was a good idea, however, it looked too abstract.

Talking persona – the idea

What if my personas could talk… then they would tell me what they think about my sitemap. Sitemap + what the user thinks sparkled the bulb and I was finding myself putting speech bubbles next to my sitemap. The bubble wasn’t a new concept as I have used the idea with my commented sitemap. Then I added a small profile photo of my persona next to the speech bubble, time stamp above the bubble, arrows for the journey, a scenario and a summary of what the persona wants to do on the website. This did the job and I think the results were outstanding.

The idea

See the screenshot below or view the demo here.

Step by step process

I assume you have your personas and sitemap ready. First, create a new page in axure and copy in your sitemap. Then create a speech bubble. You can do this by putting together a rounded rectangle and a triangle. Then add a copy of your persona’s profile picture, add a time stamp and a number into the corner of the bubble. Now you can create the journey. Use the connector mode (F11) and connect the pages. You can style the connectors to make them look like arrows. Now add a full circle with a number to each journey points. This will ensure that your clients can associate the bubbles with the steps of the journey. Once you are done with this you can add the top header as I did. Add your persona, an “I want…” statement and a scenario. That’s it. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

Using this type of user journey will not only benefit your clients to see more clearly what you mean but it will help them to continue feeling the empathy you created with your personas. They will be able to place the user flow into a real life situation by virtue of the scenario and the time stamped speech bubbles. Clicking on the pages will direct them to your prototype. How great is that!