Sample project artefact cards used in our design production process.
Sample project artefact cards used in our design production process.

These are questions that have been bugging me and our team and they have been the subject of many articles and debates. As a UX dude, I generally vote in favour of such an artefact. At the same time, I have met opposition from co-workers. That’s why we have tackled this issue at our agency Hinderling Volkart.

An easy answer to the initial questions would be:
«It depends.»

Well, this solves the questions on a philosophical level but doesn’t provide you with guidance when working on a real-world project for a client. That’s why we agreed on setting up a whitepaper to help our process and workflow in our team. Here is what we did and what you could do, too.

1. Talk, talk, talk and gain a common understanding

Debating the topic in our design team revealed that there are varying perspectives and opinions when it comes to wireframes and their purpose. In the end, wireframes are only one artefact in the entire design production process.

Thus, questions arose regarding the differentiation of wireframes, mockups, prototypes and design, the general wording and the definition of these terms.

Furthermore, there is not one way of doing one or the other, and the lines start blurring even more when you add the aspect of fidelity to the equation. That’s why you need to…

2. Agree on artefacts, their definition, naming and attributes

From rough structural wireframes to final design for https://www.postfinance.ch/en/private.html via Milo
From rough structural wireframes to final design for https://www.postfinance.ch/en/private.html via Milo

We evaluated potential project artefacts, their attributes and relevance in the design production process. Each project is different. Thus, based on requirements, the scope and nature of a project, we select artefacts we believe to be valuable to the final and desired output and outomce such as:

  • Sketches
  • Wireframes
  • Prototypes
  • Mockups
  • Moodboards
  • Screen Designs
  • Design Systems
  • Design Styleguides
  • etc.

To select relevant artefacts and deliverables we have defined attributes for each artefact:

  • What: Type and name of the artefact.
  • When: Point of relevance or delivery in the process (see below).
  • Why: Definition of why the artefact is needed in the first place.
  • How: Form, fidelity and required know-how and resources to produce it.
  • For Whom: Target group and recipient (e.g. internal or external stakeholder) based on the purpose of an artefact.

3. Align artefacts with your process

Visualisation from internal Hinderling Volkart white-paper showing a potential project flow starting from ideation into an agile design production process with various work packages.
Visualisation from internal Hinderling Volkart white-paper showing a potential project flow starting from ideation into an agile design production process with various work packages.

We have lined out rough steps in the design production process to have a better and common understanding of what artefacts to select at what stage. This categorization is neither to be confused with a project management methodology nor is it meant to represent all other activities such as testing, content production, programming etc.

1 — Make first ideas easy to understand

Activity
Sketching and low fidelity wireframing

Outcome
First ideas core product features, core use cases and vision made tangible (low-fidelity and mainly aimed at the core team)

Output
Paper, whiteboard or simple digital wireframes, sketches or low-fidelity prototypes

2 — Make a product vision tangible and relatable

Activity
Designing moods and mockups

Outcome
A realistic visualisation of your design vision of the final product (mainly for external stakeholder or internal decision makers)

Output
Presentation, mockup, moods, prototypes etc.

3 — Define further product features

Activity
Further sketching and low fidelity wireframing of further product features or relevant use cases

Outcome
Ideas for deeper level product features and use cases visualised (low-fidelity)

Output
Paper, whiteboard or digital wireframes, sketches & prototypes

4 — Think further features through and make them usable

Activity
High fidelity wireframing & prototyping

Outcome
Detailed representation of deeper level product features, functionalities, user flows and use-cases

Output
Paper, whiteboard or digital wireframes, sketches, user-flows, and prototypes

5 — Finalize and design everything for production

Activity
High fidelity detail design

Outcome
Detailed visualisation of the final product and its features to the very last detail required

Output
Detailed screen design, style guides, design systems, animations, design components libraries and assets and a final product or visual base for code

Conclusion

There are countless terms and definitions of artefacts used in a design production process. Get your team together, talk and create a common and unified understanding. Define attributes for your deliverables to help you judge their value and need in a specific project.

Let’s revise the initial question and answer it once and for all:

Do you need wireframes? No, you don’t.

Nevertheless, they may help your process and before you abandon them for good, understand why, how and when you do or don’t want to use them in the first place.

Happy wireframing.

Feel free to share this post, follow me on Twitter, find more of my articles or get in touch:

If you would like to read more from Hinderling Volkart and our team, give us some claps and follow our publication — THX: https://medium.com/hinderlingvolkart

Credits to Milo & Adrian Zumbrunnen contributions & editing.

Note: Thanks to Dan for the contribution. Originally published on Medium.