MODULE 3 – User Journeys and Flowcharts with Prof. Patrick Hogan
As we continue our journey into the practice of ideation and prototyping, we move from developing an information architecture, to planning functionality for our project. One indispensable tool we have for visually planning a process is a flowchart. As readers of this blog may recall from our data visualization history, charts have been an effective communication tool since the 1850’s. Flowcharts, referred to early on as “process charts”, were first used in industrial engineering circles as a means to communicate, plan and solve problems within complex mechanical systems. It is just easier to see relationships between parts of a whole with simple shapes and arrows. In 1921, Frank and Lillian Gilbreth presented the first structured method for documenting process flow, the “flow process chart” to members of the American Society of Mechanical Engineers (ASME) in a presentation titled “Process Charts: First Steps in Finding the One Best Way to do Work“.
Later, in the 1940’s flow charts were used by IBM in the development of programming and computers. Thirty years later, into the 1970s, flow charts were standardized by programmers in addressing and describing programming functions and applications. It is not surprising, that flow charts are now used widely for a variety of business needs and are a key part of the methods designers and developers use everyday to build mobile apps and online services. Our modern mobile apps do many things, every single one of those functions, making our lives easier, probably started out as a printed stack of flowcharts envisioning how users could successfully complete their tasks. As my son would say… “Whhaat?! Das facts!”
Beautiful ideas, basic supplies.
What do you need for a flowchart? Turns out, you don’t need much. If you can draw a circle, square, diamond and an arrow you are halfway there. Get a piece of paper and a pen. You are all set. The most important thing about a flowchart is that you need to make it clear. Remember, you are “finding the one best way”, so when it comes to interactive planning it is really an exercise in logic. Each step in the chain leads to the next until an action or decision is needed. At that point (usually represented by a diamond) the path splits and becomes a binary choice such as “true or false” or “yes and no”. Since it is one way, there is a start and end point with what I describe as a “closed circuit” in between. Notice that engineering DNA built into the flow chart? The closed circuit means that all possible actions or decisions within that flow must lead to an outcome (end point). No loose ends or dead ends. Over the years, some standard basic shapes have taken on universal agreed meanings in flowcharts. Here they are:
Rounded Rectangles = Start/End points
Rectangles = Process Information
Diamonds = Decisions
Best practices and tips
- Use a Key: One of the best practices of using flowcharts is to have a flowchart key describing the symbols that are used. There are standard symbols that most flowcharts use.
- Direction is important. For the most part, charts should flow left-to-right or top-to-bottom. Eyes follow this path naturally, making it easier for people looking at the flowchart to understand them.
- Keep them on one page when possible. Charts are easier to digest when they’re simple and kept to one page. There might be times when you need more than one page for complex processes. Link pages by referring to an additional process that can be reviewed or “drill down” at a junction point wherever possible.
- Use consistent sizing and spacing because uniform design makes them easier to read and follow.
- Include a chart key. Because these symbols are standardized, they make it easier to understand the flowchart. Also include a key so that it’s clear to people reading it what you’re saying.
- Limit your colors. It’s tempting to want to use as many colors as possible to show a path or highlight certain information. But the truth is, the fewer colors you use, the easier it is to follow the flow of the chart.
In any application, you have to be clear on how you want people to use it. When they log in, what steps do you expect customers to take? Do you want them to access their profile, upload content or interact with other users? Use a flowchart to outline each option. This approach also shows you where people drop off along the customer journey. Are you making assumptions that don’t resonate with customers? Your flowchart will show it if you are.
Depending on how complex your product is, you can use your flowchart to go into as much detail as possible. Make adjustments and revisit it to see whether users are following the sequence you’ve laid out or if they’ve created new paths that you should consider incorporating. This week we took our CIVIC app planning process a little further and I realized that I first needed to have a basic or preliminary IA in place before I could even start on my flow charts. Once I had my user needs and scenarios outlined I started mapping out the tasks. Working on the flow charts really improved and informed my initial IA. I learned that flowcharts can be an iterative tool and cannot be something done in isolation from other project planning. Call me crazy… but depending on what kind of thinker you are, or where an idea originates, it may be entirely possible to have fully fleshed out function flowcharts before having a completed site map or information architecture. Certainly the two go hand in hand.
Flowcharts in Ideation & Planning
Flowcharts are great for presenting ideas. A cross-functional flowchart works here because it works a little like a project road map. It lays out paths you your users have to follow in order for the project to keep moving forward. This way, you know what to expect and can plan things like email, sales and marketing campaigns in advance.
Share flowcharts with the right teams. Any teams that are affected by the information in the flowchart need to know where to find it. It may be helpful to set up a documentation process that ensures that the right people see the charts. This can be specific teams or the entire company. Keep in mind, if all stakeholders have access, offer non-technical reviewers high-level details on what’s included, so that everyone viewing the charts fully understands them.
Flowcharts with “swim lanes” not only map a process, but define roles and allow the development team see their product or service in relation to other business processes, parts of the company, user behaviors or roles.
A flowchart can reveal potential weaknesses early in the planning process. For example, if you sell a physical product, it might make sense to check with inventory first before sending an order to sales. By shuffling the process around early, you make sure that you provide the best customer experience and your workflow makes the most sense for your business.
Below is an example from a Sephora email campaign plan where a flow chart is used to describe what actions trigger different types of emails, when you’ll send email and even who you’ll send emails to. This really helps a marketing manager, designer and developer all clearly see what role they play in the process and what the expected outcome should be. Literally getting everyone on the same page is a formula for success.
My ‘CIVIC” App Progress
My mobile app idea was approved and I am working towards fleshing it out further. As you can see from this post, the focus is on flowcharts. So I created some provisional user personas, scenarios and imagined needs based on the earlier role playing work. Storytelling goes a long way in helping an audience see a proposal for a mobile app and what needs it would serve in context. Meet Carol, Angelica and Mark, all future users of the CIVIC mobile app and their potential needs. User flows do not require full persona development, just a basic description of the goal and a basic scenario the in which the user may use the product. These are included in the full .pdf download below.
Before moving forward with task flow charts, I put together a preliminary app IA. This helped me visualize some of the basic navigation and sections of the app and how they would relate to one another before building pathways for my users.
Once that was done, I made the following flow charts to map out how my users would try to accomplish their individual tasks within the CIVIC app.
I also got a chance to work on some color palettes and logo concepts included in the .pdf and header image.
Resources & References
Flowchart History- Wikipedia. (2019, July 20). Retrieved from https://en.wikipedia.org/wiki/Flowchart#History
Understanding Flowcharts – By Justin and Tony. (2011, April 24). Retrieved from http://www.odec.ca/projects/2009/xing9t2/hist.htm
Flowchart Tutorial ( Complete Flowchart Guide with Examples ). (2017, July 11). Retrieved from https://creately.com/blog/diagrams/flowchart-guide-flowchart-tutorial/#FlowchartMistakes
MindToolsVideos. (2015, April 22). How to Use Flow Charts to Show how Processes Work. Youtube. Retrieved from https://www.youtube.com/watch?time_continue=154&v=ba5duMARdMc
Flowchart Guidelines to Avoid 15 Common Flowchart Mistakes. (2011, May 06). Retrieved from https://creately.com/blog/diagrams/part-1-15-mistakes-you-would-unintentionally-make-with-flowcharts
PART 2: 15 mistakes you would unintentionally make with flowcharts – Creately Blog. (2011, May 10). Retrieved from https://creately.com/blog/diagrams/part-2-15-mistakes-you-would-unintentionally-make-with-flowcharts
Basic Flow Chart Symbols:
Flowchart-Symbols1.png (401×402). (2018, January 13). Retrieved from https://d3n817fwly711g.cloudfront.net/uploads/2011/11/Flowchart-Symbols1.png
The Comprehensive Guide to Flowcharts | Process Flow Diagrams. (2019, July 22). Retrieved from https://www.gliffy.com/blog/the-comprehensive-guide-to-flowcharts
Sephora Email Promotion Trigger Flow Chart
image (12).png (1127×964). (2017, November 03). Retrieved from https://www.gliffy.com/hubfs/image%20(12).png
25 Email Personalization Stats Every Marketer Should Know. (2019, July 22). Retrieved from https://www.campaignmonitor.com/blog/email-marketing/2019/07/15-email-personalization-stats-might-surprise-you
Brown, D. M. (2010). Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter). New Riders. Retrieved from
Bentley, F., & Barrett, E. (2012). Building Mobile Experiences (The MIT Press). The MIT Press. Retrieved from
Recent Posts from the Graduate Series:
- LoFi Prototypes: Rubber meets the road. - MODULE 3 - Low Fidelity Prototyping with Prof. Patrick Hogan Low fidelity prototyping is about ideas. Low fidelity means that…
- About IA - MODULE 2 - Information Architecture with Prof. Patrick Hogan Every good UX Designer is also a competent information architect. Information…
- Ideation Techniques - MODULE 1 - Ideation, Prototyping and Testing with Prof. Patrick Hogan Ideas are the most powerful things in human existence.…
- The Case for Space: DataViz Final Project - STORYTELLING THROUGH VISUALIZATIONS Sourcing Data My final project and very first interactive data story will be about the long term…
- Be Tufte on Bull! - MODULE 5 - Persuasion Versus Deception Persuasion In our last blog post we explored some best practices and common mistakes…
- Dear Data Project 2 - JUST GIVE ME A UNIFORM! I am getting more comfortable with manually creating data and realize that software programs actually…