Create ‘design blueprints’ to make sure your redesign is effective
Think like an architect to get your team on board with a re-design
When you start a re-design, one of the best things to do is to understand what currently exists. Sometimes, you might realize that your product might suffer from feature bloat: something started well-meaningly, then ideas kept being added on until it became unwieldy.
In these cases, you don’t just need to pay attention to the product’s design: you also need to pay attention to the team. Some of them might have meant well, believing that the old design is primarily okay and needs a few tweaks (even if metrics say otherwise).
In that case, it’s crucial to avoid one of the biggest roadblocks: avoiding relying on the old design for too long. Instead, we need to think more like architects and look at the ‘design blueprints.’
Start re-designs by looking at the ‘design blueprints’
If you’ve ever had the misfortunes of needing things fixed or repaired, you probably know that many repairs don’t just look at the area in question: they often look at the overall system.
A plumber doesn’t just look at the moldy carpet spot where the pipe leaked: they’ll spend time looking at the whole system to ensure no other leaks. The same goes for mechanics, electricians, and architects: many times, they’ll want to take a glimpse at the entire system.
They often rely on blueprints and drawings to get a sense of where things are, especially if they’re otherwise hidden (like plumbing often is).
UX Designers should be no different, mainly if the documentation exists. Behind every website, there is a Design Framework that defines the overall structure of the users’ experience, which includes everything from functional elements on the screen to interactive behaviors and visual language.
The Design framework consists of three parts:
Interaction frameworks, which include scenarios and requirements that help the designer provide rough sketches
Visual design frameworks, which are often the visual language (and colors) that are typical of single-screen prototypes, and
Industrial design frameworks that form a rough physical model and testing ground.
But most times, things are likely not to be well-documented. In these cases, while tackling everything might be an arduous task, the first step, the interaction framework, can often be vital towards the success of a re-design, and it’s not that hard to implement.
In many ways, the first step is the closest to schematics or blueprints that architects use: they’re helpful to get a sense of the layout, what things may be crucial, and the best way of approaching changes to the structure. But there’s one other crucial function that these blueprints serve: they get the team to stop thinking about what’s currently designed.
So how do you go about creating an interaction framework? According to About Face 3: The Essentials of Interaction Design, understanding the interaction framework consists of 6 parts:
Define form factor, posture, and input methods
Define functional and data elements
Determine functional groups and hierarchy
Sketch the interaction framework
Construct key path scenarios
Check designs with validation scenarios
However, in practice, we can simplify these steps further. What matters most from this framework is step #4: sketching the interaction framework.
Here’s how to do that.
Review use cases and necessary elements with stakeholder interviews
One of the essential parts is to assess if the focus, elements, and more have changed for the project. It could be that halfway through the original design, the focus of the progress shifted, but it’s not always clear from the documentation.
The stakeholder interview is one of the earliest steps of the re-design process. There are many different resources to rely on when conducting stakeholder interviews, but the critical aspect of this interview is this: what goals are we trying to accomplish, and what elements are necessary as a result?
To do that, you need to take one crucial step: don’t show the existing prototype. If your stakeholders see the prototype, they’re likely to look at things that don’t matter (but look nice) and say that they need them. But if they’re forced to develop a checklist of things that matter to the project, it might be incredibly different.
This is especially true if new use cases, such as mobile applications are involved. Therefore, the other part of the stakeholder interview should be listening for answers that help address possible solutions, such as which solutions:
Accomplish user goals most efficiently?
Best fit our design principles?
Fit within technology or cost parameters?
Best fit other requirements?
After this, the next part is to simplify what currently exists.
Simplify design elements and hierarchy
The following steps are to consider how the elements should fit together in terms of hierarchy. First, check how things are currently grouped on the page, and think about whether it matches what you heard from stakeholder interviews.
One typical example is this with menus: if it turns out that only one option in the design truly matters at this stage, we might consider scrapping the menu altogether.
This way, we can check design elements and information hierarchy that currently exist against what should be in the re-design.
We can pair these results with one of the most critical parts of the re-design phase: sketching.
You need a visual comparison point (even if it’s not ideal).
Sketching is one of those things that people forget about, but it provides one key feature: it gets the vision of a re-design in front of the team as quickly as possible.
Even if you don’t think that a sketch can be a good substitute for a fully finished prototype, sketches help encourage discourse about a work-in-progress and, more importantly, get the user away from thinking about the currently existing prototype. In addition, constantly using the old design as a visual reference can get your team to think that the design will stay the same: it’s just the old design with some minor changes.
And they’re the ideal level of fidelity for this stage of things when you’re still reviewing the ‘design blueprints.’
So when you find yourself in the early stages of the re-design, sometimes it’s most helpful to review the ‘design blueprints’ and form a sketch of how things may differ. Even if it’s low-fidelity, that visual aid can make sure that your team is on board with the vision of the re-design, and you’re not stuck relying on the old design until you’re used to it.
Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.