section shadow
section shadow

We recently introduced wire flows to our design process at webkeyz as a combination of two popular deliverables: wireframes and flowcharts.

Wireframes are the most popular deliverable for UX design, used to document the layout for a website or an app. Alternatively, flowcharts are used to document complex workflows and user tasks. We were trying to find a way to better illustrate interactions within mobile or web apps that don’t have many uniquepages, but rather have a lot of interactions within pages. So, we decided to introduce wireflows to our process.

According to NNG, wireflows are defined as “a design-specification format that combines wireframe-style pagelayout designs with a simplified flowchart-like way of representing interactions”.

Why Wireflows Work Better for Us

They help us think in terms of flows not screens. With wireflows, we don’t work screen by screen but rather with the full flow. For example, imagine a ticket reservation flow where the goal of the user is to reserve a ticket; we think of the full flow and try to identify the best way for our user to complete the action.

No Missing Scenarios

Wireflows insure that no scenarios are missed, because the full flow is laid out in front of the UX designer. This makes it easier to visualize and cover all use cases.

Better Interactions

A wireflow’s main purpose is to document interactions: feedback, changes in layout, confirmations, or popups.

Better Communication

UX design is about the whole experience, not separate screens. Wireflows communicate designs more clearly to developers and visual designers.

When is it Better to Use Wireflows?

Wireflows are not the best tool to use in every project. In some cases, they could prove to be time-consuming and not as efficient as wireframes.

Wireflows are useful in projects with complex interactions and a small number of unique pages, or website sections containing a lot of interactions.

However, they are not as useful for static websites or apps where clicking or tapping a button or link will navigate to another static page. Since there will be minimal interactions to map, wireframes are better suited for these cases.

Wireflow Components

In order to create a successful wireflow you need to:

  1. Identify the goal of your flow e.g ‘buy a new laptop’ or ‘search for a recipe’. Your goal will be to design every screen and interaction needed for achieving this goal.
  2. Create an entry page where the user will begin the process in order to achieve their goal.
  3. Continue creating screens and the connections between them until you reach the screen where the goal is achieved.
  4. Go back and think of possible alternative paths or shortcuts for the user to achieve their goal (the final destination must always be the final screen), and start designing connections and screens for these paths.
  5. Think of scenarios that could happen during the journey (errors, disconnected internet, empty fields) and design what will happen in these cases.
section shadow
section shadow

“The value of an idea lies in
the using of it”

Thomas Edison