Which diagrams when?


Diagrams are incredibly valuable as methods of communication. Through visual language and spatial representation, diagrams give form to concepts and ideas.

Diagram: (definition) a simplified drawing showing the appearance, structure, or workings of something; a schematic representation.

Mental model: (definition) an explanation of someone’s thought process about how something works.

At DockYard, we use various diagrams at different stages of the design process. Each type documents and captures different aspects of the design research process. It is valuable to know when in the process these diagrams can be used, as they can support conversations between different stakeholders and help to align understanding.

The following case study utilizes a few of the diagrams we used here at DockYard. Each of these examples highlights the type of diagram and when in the design process they should be used. (We use OmniGraffle to build these diagrams.)

###Case Study: OutdoorKidz.com

OurdoorKidz.com (fictional!) is a new online store that specializes in seasonal outdoor gear and activites for kids. We’ve been hired to design and build the customer facing website, which houses the entire inventory of products and allows customers to purchase gear directly from the website.

Target User: Parents with young kids who are looking for outdoor gear and activities for kids.

Goal: Design and build an online store that allows target audience to search for, compare, and purchase items.

####1. Journey Map - Design Research

A journey map is diagram in the form of a timeline, which identifies a user’s arrival to and experience surrounding the use of the product. Journey maps are often developed from a user persona based on the target user. They help to understand the context in which someone might interact with the product: why they seek it out, where they interact with it, and what they hope to gain from it. Understanding the use case informs design decisions early on, framing the major actions the user might want to take (features) within the product flow.

Journey Map Journey Map PDF

####2. User Flow - Product Development

A user flow is a diagram of the high level product experience, used to frame the actions taken within the product itself. They are generated from the use case (journey map), allowing us to break down the step by step interactions that must take place for the user to accomplish their goal.

User flows become the basis for sketching and wireframing major areas of the interface. The navigation, framed around the user experience, informs the information architecture and interface design. Through wireframing, actual content is placed in context and functionalities are incorporated to support calls to action.

User Flow User Flow PDF

####3. Master Product Flow - Product Development

When we build complex interfaces, they often have multiple use cases. This master user flow connects the customer facing interface, OutdoorKidz.com online store, to the inventory management system for the employees of OutdoorKidz.com. The products overlap where orders come in and invetory is tracked. Connecting the two separate user flows can show the points where the two systems overlap. This can help to ensure the systems are built efficiently and speak to one another.

Product Flow Product Flow PDF

Knowing when and how to incorporate these diagrams can be very valuable to your process. Diagrams are also good for documentation and tracking decisions throughout the process. They support discussion around problem solving, and can clarify that all stakeholders in the conversation share a common understanding of the solution.

Here are some of my favorite resources about diagrams and mental models.


101 Design Methods - Vjay Kumar

100 Diagrams that Changed the World - Scott Christianson

Models of Design - Hugh Dubberly


Stay in the Know

Get the latest news and insights on Elixir, Phoenix, machine learning, product strategy, and more—delivered straight to your inbox.

Narwin holding a press release sheet while opening the DockYard brand kit box