Are wireframes dead?
The shift to accessible methodologies
In the product/ user experience world, wireframing is a common practice used to quickly map out a page structure and keep customers focused on a specific task during usability testing. This step was noted as crucial to the design process as it helped undercover pitfalls quickly and enabled rapid iteration. However, wireframes fall short showcasing dynamic content and interaction, which is how most modern apps and websites are being built (Nielson-Norman Group). Dynamic web development is a method by which the assembly of a web page is determined by its parameters. For instance, on Netflix, the data displayed is dependent on what the viewer has clicked on/ watched in the past. Netflix notes on their blog:
Through multi-armed bandit algorithms, we hunted for the best artwork for a title, say Stranger Things, that would earn the most plays from the largest fraction of our members. However, given the enormous diversity in taste and preferences, wouldn’t it be better if we could find the best artwork for each of our members to highlight the aspects of a title that are specifically relevant to them?
The wireframing approach limits thinking on personalization and curation, a core component of a modern app. Additionally, it may lead to the designer
- Creating inaccessible experiences (Booo!)
- Using valuable upfront time on a non-critical part of the experience
- Designing with unnecessary constraints
- Short-changed on research insights
When designers are forced to create in static screens, their thinking also stays static.
Stop separating usability and accessible
In an agile world, the design process has a clear time limit. If we want to create accessible products, we need to use that upfront time to explore accessibility concepts. One large part of accessibility is color, which wireframes by definition don’t have.
Around the world, 300 million people are color blind. The most common type of color blindness is red-green (colorblindness.org). Instead of creating a wireframe, create a prototype that uses the theory of color independence. Color independence is the notion that all crucial, non-decorative elements of your designs can be understood when they are black and white.
How is color independence different than a wireframe?
Wireframing focuses on key pathways in a flow and answers how do I get from point A to point B. The theory of color independence helps broaden designer’s empathy and awareness as they are tasked with designing an experience for someone with monochromacy. “People with monochromatic vision can see no colour at all and their world consists of different shades of grey ranging from black to white, rather like only seeing the world on an old black and white television set” (colorblindness.org).
This approach not only creates an environment of empathy on product teams and with stakeholders but also helps create products that everyone can use. Additionally, you can employ this methodology with other accessible methodologies such as spectrum-based personas and information foraging to help you understand why your consumers need to get from point A to point B, rather than designing only one way to get there.
A great example of this is a smart watch. Fitbit launched a feature to help incentivize people to move more. In concept, this was a great idea. In reality, their experience alienated many people when their Fitbits notified users, “Time to stand.” Not everyone can stand, and we need to check our ableism. Designing with color independence and other accessible concepts helps us create more inclusive experience where everyone feels they belong.
Personalization Matters
Customers have come to expect customization. In fact, Salesforce showcased findings from the “State of the Connect Customer” and found sixty-three percent of millenials are willing to share their personalized data for offers and discounts.
Moreover, research conducted by Epilson indicated that “80% of consumers are more likely to make a purchase when brands offer personalized experiences.” Wireframing does not allow you to personalize content nor think about the customized solution to your app.
For instance, I was prototype testing a wireframed desktop experience. Each customer had a unique experience and a custom order flow. Due to the timeline, we didn’t have the time to create custom scenarios for each client before testing, leading to inconclusive testing insights. Customers kept asking, “But where is MY data?” “Our experience doesn’t have that.” “Why is this here? “You aren’t taking away my personalized functionality?!?” We couldn’t gleam insights without personalization. More consequently, our research efforts had the reverse effect. It stalled us rather than move us forward. The readout showed many holes in the design when in reality, it was the wireframing methodology that needed to pivot.
Figma propelled us into a new way of creating designs
Before Figma, designers had a minimum of three tools — Sketch, Invision, and Zeplin. Figma recognized this space was fractured, buggy, and ripe for innovation. They combined these tools into one workspace, and continued to understand the whys behind the workflow to innovate.
One amazing gift they gave designers was variants. Variants are a single set of components used to simplify your design library. Instead of having all the states of a button (default, hover, selected, disabled OR primary, secondary, etc.), you can create a variant which houses all these states that’s clickable. Anyone on your team can use this library and it significantly expedites your team’s workflow.
Variants in conjunction with autolayout are important because they help you create a personalized experience to test and eliminate the need for wireframes. This is largely in part because now, designers create one variant with advanced interactions such as logic. You can and for the love of it all, you should use autolayout. Autolayout eliminates the need to pixel push, makes hand-offs to developers more seamless, and enables rapid updates to your design. Variants and autolayout make it significantly easier to personalize an experience before testing.
Our process and approach must catch up to our tools. Your bottomline is dependent on it.
The business case for eliminating wireframes
When we incorporate wireframes into the design process, we place our company at risk of missing deadlines by using valuable upfront time on a non-critical part of the experience and apply too needless constraints. This approach also eliminates the ability for designers to create a personalized experience for testing, which can result in lack of valuable research insights. All in all, your business loses resource time, may miss product deadlines or underdeliver to hit them, and may exclude people from your user base.
If we shift to accessible methodologies, such as color independence, spectrum-based personas, or information foraging, we can accomplish the same goals as wireframing — rapid iteration and wayfinding — and gain better testing insights and end up with a more inclusive product.
As our world evolves, so must our processes. It’s paramount to companies’ future to innovate and challenge the status quo. If they don’t, they may end up like wireframes — inching towards relics of the past.
** Post-note: Thanks for all your comments. One note of clarification — The argument is not to throw out the discovery phase where you are concepting and discovering your problem space. It’s intended to provoke thought and take a moment to reflect on your company’s process. Ultimately, is what you’re doing adding value for everyone OR is it creating rework for your teams or pigeon-holing your team’s solutions? The answer to “Are Wireframes Dead?” is all dependent on your process, your team, and your maturity level.
