Defining the brand experience through the user experience roadmap A look into user flow charts
Thu, Mar 08, 18
6 minute read

Defining the brand experience through the user experience roadmap A look into user flow charts

Recently, I announced to the members of the community that I’m building something pretty intense for them in the background. Both the front end and the back end of the website are in dire need of an update, so my plan is to get a more permanent design solution for the site.

Originally posted on Compass of Design Original article link

Darian Rosebrook's avatar— by Darian Rosebrook

Recently, I announced to the members of the community that I’m building something pretty intense for them in the background. Both the front end and the back end of the website are in dire need of an update, so my plan is to get a more permanent design solution for the site.

Though I’m a brand identity designer by day, I still build and maintain these websites for the things that I do.

With a significant feature upgrade to the community coming, I needed to plan it out and start getting my ideas down.

I try never to jump straight into designing the user interface (UI) of my websites without first taking some of the crucial steps that user experience designers use when making decisions on how to lay out the site.

To get a good feel for where people need to go when using your site, you should be building a user experience map.

Building the user experience map

The user experience map is a collection of a few things. It’s built from an understanding of where people are in the buyer’s journey, and where the strategy with content is going to fit into that journey.

Though it’s named “Buyer’s Journey” it doesn’t just belong to e-commerce or retail marketing strategy. Some people call this the purchase funnel, or marketing funnel.

More importantly, what we are building is better categorized as a map for people on this brand journey. It will accurately relate to where people came from, what is expected should they move further down the pages, what common actions they should take, with how and where the journey continues as the person makes decisions on the buyer’s journey.

So let’s talk first about the steps of the funnel. We’ll try to piece together what we know of it to be able to accurately build our map.

The [Brand] Journey

As someone ventures further into their first experience with a brand we end up going through several stages before the customer becomes an advocate for the company.


The method of how your customer becomes aware of your brand is endless. However, if you have the methods of being able to tell where they are coming from, you may have an opportunity to guide them into the next stage.


The potential customer then based on what they learned by becoming aware of the brand goes into research mode to find more info about what it is that your brand does, what it stands for, or what it offers. This doesn’t have to pertain to products specifically.


This person then makes a decision engages with the brand through it’s location in order to start the conversion.


From engagement, a completed transaction or exchange then converts this person from a prospect to a customer.

Post Purchase / Consumption

Once they have what they came for, the interactions after can really sell the person on the brand as a whole. That’s interactions regarding servicing, insurance, repeat orders, promotion, loyalty rewards, etc.

Brand Advocacy

Based off the final interactions and the overall satisfaction of the exchanges, your customer moves from consumer to advocate of the brand.

Mapping the journey to the brand goals

The entire reason someone goes on a journey is to be able to accomplish a goal. We go to the grocery store to buy essentials for our home or health. We go to our friend’s house to connect and bond over stove-top queso dip and game-day nachos. We open our writing app to complete a blog post for next Thursday’s schedule.

Understanding these decision points through this path will help us choose the right flow of how somebody might expect to use whatever you are making.

When creating the paths that people take, it’s easiest to write this out on paper or use a wire-framing kit. (I have mine available down below)

These maps that you create should start out with a very non-visual process, mainly mapping the goals to the things a person would expect to see on the page to accomplish it.

In my image above that I had made, I use simple click through and scroll structures that help us get a clearer picture of how we can connect pages to goals and goals to pages.

After getting an accurate idea of what needs to be designed, we can then start looking at UI visuals.

Starting the visual map

Starting the visual representation of the content strategy requires a little attention to detail here.

Though we’re not actually designing what the final design will be, we can get a fairly accurate and mappable outline for the UI of our design that satisfies the content and user goals.

Remember that these tiles here are to be used as reference, not as the hard layout of your end product.

Some may argue that having this type of visual is actually very restricting to the creative process, however, I feel like this makes your work just a little faster because you’re not trying to decide what color or size to make something. Instead, your goal is to pick some screen that would help you more accurately fulfill the goal using what one might expect at that point in the map.

This is why I chose maps as the best analogy for this. If you’ve ever gotten a map at a zoo, it doesn’t give the exact aerial photograph of what the zoo’s layout is, it gives you the easiest understanding of what to expect as you go through the park.

I like to start my UI maps on paper first, however with the digital file that I’ve made, it’s just as easy to grab relative UI tiles and place them on the map themselves.

Routing the connections

With my digital files, I like to explain what might be seen when somebody goes through the site by scrolling or clicking on a page and what is the most likely course of action we want them to take by showing that on screen.

Though the actual content isn’t being designed here, it gives life to some common conventions that we see and can therefore get a better picture of how we’re solving a specific goal along the way of the journey.

If someone wants to scroll through to see more resources, I notate that with up and down arrows.

If someone wants to open a link to check the comments, I have an open circle that turns into an arrow to denote that something was clicked on to get there. Usually that means that the result of this lives on another page.

At the end of collecting these tiles, you end up with the entire picture of what you’re building much faster than trying to design and code everything first and looking at it.

As you can see, it helps you understand what actions you want people to take

most by screen.

And if you want to use this in some of your future projects, I’ve made my source files available here.

[📐 UX userflow and wireframe kit


This is a collection of UI tiles and a related layout template for the userflow that was made for Adobe Illustrator

Anyone who buys it will have access to any updates I make to it in the future that will make it easier to use and adding more UI/UX thumbnails.

I know that this is just a small piece of the puzzle and a quick look into making your end product that much more effective as a designer. However, I hope that you’re able to start focusing more on accomplishing goals before trying to make something look pretty.

A design can look as beautiful as what you see passed in Dribbble or Behance all the time, but if it doesn’t function to help someone reach their end goal, you’re essentially creating web art.

If you want me to expand on any of the topics for you, just send me a reply and I’d be happy to go into more depth on what I just shared here today.


Darian Rosebrook, Compass of Design

Originally posted on Compass of Design on Mar 08, 2018

Let's Get in Contact

* All Fields Required

Thank you!

I'll review the responses here and respond to you as soon as I can. Thanks!