5 types of documents you’d never imagine you can create with Overflow

User flow diagramming tools are often considered niche products, mostly serving the needs of UX/UI and product design professionals. However, diagramming as a concept can be used in multiple ways, as long as there is imagination and creativity involved.

As a specialized diagramming tool, Overflow gives users the capability to create interactive and playable documents, be it in the form of a traditional user flow, a flowchart, or anything else that showcases a sequence or connections between different elements. That makes it ideal for creating documents that are outside the box, be it for marketing, documentation, presentation, and any other purpose. In this article, we will highlight five innovative uses of Overflow to get your creative juices flowing.

Competition qualification table

Our team put this together during the Qatar World Cup a few months back, however the format could also work for any other type of competition with a groups and sudden elimination qualification system.

In this case visuals were mostly made beforehand with Sketch and imported with the Overflow plugin for Sketch. Then, connectors were added in Overflow to give the table interactivity. Nevertheless, this type of table can also be made fully inside Overflow by drawing shapes as backgrounds and importing ready-cut flag avatars from your device.

Sitemap

A sitemap is the visualization of all the pages of a website under a specific domain (“Homepage” or simply “Home”). Sitemaps can take many forms, depending on the website’s complexity and the number of available pages.

The above example was made by our team back in 2021 in an effort to visualize the layout of Overflow’s homepage back then. Although it’s not reflecting the current reality of the page, it still is a great example of how to group pages and how to use color-coding to make it easier for any audience to follow. Something that we didn’t do here but is recommended is to add hyperlinks to each of the pages on each of the bubbles, using Overflow’s ‘Link to website’ feature.

Family tree

People have been making family trees for centuries. The practice seemed to gain new momentum after DNA tests became readily available, helping people find new relatives and connections in remote parts of the world. Since a family tree’s size can vary depending on the family and how much information is known at the time of its creation, the added interactivity offered by Overflow helps make navigation easier.

We decided to geek out and explore the complex relationships between the characters of the worldwide phenomenon Game of Thrones. Notice how we used different connector styles and colors to mark connections between different families, as well as different types of relationships. Obviously we left some characters out for convenience but the overall result looks pretty neat and can work as a newbie’s guideline to the series.

TV show elimination table

Reality TV has been around for over 25 years already and a huge amount of new shows are popping up annually. With rules becoming more and more complex every season, it’s often difficult for fans to visualize the elimination process on fan sites, blogs, forums, and the like.

In the above example, we created an elimination table for the first season of Survivor, filmed in Borneo back in 2000. We added avatars for each player as a visual key to trigger people’s memory and tried to show the elimination process while there were two teams in the game, versus after the tribe merge halfway through the show.

Organizational chart

Organizational charts are a very common way to showcase the existing structure of a company, institution, or organization. Their main aim is to visualize reporting lines within the organization and to help companies understand how employees are distributed among different teams. Although it might sound simple in theory, in big international companies with a huge amount of employees it’s actually difficult to understand which teams are over or understaffed. Organizational charts help put things into perspective and make better-informed decisions.

The above is the organizational chart of an imaginary company we put together. We thought it’d be better to include an avatar picture for each employee, except just their name and title, although that’s totally optional. We also preferred to use a different color code for each seniority level to make it visually easier to navigate through the graph. Although this particular company is small, this would really make a difference and help the audience understand the structure of a bigger company better.

Have you used Overflow to create anything other than user flow diagrams? Feel free to share your ideas by dropping a message below or by tagging @overflowapp on Twitter, Facebook, or Instagram!

Article written and curated by Constantinos Vitoratos.