Design artifacts (user flow, wireframes, and prototypes) and when to use them
When I worked on my first design project, I used every single design artifact I knew at the time — I mean, why leave any out, right? (I’m chuckling at my past self as I write this). I failed to focus on the ones that could have added value to my design solution.
It was through my evolution as a designer that I came to realize that using the right UX design artifacts depends on several factors, such as the specific project, its goals, the stage of the design process, and the needs of your audiences (design team, stakeholders, developers, etc).
Design artifacts and their purpose
Design artifacts are materials created during the design process to document, communicate, and support the development of a product or user experience. They serve as visual, written, or interactive documentation that helps convey design ideas, concepts, and decisions to design teams and stakeholders.
Key purposes include:
- Facilitating clear communication of design ideas between teams and stakeholders.
- They serve as a record of design decisions and progress.
- Design artifacts help ensure the design aligns with user needs.
- They make design intentions clear and unambiguous.
- Design artifacts foster teamwork and decision-making.
- They support design refinement and user-centred solutions.
Design artifacts can take various forms, including sketches, user flow, wireframes, prototypes, and written documentation.
The truth is, you don’t need to exhaust every design artifact to create a good design. There are cases where you need just a few of them. Knowing what each design artifact is good for helps you understand when to use them and when to skip them, as you will find out in this article.
When to use user flow diagrams
User flow diagrams are useful when you want to visualise how users navigate a product or complete tasks, especially in complex scenarios. They are essential for spotting potential issues where users might get confused or face difficulties. With user flow, you can estimate the time and effort required to build the pathways users take within your product.
You might think you’ve got it all figured out and decide to skip user flow in cases when it should be used, but then it comes back to bite you with unexpected user frustrations, development hurdles, and missed opportunities for creating efficient user experience.
Here are some practical examples of when user flow can be used:
- User Onboarding: User flow diagrams help you plan the steps users go through, from their first visit to fully understanding and using the main features. For example, think about how someone starts using a mobile banking app. A user flow diagram would show the process from signing up to making their first transaction.
- E-commerce Checkout Process: When people shop online, the steps to complete a purchase can be complex, like adding items, entering details, and making the payment. User flow diagrams help design this process to be simple and easy for shoppers.
- Multi-Platform Authentication: When a product allows users to sign in with multiple methods (like email, Facebook, or Google), a user flow diagram helps designers and developers understand how these options fit into the user experience. It ensures that users can easily switch between methods, and that any errors are handled consistently.
When to create wireframes
Wireframes are detailed outlines of what a website or app will look like. With wireframes, you get to think about a feature’s details at a screen level. They show where different design elements, like buttons, text fields and navigation elements, will be placed on the screen without worrying about colors or fancy graphics. It’s a way to plan and organise how the design will work and make sure it’s user-friendly before adding all the visual details.
I’ve observed that many, including my past self, frequently resort to basic shapes and placeholder text like ‘lorem ipsum’ in wireframes. This practice often falls short of realising the full potential of wireframes and neglecting to include real content in wireframes can hinder understanding of how users will interact with the design. So it’s really important to add meaningful content to your wireframe screens.
Wireframes are needed in design when you want to:
- Determine the arrangement of design elements on a screen or page.
- Illustrate how users will navigate through a product or feature and the interactions between different screens or pages.
- Plan the details of specific functionalities, like form fields, buttons, or interactive elements.
- Gather user feedback, identify usability issues, and make design improvements.
When to create prototypes
The main reason to create an interactive prototype is to discover design flaws before investing time and money in your actual product. An interactive prototype serves as a close representation of your final product and is ideal for usability testing. It’s particularly valuable when dealing with complex features, that would be time-consuming or challenging to modify later.
Interactive prototypes are especially important when you’re making something that’s hard to change after it’s out there. They help you catch as many issues as possible before real users get their hands on it. And if you’re creating something that has to be perfect from the start or will only be used once, testing a prototype that’s really close to the final thing is super important. You have to make sure everything is right before the big reveal.
Prototypes are typically used in the design process when you need to:
- Test Ideas Early: To refine concepts, interactions, and functionalities before investing in full development. For example, before building a mobile app for a weather forecast service, you create a prototype to test different ways of displaying weather data and navigation.
- Demonstrate Functionality: To showcase how a product or feature will work. When designing a complex dashboard for a business analytics tool, you build a prototype to demonstrate how data will be displayed and how users can interact with it.
- Usability Testing: To conduct usability tests with real users and identify issues in the user experience. In the case of a new online form for a government website, you create a prototype to observe how users interact with it and make improvements based on their feedback.
- Save Time and Resources: To save time and resources by spotting design flaws early and making necessary adjustments. For a complex medical device, you build a prototype to ensure it functions correctly and is user-friendly before investing in manufacturing.
I’ve been in situations where stakeholders specify the types and quantity of “deliverables” for a design project almost immediately, without thinking about their purpose. Designers are also guilty of focusing too much on these materials, like wireframes and sketches, as signs of progress. These are mere tools that help you create experiences that enrich people’s lives not an end goal.
The surest way to create the right design artifacts for your product at any given time is to focus on solving the problem rather than obsessing over these design artifacts.
