User Flow

Insights

Development insights, client advice and news from Go Tripod

We&#8217;re in the early days of planning out a web design-and-build project with a new client. A key part of this process is the creation of a site map.
<h3>The Site Map</h3>
In its simplest form, a site map is a pictorial representation of the pages required of a website. With smaller websites this list of pages is easy to define and it&#8217;s not much more of a stretch to group them into a sensible order.
With larger web projects this task can be much more involved and producing a sensible site map relies on a host of other disciplines (like information architecture and user experience design) but the requirements of the job at hand fall mostly into the former camp.
It&#8217;s worth demonstrating that a sensible site map doesn&#8217;t merely need to show a breakdown of a website&#8217;s pages. Instead it should also show how they fit together, where multiple pages might be grouped via dynamic data sources and what kind of elements might be common to every page.
The trick is fitting all of this information into a straight forward infographic that stakeholders can immediately understand (and preferably print).
Enter our case in point (click to expand):
<a href="https://content.gotripod.com/images/2018/04/site-map.png" data-size="1262x883"><img loading="lazy" class="alignnone wp-image-274 size-full" src="https://content.gotripod.com/images/2018/04/site-map.png" alt="Example website site map" width="1262" height="883" srcset="https://content.gotripod.com/wp-content/uploads/2018/04/site-map.png 1262w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-300x210.png 300w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-768x537.png 768w, https://content.gotripod.com/wp-content/uploads/2018/04/site-map-1024x716.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></a>
Note that I have used the homepage to define the site-wide header and footer information as well as the main navigation options. It is clear each navigation option represents a top tier page and it is immediately obvious which option includes additional features, pages or sub-sections.
(Strictly speaking the header and footer should be represented on every page, rather than the homepage alone, but to harness the power of an infographic one must expect some inferral ability on the part of our audience.)
<h3>The User Flow Diagram</h3>
User flow diagrams differ somewhat from site maps in so far as they attempt to demonstrate how a user interacts with a website rather than how the website&#8217;s contents are hierarchically broken down.
Naturally there is some crossover between these two approaches and again the complexity of a user flow diagram will depend on the complexity of the website (or process) concerned.
One way to think of these things is that whilst both diagrams might utilise boxes and arrows, the user flow diagram is more likely to take the shape of a flow chart.
With our current project, there was a loosely defined need for a restricted client area that would allow logged in users to access (mostly product based) information unavailable to regular visitors.
Whereas our client had been quite clear about what content was required of the front-end, defining this &#8216;restricted area&#8217; proved much more elusive. Instead we were given a long list of bullet point thoughts and ideas regarding things they might like.
As it happens, attempting to formalise these loosely defined requirements suits the user flow approach better than the site map approach.
And here is the case in point (click to expand):
<a href="https://content.gotripod.com/images/2018/04/user-flow-diagram.png" data-size="1262x883"><img loading="lazy" class="alignnone wp-image-275 size-full" src="https://content.gotripod.com/images/2018/04/user-flow-diagram.png" alt="Example website user flow diagram" width="1262" height="883" srcset="https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram.png 1262w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-300x210.png 300w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-768x537.png 768w, https://content.gotripod.com/wp-content/uploads/2018/04/user-flow-diagram-1024x716.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></a>
Note that this diagram demonstrates how a user might interact with the website and that the flow, in this instance, is shown from left to right.
Starting with the login process, the customer has a number of options; accessing important information available from their dashboard, amending their account details, or drilling down into specific product information.
Again, stakeholders can immediately make sense of what&#8217;s been proposed. This diagram should, after all, reflect a sensible interpretation of the client&#8217;s hastily compiled requirement list.
But also, importantly, it serves as an early conceptual blueprint that encourages client feedback. The flow diagram, once finalised, will additionally help formalise the development process.
In conclusion &#8211; a collection of carefully thought out infographics can serve as a powerful tool in terms of both defining a new project and improving an existing website or set of software processes.
&nbsp;

Project planning with site maps and user flow diagrams

Software design is a complicated business. To illustrate this point, here is a user flow diagram from a previous project of ours. This level of detail is useful for a number of reasons; it gives the client a real feel for the end product before the need for any coding, it aids in the design process and it helps to formalise pre-development requirements.
<img loading="lazy" class="aligncenter wp-image-243 size-full" src="https://content.gotripod.com/images/2018/03/userflow-01b.jpg" alt="User flow example image" width="738" height="932" srcset="https://content.gotripod.com/wp-content/uploads/2018/03/userflow-01b.jpg 738w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-01b-238x300.jpg 238w" sizes="(max-width: 738px) 100vw, 738px" />
Complications can arise when, down the line, it becomes apparent that a functional change is necessary. With all but the most menial of software, this scenario is inevitable.
By practising agile software development we allow for multiple changes during the design and build processes. These changes still need defining, but needn’t derail a project or upset its budget. In the example below what had been specified as an ‘About page’ within the app later became an ‘About section’. (Click the image to enlarge.)
<a href="https://content.gotripod.com/images/2018/03/userflow-02.jpg" data-size="1463x994"><img loading="lazy" class="aligncenter wp-image-244 size-full" src="https://content.gotripod.com/images/2018/03/userflow-02.jpg" alt="User flow change request example image" width="1463" height="994" srcset="https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02.jpg 1463w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-300x204.jpg 300w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-768x522.jpg 768w, https://content.gotripod.com/wp-content/uploads/2018/03/userflow-02-1024x696.jpg 1024w" sizes="(max-width: 1463px) 100vw, 1463px" /></a>
We do our utmost to clearly define our software at the start of a project, but we have a well defined process for managing changes as and when the need arises. This enables us to crack on with development without getting bogged down in specification minutiae.

Insights

Project planning with site maps and user flow diagrams

Managing change requests within the software development process

Got an idea for a project?