Home ▶ Tools & Processes ▶ Design QA

Design-QA process cover image with icons floating in the background

PROCESS • ORG: Delivery Hero

Last Mile: Setting up the Design QA process
for seamless feature development

May 2022

It is always a challenge to ship a build-on production server that makes the product manager, designer, and engineering teams satisfied. When the team shipped our first BETA release, we saw the design team was noticeably unhappy with the build quality. They were pointing out a host of issues in the build that went to the consumers and came to understand that the problems went thru' the QA (quality assurance) process because developers, product managers, and designers never checked for the design issues before sending out the build to the QA-team for testing. So this process got created to fix this hole in the process.

Desk Check Process 🧹

So how did I go about setting up the process?

To start with, I worked with the product manager, an engineering manager from a different squad than mine, 1-2 designers, and a couple of QA members to understand better how we can together set up a process that compliments the current flow of projects and integrate it without breaking the shipping speed of the current sprint.

Let's see the breakdown of each step.

01

Understanding the current process

The first step was to document the process that is currently in place, so I can understand better where the missing piece of the puzzle is.

Current end-to-end Design Process
Design Process Flowchart

The end-to-end design process at the start

02

Interviewing stakeholders

The next step was to interview 6-8 stakeholders from the team and hear how they would currently perform a desk check within the current flow of projects. I got to connect with these participants:

Design Interviews with Stakeholders

I conducted and documented all the interviews on MIRO. The above is what all the interviews together looked like

The stakeholders were asked to brainstorm 1:1 how they envisioned an ideal desk check process and when in the product life cycle it should be added

03

Consolidating learnings

Once the interviews were concluded, I collated everything that I learned from the stakeholders into a single thread process. 👇

The desk check process essentially became a part of the Delivery Track.

Learnings from Interviews
Rectified Design Process with QA Integrated

The new process with desk check included

04

Desk Check/Design QA Process

What goes into the desk check block?

Desk Check Process further broken down

05

Scope during Desk Check

Since desk check is an added step on top of the regular QA check, it is essential to scope out what is precisely being looked at during the checking phase.

✔ Checking for flow - happy, negative, error edge cases

✔ Checking if all values and states are correct

✔ Checking for micro-copy issues

✔ Checking for visual inconsistencies like icons, typography, padding, spacing, sizing, color hex – matching with Figma

✔ Expected Design vs. Actual Development

✔ Checking for hover, pressed, and clicked states

_________________________________

During desk check, the following domain expects, each squad needs to be participating:

06

Conducting Desk Check

Desk checks can be done in many different ways, and there is no right or wrong here. But given the fact that most engineering team members are scattered across APAC and EU regions, we considered the following options and decided to do everything remotely on Slack or JIRA.

Possible ways of conducting the desk check process
Broadcast of slide deck on Slack Channel

Sending the presentation to the team and receiving some supporting comments

Desk Check Process Slide Deck (in meeting room)

The presentation on Desk Check Process that was given to the entire product and engineering team members

Projects to explore

Process to track events from design to data & analytics