Flow is a concept identified by psychologist Mihaly Csikszentmihalyi. According to Csikszentmihalyi, flow is “a state in which people are so involved in an activity that nothing else seems to matter; the experience is so enjoyable that people will continue to do it even at great cost, for the sheer sake of doing it.” Flow happens when an individual is highly focused or in the zone. In User Experience design, flows help designers foresee their user’s cognitive patterns. This helps designers develop products that foster the state of flow.
What are User Flows?
In UX, User flows, sometimes called UX flows or flowcharts, are diagrams depicting the path a user follows when using a product. Users can take numerous pathways when utilizing a product. Flows display possible routes a user can take while using a website or application from beginning to end.
The user flow lays out the user’s movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction. – Camren Browne, CareerFoundry
How are User Flows Useful?
User flows detail each step in a user’s journey to achieving a goal. A flowchart “begins with the consumer’s entry point on the product, like an onboarding screen or homepage, and ends with the final action or outcome, like purchasing a product or signing up for an account.” Documenting this process within a visual representation assists designers, allowing them to observe, understand, and evaluate the user’s experience. Designers can then update the flow and improve the experience.
Flowcharts benefit product designers as well as product users. They consider the user, ensuring that the user’s journey is straightforward and their needs are met. If the product meets the user’s needs effectively and the experience is satisfactory, the user will continue to utilize the product.
Creating a Flowchart
Although flowcharts are a useful UX tool, individuals within many fields and professions utilize flowcharts to communicate the steps and decisions needed to perform a process. Flowcharts are widely used and recognized. Thankfully, there are many flowchart resources online, including guides, tutorials, templates, and how-tos. Following are a few tips to make use of before you jump into creating a flowchart.
User Flow Diagram Tips
Before creating a user flow diagram, start with these steps.
- Determine the purpose and objective: What will your diagram depict? Which user path do you want to explore? What insight are you hoping to gain? Who will benefit from viewing this diagram?
- Assess user and user needs: What kind of user would utilize your product? What goal is your user seeking to achieve? What problem do they need to be solved? Are there specific features that are important to them? How will your product make their experience seamless and convenient?
- Create an outline: Draft a list of steps within your flow diagram from beginning to end. Start with an entry point, followed by steps to completion. Will the user have any decision points? If so, what are the results of each decision? Conclude your outline with a final interaction or endpoint.
- Define your flowchart elements: All flowcharts utilize shapes to depict starting points, endpoints, decisions, and more. They also utilize arrows to depict the direction of the process. There are many standard symbols incorporated in flow diagrams that communicate varying meanings. Ultimately, the diagram designer determines what elements to use, creating a key so viewers can easily understand what is taking place within each step.
My Flowchart Exercise
I recently wrote about Information Architecture (IA), completing an analysis exercise of the current structure of the website of the City Baltimore. I created a site map for the city’s current IA, followed by a site map proposing a new structure and flow.
Simply put, Information Architecture is the science of organizing and structuring content in a logical user-friendly way. IA focuses on the organization of information within digital products, such as applications, software, and websites.
My next task involved proposing a companion app for the website. Here is the IA structure I created for the app.
This week, I named the app Baltimorean and completed a flowchart exercise to observe how three Baltimore residents might journey through the app to access specific resources. You can view my complete exercise below. In the meantime, here is my process for one of my users, Savannah.
Baltimorean Overview
Purpose
This app would focus on the services and resources offered by the City of Baltimore. The goal is to keep residents in the loop, providing them with easy access to the city’s latest news and upcoming events. The app would also allow residents to access the city’s directory, submit and review service requests, and make online payments conveniently.
Functions
- Make online payments
- View Baltimore’s most recent news stories
- Find local event information
- Submit or view the status of a service request
- Gain more information about the Mayor
- Connect with the city through social media
- View directory information concerning each
- branch of the city’s government
Audience and Needs
Target Audience
Baltimorean’s target audience would include all Baltimore residents, especially those familiar with the city website. Residents who frequently visit Baltimore’s site would benefit from an app that gives them easy access to information and resources without having to peruse the city’s site.
User Needs
Baltimorean will meet the following resident needs:
- Residents will be more informed about city happenings
- Residents will feel more connected with their community and the city
- Residents will browse relevant city-related content in a more manageable way
- Residents will be able to make payments and submit requests more conveniently
Savannah’s Story and Scenario
Story
As a local artist, I want to find upcoming art-related events so that I can network and connect with other creative professionals in my city.
Scenario
Savannah is a recent graduate and a local artist seeking a community. She wants to become more connected to Baltimore city’s art community. She is interested in upcoming art events in the city in which she can hopefully share her work and network with other local creative professionals. Savannah wants to get information about all of Baltimore’s upcoming art events and exhibitions. She desires to find these events quickly and conveniently, register, and add them to her calendar. She needs to stay informed because attending these events will result in many things. Savannah will be inspired and encouraged, and hopefully, she will develop connections and find opportunities to showcase her work.
Flow Chart Elements
Here are the elements I used to represent steps within a user’s process. Additionally, I utilized dashed arrows to indicate the flow direction.
- Rounded Rectangle: Starting point and endpoint
- Hexagon: Decision point
- Rectangle: Action point
Savannah’s User Flow Diagram
Final Thoughts
Creating user flows for the Baltimorean app granted a closer look into the app pages and functionalities. My flowcharts served as testing methods, helping me examine the strength of the IA I developed for the app. Baltimorean is intended to assist city residents with locating and utilizing the city’s resources and services promptly and conveniently. Thanks to my user flow diagrams, I can revisit and revamp Baltimorean’s IA to better meet my user’s needs and improve their experiences with the app.
User flow diagrams are practical tools that designers use to challenge and assess the information architecture and interface of an application or website. These diagrams communicate every step in a process or task, helping individuals envision what it takes to complete a process and strategize for improvements.
Sola's Thoughts 