How Wireframes Help Our Design Team Foster Better Design Discussions
The reality of most design teams
When you join a product design team of relative maturity, you will most likely be working with a design system consisting of established components and design patterns. The design system serves as a source of truth between design and engineering, ensures UX consistency across the product, and speeds up designers’ workflows. That’s why most of the time in a team like ours, design iterations begin in high fidelity.
What do we mean when we talk about fidelity in design? The level of fidelity in design is how precisely it represents the final product. When designers leverage existing components from the design system library, the designs look high-fidelity because they closely resemble what the final product might look like.
Although an efficient method, always designing with only the components already available has its limits. Earlier this year, a handful of UX designers on our team expressed the need for a lower-fidelity design library, to improve early stakeholder collaboration. Over the course of several weeks, I worked with these designers to come up with a solution that would address their various collaboration pain points.
The problems with starting in high-fidelity design
Design reviews focused on the wrong thing
In the early phases of a project, the feedback designers are generally looking for is on the overall UX flow and page layout. So, when designers presented high-fidelity mocks during early reviews with stakeholders, the feedback often focused on minor details rather than the big picture.
In multiple projects, the design meetings went off track because of a typo or an incorrect sentence. When going through a workflow of 10+ screens, we end up only reviewing two screens the entire meeting.
Daniel Nguyen, Senior Product Designer
Design mocks used to finalize strategy
In some cases, when the product requirements document (PRD) continued to evolve during the design process, the product manager (PM) relied on designs from the designer as discussion materials to solidify the product requirements with other stakeholders. Starting the design process in high fidelity created a bottleneck in these situations.
In complicated multi-stakeholder projects, product managers use design mocks to discuss ideas with other stakeholders. When rough concepts are presented in high fidelity, the audience might mistake them as mature proposals, which causes confusion.
Zee Liu, Senior Product Designer
Too much time to create wireframes from scratch
When needed, designers took it upon themselves to make wireframes from scratch. However, doing so took way longer than using already available components from the design system library. Thus, the lack of a readily-available wireframe library ended up creating more work for designers or discouraged them from taking the extra step of rough design explorations altogether.
Building the wireframe library
Wireframes are essentially low-fidelity designs that represent a clear overview of the page structure, including the layout, flow, and functionality. The goal of creating a wireframe library was to provide designers with components flexible enough for experimentation, that also deliver the most valuable information to stakeholders.
There were three core requirements that went into building the wireframe library. We wanted the library to:
Contain foundational and high-need components
The wireframe library does not need to be as extensive as the high-fidelity component library but should contain design foundations and core building blocks of most pages.
Serve different use cases via varying degrees of fidelity
We wanted just enough fidelity for non-designers to understand what they were looking at and be able to have meaningful discussions about it.
Map to our existing high-fidelity component library
In order to reduce the amount of work needed to transition from wireframes to high-fidelity design, the structure of the wireframe library needed to be aligned with the design system library.
Unveiling the library to the team
Over the next couple of weeks after sharing the library with the team, a handful of designers started adopting the usage of wireframe components in their workflows. The addition of the wireframe library was not to impose an extra step in their current workflow, but it served as an available tool to be utilized as needed. The most validating feedback was hearing that the wireframe library saved designers time in getting their ideas out into mocks.
The wireframe library helps me get my ideas out quickly without having to spend extra time creating what already exists, so I can get feedback on my designs sooner.”
Sai Mohanty, Product Designer
Retrospective
Having a wireframe library helps designers get ideas out into rough mocks quicker and focus stakeholders’ feedback on the right aspects during early design reviews. Wireframe components give designers a base of visual hierarchy and cohesion to work off of, instead of having to start from scratch.
Working in a team where velocity is highly valued, we often prioritize minimizing time to production. However, if every new feature had to be made using only existing components and patterns, we would be missing out on a lot of potential for innovative design. And ultimately, we want to enable designers by providing them with tools that allow them to create inspiring solutions.
Interested in these kinds of design projects? Come join Rubrik’s product design team! Check out our open opportunities here.
