The QA Process in UX Design
Why every UX Designer needs to do QA and tips to help your process
Building a digital product is an iterative process that contains several stages: discovery, defining, wireframing, prototyping, testing and development. However, there is a step that may be overlooked by UX Designers and excluding this from the workflow process can greatly affect the success of the product.
What is QA?
QA or quality assurance testing is a vital part of the product process. It is the stage of development designed to catch any errors before the product is released. The goal of quality assurance testing is to verify that the product functions as expected and to find and remove bugs before it is shipped out. If you are planning on working on products from inception to completion, QA becomes a critical component of the product development process.
As an Experience Designer, your job does not end with handing off designs to the development. Building a product is a collaboration where the team has to work together to help facilitate the creation of the design intention. Just like design has a cycle of creating and testing so does development. Development is a cyclic process of creating, verifying and testing.
This is where Design QA comes in. As the product is being developed, the UX Designer should take ownership of the production and also have a voice in the verification process. A common ideology is to wait for Design QA until the product is almost ready to ship but that should not be the case. If Design QA is postponed, then many features would have to be coded again to fix UI and interaction issues, potentially causing other unforeseen issues. If Design QA is incorporated in the process then features are approved and signed off in one requirement ticket.
Do UX Designers really need to do QA?
Yes, yes you do.
The QA Engineer is testing and seeing the product through a different lens. They are seeking if all of the acceptance criteria are met. For example, when the user clicks on this button does the modal pop up? If yes, the functionality exists and the task is marked as completed. However, as an Experience Designer, I am examining, how does the modal appear? Does it animate in too quickly or slowly? Does it slide in from the bottom when it should appear from the left? Does the design appear consistent across devices?
This example shows two implementations of the floating action button feature. The first implementation contains linear animation curves that makes the interaction feel robotic. The second interaction includes pop animations for a friendlier feel. The acceptance criteria for this feature is met in both circumstances, but the interaction feels vastly different.
The Benefits of Design QA
Completing Design QA early on has several benefits to product development. If Design QA is occurring in parallel with development efforts the UX Designer will be aware of engineering issues early on in the process. In addition, features can be developed and shipped in one sprint, without having to go back and do visual treatments later on.
1. Keeps the UX Designer in the loop for technical issues
If the UX Designer is in the room testing features as they are being developed there will be a greater understanding of technical issues that arise. Not only will this help the designer understand the benefits and detriments of their designs, but it will also help educate them and prevent these issues for future features.
2. Increases collaboration and communication
Collaboration and communication are key aspects for a team’s success. If everyone is working together and aware of issues as they arise, it increases collaboration to find a solution.
3. Helps build the correct interface as the product develops
If Design QA is part of the process, the product is developed and approved brick by brick; instead of building the feature and then going back to make UI changes at the end of development.
4. Saves time
Since the developers are creating and completing each feature in one ticket, their workflow is more efficient. Instead of creating the functionality in one sprint and going back to make modifications in another sprint, each item is finished and reviewed in one cycle.
5. Sheds light on unforeseen bugs
Fixing one issue might cause other bugs. By documenting issues early on it might uncover potentially larger unseen issues.
Tips to help your QA process
I have built and shipped various digital products, from mobile applications to internal software. The following tips have helped my QA process by articulating the design intention and reporting issues.
1. Be as clear as possible
Designers cannot just handoff interface designs and animation files and say “figure it out”. Clearly explain what each page is for, when it appears for the user and how it transitions from the previous state. I find creating site maps and user flows as a good method so the developers understand the overall structure of the application.
2. Create assets that clearly demonstrate the design intention
Describing an interaction could have multiple interpretations, therefore by making a visual representation and writing a description of the intended interaction it bridges the gap between designer and developer.
3. Once you have a functional prototype, start testing
Start reviewing the software as soon as possible. If you wait to complete QA towards the end of the product’s development it may delay the launch date. When the developers fix one problem three more bugs may arise. It is important to catch errors as early as possible.
4. Make it through the product
Go through the software and follow the “ideal experience”. Make notes of any points where there are functional or interaction issues. Then delete the app and do the same thing all over again. Test often and frequently to catch any errors.
5. Test for edge cases
Other scenarios might exist that you never considered before. For example, how much of the product functions without internet access? Try the application under as many circumstances as possible to analyze its functionality.
6. Document everything
In order for developers to understand what is going on you need to be descriptive with your QA process. Include any photos or videos to document the bugs that you find and steps to reproduce the error.
Conclusion
The QA process should not be the sole responsibility of the QA Engineer. When working on a digital product the UX Designer needs to verify that the designs were implemented as intended. By working with development throughout production and clearly articulating your ideas, Design QA can help ship out the product efficiently. Working on a product is a true collaboration, however, the UX Designer needs to take ownership of the verification process to ensure their work is portrayed in the final outcome.
I would love to hear your comments on how you conduct QA testing. Leave a comment below!
Want to improve your design to development handoff? Check out my Sketch to Zeplin tutorial
Let’s Connect
Watch my Design Tutorials on Sketch, Zeplin and Origami
Follow me on Dribbble
Check out my design projects
