Prototyping: a blueprint for building better products
by Mícheál Douglas (IBM) and Enzo Colasante (IBM, IE)
Why prototype
Imagine all stakeholders — product managers, developers, and researchers — interacting with your designs as if they were the end users. Picture your development team using your prototype to assess feasibility, or researchers guiding users through it, observing interactions to uncover insights that enhance the user experience. This kind of dynamic collaboration is crucial to successful product design, particularly in large-scale enterprises like IBM. Through our project work, we discovered that achieving alignment with all stakeholders was challenging using low to mid-fidelity static flows, as they struggled to visualize the final outcome. We found that prototyping interactions in high fidelity supported cross-functional collaboration, because it acts as a multi-functional artifact that bridges the gaps between stakeholders and the outcome. It unites stakeholders, aligns visions, secures essential buy-in, and captures invaluable user feedback. Here are three reasons why prototyping is essential in the product design process:
- Early engagement of stakeholders: Prototypes empower all stakeholders to participate in the early stages of product development. Regardless of their role, whether as a product manager, developer, or researcher, stakeholders should be able to interact with prototypes just as the intended end users would. This early involvement fosters cohesion among teams and helps mitigate risks by ensuring a collective understanding of workflows and expected outcomes.
- Validating usability through user interviews: Research-driven prototypes empower teams to assess usability and validate user journeys. Through user walkthroughs, researchers can assess interaction models to identify areas for improvement. This validation process improves the user experience and increases the likelihood of meeting the functional needs of users. Additionally, prototypes can discover pivotal learning moments through friction points and uncover experience requirements that may have been overlooked. By capturing these requirements in a backlog, teams can prioritize features and improvements aligned with user expectations. This approach minimizes rework and accelerates the development process.
- Scoping, sizing, and identifying technical limitations: Development teams can leverage prototypes to map out workflows, size stories, and assess feasibility. Visualizing the product in action helps developers anticipate challenges, allowing them to proactively address them. This alignment between design and development streamlines implementation and mitigates the risk of unforeseen blockers.
Clearly, prototyping is more than just design — it serves as a catalyst for collaboration, accelerating product development to deliver user-centric outcomes. The sooner stakeholders can visualize the outcome, the better equipped they are to provide feedback and make informed decisions when it comes to planning roadmaps.
How to prototype
At IBM, product designers use Figma as their primary tool for both design and prototyping. Consequently, this guidance is relevant to Figma.
Define a goal
Partnering with your product manager or design lead, identify the objective of your prototype.
- Is it a multi-functional artifact for design, research, and development?
- Is it for executives to secure buy-in?
- Are you designing a new feature, a new product from the ground up, or simply a new user flow?
These differences will shape the fidelity, interaction complexity, and time needed. For example, a new product may demand more touchpoints and be designed to higher fidelity with micro-interactions, especially if it’s for executives or user testing; whereas a user flow may be more linear, requiring fewer touchpoints, and could be lower fidelity if being used for a design jam with peers.
Outline user scenarios
All designers should be recognized as storytellers. We place our characters — our users — into the story we’re writing. To ensure the story’s success, we should always collaborate with stakeholders as co-authors.
To facilitate this, consider running a workshop with activities such as creating a journey map or blueprint, or gathering feedback on low-fidelity flows. These activities can ensure that outcomes are both feasible and viable. Alternatively, you can keep it simple by writing a script that outlines the user’s journey from A to B. The key is to address your users’ needs, goals, and pain points, allowing you to plot their journey (or job-to-be-done). As a rule of thumb, always validate scenarios with an SME or through research to avoid revisions before progressing to visual design.
Build your components and pages
Depending on your organisation’s maturity, you might already have a design system in place that you can leverage. At IBM, we use Carbon. While having a design system is generally best practice, it might not always be suitable for prototyping. Your design system might not adequately address your interaction requirements, or it may lack a component or pattern suitable for your specific scenario. Consequently, you may find it necessary to develop your own components. This approach grants you complete control over their states, helping you avoid inconsistencies and interaction challenges.
To structure your components and pages effectively, we recommend following the atomic design framework introduced by Brad Frost:
- Start by building the smaller items first, and think strategically about your component structure, variants, and properties.
- Identify which pieces are repeated throughout your layouts and which will require interaction, so that you can avoid doing extra work by editing the original component.
- Always create individual pages as components. This way, you can easily make updates that will apply throughout your flows.
Create a flow diagram
Before connecting your prototype, it’s helpful to outline a static flow based on the scenarios you’ve identified. Think of this as a storyboard. Map your user journey (or script) onto the screens you’ve designed. During this phase, it’s good to work linearly (from left to right) to illustrate the happy path and branch out (up and down) for additional flows. Once finished, align with stakeholders before connecting. By doing so, you can identify content discrepancies, technical limitations, and potential usability issues with the proposed workflows.
Connect and test your flow
Once aligned, duplicate your flow and begin creating connections for interactivity. Ensure that all clickable components include hover states. Don’t forget to test your prototype after making several changes. This will help identify issues such as memory usage problems or bugs.
Figma best practices
Collaborating
We know that some designers meticulously label every frame, while others rapidly iterate through multiple designs without using tokens.
However, when building a prototype, it’s important to establish rules and guidelines for other designers to follow, especially if you’re collaborating and sharing assets. For instance, if two designers are designing bespoke components, they should label their states and include hover events consistently.
When connecting a prototype, it’s best to assign one designer to oversee this process. This removes any risk of overlooking flows within flows or crossing wires, which could potentially cause a destructive change through a broken flow.
Editing
When editing text or flows, remember that your components won’t update if you override a variant, such as a nested component or a text field. So, always apply changes to your master components and communicate the changes to the prototype owner.
Reduce memory usage
Depending on the complexity of your prototype, you may need to optimize your Figma file. While there’s no one-size-fits-all approach to reducing memory, Figma has documented several approaches.
We recommend keeping your file organized, and avoiding unnecessary animations and excessive nesting of components. Additionally, if you’re using a background that’s not being interacted with, try exporting it as an image and placing it behind your flow instead.
Create checkpoints
Checkpoints (which are automatically recorded by Figma every 30 minutes), serve as markers in your design process, allowing you to pinpoint, label, and revert to earlier versions when necessary. This feature proves especially beneficial during significant design changes.
Remember who the prototype user is
Keep in mind who will be using your prototype. For instance, during a research session, will you be navigating through it on behalf of a user, or will you be granting them direct access? This may dictate the level of effort required. As a tip, when a user encounters a dead end or attempts to click on something inaccessible, consider asking them, “What would you expect to see or happen at this point?”
To conclude, in our experience, we found that prototyping is more effective and efficient in allowing cross-functional teams to visualize the end product, align on a shared vision, and validate designs through user feedback, serving as the blueprint for building better products.
This article was co-authored by Mícheál Douglas and Enzo Colasante. Mícheál Douglas is a Senior Design Lead for IBM. Enzo Colasante is an Advisory UX Designer for IBM in Dublin, IE. They are both part of the Security AI design team. The above article is personal and does not necessarily represent IBM’s positions, strategies, or opinions.
