My design QA process with engineering

As requested, here is how I have been doing design QA feedback! As mentioned it's not perfect and I'm continuously evolving it as I often work with different engineers on each project.

----------------------------------------------
//LINKS

//TIMESTAMPS
00:00 - Introduction
00:54 - What is design QA?
2:26 - My QA process
5:25 - Adapting the process
7:40 - Key takeaways
8:50 - Content QA
9:30 - Wrap up

// MORE

// SOCIAL

//TOOLS (referral links)

[Beautyforu]

Thank you for this video! As a junior designer and only having worked with QA and Engineers once, it's refreshing to see that even at Uber, there can be design discrepancies in the QA environment. I always felt like I was doing something wrong when the designs didn't look like mine. This is so helpful!

[deecsaunders]

Brilliant video. We do something that wasn’t mentioned in your video but I feel is very important to the process. We have an initial design review session with engineering at the beginning of a project. This session allows engineers to feel more involved in the design process and call out any concerns they might have in the implementation of a design. Sometimes this can lead to designs changes which I record in InVision. After all engineering feedback is made to the designs then designs are signed off and over to engineering. I find including engineering early on makes implementation much smoother. Also Im a little shocked when I seen the differences between the design and implementation in this video. It makes me think the engineers are not working off a design framework. In order to limit the amount of design deviations it’s very important to define a design system and have engineering all working off that. That way they can share/reuse components which boosts productivity and maintains overall consistency.

[natpaler]

It looks like an agile framework for developing code works very well connecting the UX design process as well. Great demonstration!

[lydiawoo]

Thanks for sharing. I'm an "introvert" UI/UX Designer who often found a lot of struggles and courage to deal with engineers. Plus, the company I worked for was not exactly on Agile/structured workflow. Often I found my only solution is to schedule a time with the exact engineers and sit beside him, "guiding" him to do it on the spot while I can cross off my QA list. That was not a great experience and I don't enjoy doing it. I hope every project manager could appreciate the importance of structured workflow. Jira sounds like a great solution!

[apptechlab]

as someone who is new to this field, ma'am let me be honest with you . i really am inspired by your work, and i love your content, they come in so handy . thank you for making such contents.

[manumicah]

This is why visual QA is so important!! Designers immediately see what went wrong during implementation, and we often think, how in the world did they miss this? Hahaha. Yes working in increments is def recommended and we also use Jira for Visual QA, makes the process so much easier.

[mujtabanadeem]

It's so reassuring to see that I'm not the only one who has devs that completely butcher the design. It's even more reassuring to know my method of tackling the design changes is almost similar to yours. P.S I'm an only UX designer in my company

[volkanelci]

Sometimes I get really frustrated with the developers on my team when they butcher my designs. It made me feel a little bit happy to find out these things happen even in a giant company like Uber :)

[yurikatatsumi]

Awesome video! Thank you very much for sharing this Tutorial Femke! Could you also do the series of how to work with PM? 😊🧡

[mosopeadebowale]

Thanks for the video Femke, for me I have found dropbox very handy in writing my feedback and breaking it down into nitty gritty.

The process is not as neat as what you have here but its a combination of using Monosnap to take screenshots and annotations, adding the screenshots in Paper and embedding the figma link also, and rasing some of these are issues on Azure Dev ops.

Some of our front end engineers still have some way to go with tidying up some of the CSS styles so I sometimes find myself using Inspect in chrome to check if the style matches the design and guide them on how to write it properly (I have some HTML, CSS and JS knowledge).

Thanks for sharing

[Mexxokere]

Not all heroes wear capes. But you see this video right here, it will always be on time and Amazing!

[wassimbenbrahim]

Thanks Femke, great content :)
We use pretty much the same process in my company (medium size agency).
What i also find really efficient and fast is just go and have a sit next to my favourite Front End dev and do some corrections live together, much can be done in just 30 minutes without producing any unnecessary docs, but it doesn't work well for a remote environment...

[jacsarah]

Your videos are SO informative. One piece of feedback I have though is that the volume you edit your speaking at could be higher. I had to crank my volume up pretty high to hear you comfortably, and then when the outro music played I almost screamed. Otherwise I can't wait for more of your content <3

[carina]

We share WIP designs with eng so that any major concerns can be expressed upfront, then, at the point of "ready for dev" have a 3 amigos which would typically include design, engineering, product owner to review the designs and kick off the implementation.

Once eng has completed a ticket, they'll share their work with us in a catch-up, and I'll give notes on the fly... but having a more formal approach within Jira would make things more transparent and give designers more time to consider the review stage! Great video thanks for the tips :)

[akashuxer]

A big Thank you Femke 💙💙 u r a good mentor.. 😃🙌 and I'll remember from now ...Design + Content QA Review

[likhitreddy-is]

I come back to this and some other videos often and realise something new everytime, like Does Uber not have a design system?

[josampoo]

Hi Femke, I have a question regarding how you use JIRA. You mentioned that the engineers will create a ticket to fix the design discrepancy and that you will go in an leave feedback and notes in JIRA. How do you mark off which issues have been fixed on your end? Do you have a separate tool (i.e. figma) you use to track the things that need to be fixed, or do you refer to JIRA to track those fixes after moving onto JIRA? Thanks for this video, its super helpful to see how the process is different and similar in some ways at other companies.

[malemess]

hi! I am a product designer looking to standardize this process in a remote environment and this video really helped! However, I am tight on time as it is so I wanted to ask: does your PM built the time for you to make all these annotations into the project timeline? I could see how this could take hours and some back and forth and that is technically cutting out of your designing time, so I wanted to see how much time you usually have for it and if it is considered in the roadmaps. thank you!

[marckrug]

Thank you so much for your Videos! Really helps me growing!

[JohanRonsse]

We let the designers code the visual part of the frontend to remove this arduous process. Downside of that: less time spent designing and more time spent coding. And your designers have to know how to code then.