Great customer experiences don’t happen by accident. In digital product design, the customer experience encompasses everything that the product team does; development, design, DevOps, and QA — everyone’s role impacts the customer experience but especially the design and user experience. Since I’m a product designer, there’s a particular part of the process that I’m obsessed with, and that’s making sure that designs get implemented as intended. What does this mean? It means ensuring that design work is coded to closely if not perfectly match the actual designs.
Consistency is one of the main tenets of good product design. Over time as a product is designed and developed inconsistencies inevitably crop up. Over time this can add up and turn into “design debt.”
Design Debt affects the integrity of the user experience. This is what happens when a bunch of incremental changes collect over time and yield a disjointed, inconsistent, and patched-together experience. — Design debt While it may be challenging to address 100% of inconsistencies all of the time, doing Design QA is a big step towards combatting design debt.
There are other fundamental flaws that can make Design QA a challenge:
Teams or companies do not understand or value design enough to create a process that fosters good design outcomes → “the feature works” People don’t see the difference between a design and a poorly coded version of it → “looks good enough to me” The focus of teams is on speed and feature delivery — and visual integrity is easier to cut than coding → “we don’t have time for it” Speed vs. quality To elaborate on the last point, as a product team works together, they sometimes run the risk of getting into feature delivery mode and shipping. Teams can lose sight of the bigger picture and attention to detail while trying to close as many tickets as possible before the Sprint ends. As a team races to the end of the Sprint and increases velocity, this may create a scenario where the integrity of the design implementation can fall to the wayside as a “time-saving” measure.
I’ve written before about how teamwork and collaboration are necessary requirements for product teams to do great work together. Co-designing at the conceptual stage, designer and developer pairing, using tools like Zeplin to create transparency and bridge the gap between design and CSS; these are all great and do help, but they don’t take the place of having a designer formally sign-off on coded designs before they are shipped.
This is where Design QA comes in! ✨
Design QA (QA = Quality Assurance) is merely a step in the process between development and testing. It’s a chance for the designer to:
Review the coded version of the UI prior to testing Work with the developer(s) to make updates to the UI in code Maybe you work on a tiny team and are already working very close together doing some version of design QA already; perhaps you work at a company like Pivotal where designers and developers spend time co-working together and design QA is built into the workflow already. If not though, it’s very easy to for the quality of implementation to lose its place in the process.
Your standard workflow might look some version of this. If your team works in any sort of Sprint and moves a ticket from one part of the development lifecycle to another, your (design) work may be in any one of these categories at any given time.
In a workflow like this, how do we ensure the integrity of design? When a ticket is done in development, it’s usually up to the developer working on the ticket — or the product manager to move it to testing. Sure, teams can get into the habit of trying to do some version of Design QA without having a step in the process for it, but that breaks down quickly; people forget or decide for themselves that the design implementation is good.
By making Design QA a deliberate step in the process, it can’t be skipped. It’s also recognition that design implementation is an important part of the process that the team values. When we account for Design QA in the process, the workflow mentioned above, now looks more like this.