Design review in Product Development
I will be talking about the importance of both UX and UI Design Review in Product development and using Figma as a tool for smooth design hand-off to developers. So, let’s start!
UX design review
UX Review is a professional analysis using usability research methods to make sure that you are building the right solution for both business and end-users.
It often happens that our product has a misunderstanding of its purpose, accessibility problems, or anything else which can ruin our experience while using the product.
Usability research methods like the think-aloud method, and A/B testing… will help you validate solutions through an iterative approach and make sure your product continues with its development process.
You should ensure that important user flows are flawless and that every element is on point with its purpose. Definitely consider the content and copy side of the design, it should be well-suited as well.
Following the data from the UX review, you will have a clear picture of all ups and downs of your product. It won’t be a subjective assessment, in fact, you will have a data-driven report.
Make sure to spend enough time iterating and defining the content and the copy in order to be well-suited and appropriate depending on the use case
At Atlantbh, we are going a step forward and making sure to look at the wider business picture, ensuring that projects are supportive and flexible for future improvements.
UI design review
Before you even start reviewing a web application’s user interface, you need to know who the users will be, have clear goals in mind, and remember, our goal is to improve the user experience. In this stage, we are comparing the developed design with our actual design from Figma.
We are checking all properties of the web elements to match with the ones from our design file. In most cases, we have user interface guidelines or a style guide.
As we are prepared for multiple iterations, all elements are converted to the design system, as it gets easier to change the properties of Components that would be applied all over the design.
This is a way to survive as a designer in an Agile environment 😁
Responsive design
The first thing to consider while conducting UI design review is the compatibility with devices. UI design should provide a flexible user interface that adapts to different screen configurations.
Our design needs to be based on screen size, platform, and orientation. We must add that the flexible grids are foundational elements of responsive design + the magical auto-layout feature of Figma.
Layout
By setting an excellent layout of web elements to help highlight content which is the most important data on the site. The layout function is kind of invisible to the user but relevant to navigation.
Typography
Typography is one of the most important elements when designing digital products. Think of them as a way to communicate with the end-user. If your users are unable to read your content, you can expect a high bounce rate. You should definitely focus on legibility since that has the most important impact on the overall user experience.
Color
The right choice of color can support the better readability of the information. Besides, it can increase usability. In order to achieve the excellent user experience goal, the designer should always remember that the interface should be highly usable and clear.
Design Handoff
Using the principles we mentioned above, confirm the latest design proposals with stakeholders and end-users and forward them to developers to start the development process.
In order to minimize iterations and design QA sessions, a good designer-developer collaboration is a must.
We are using Figma as a tool for collaboration. Figma has a built-in inspect tool. Developers are invited to design files via links with different permissions. Developers are allowed to navigate the file’s pages and frames and inspect the properties of each element. There is also the option to export all resources like images and styles. Also, there is a code snippet section. Figma supports CSS, Swift, and XML.
Here are key features of Figma:
- View size, distance, and design properties;
- Marking settings for different platforms;
- Offline design mark exporting;
- Send a link to your prototype.
We, at Atlantbh, prefer linking elements with design systems, so our developers can even check variable names of colors, fonts, and other web elements. It really speeds up the process.
With all this in mind, developers are allowed to code everything more accurately.
There will be no guesswork.
Design QA with developers
There will be cases in which some of your designs will not be implemented very well. That is when the Design QA phase comes in. It’s the process of reviewing visual designs, micro-interactions, and copywriting by cross-checking the developed design vs. your handed-off design before going into production.
Now, designers are able to easily communicate to developers giving them more transparency into the process.
As you’re going through the Design QA, the most important part is to make sure that the developed designs are as close to how you made them as possible. Prepare to compromise!
Also, consider prioritization of UI bugs, especially if developers are on a tight timeline.
Organizing Figma file
As developers get access to design files, it’s good practice to communicate which parts of the files are ready for implementation and which are still being worked on. This can be easily done by naming pages to indicate the status or creating different thumbnails that will easily navigate developers to certain parts of the design.
Plugins
Here is a list of useful plugins that can speed up your workflow and design handoff, or handshake whatever you like.
Design Lint
Design Lint is a plugin you want to use before the developer handoff. This plugin shows you all the inconsistencies in your design file. This ensures that your designs are ready for development by fixing inconsistencies.
Spellchecker
Spellchecker is a plugin that checks layers for spelling errors. It is common that you will have spelling errors due to fast typing content or copying it from one language to another. This plugin currently supports English, Russian and Ukrainian text.
Redlines
Redlines is a plugin that will help you mark important lengths and distances. Although the built-in inspect tab on Figma is a great confirmation of object properties for developer handoff, this plugin helps eliminate any margin of communication error or confusion.
Conclusion
The goal of any design review is to study goals, objectives, and user behaviors. We want them aligned with the company’s intended goals. Goals can change, whether the product changes or the product changes purpose. Your job as a designer is to give the most logical and intuitive flow for the user, in order to easily accomplish every single action.
Interested to know more about UX/UI design? Click here!
Originally published at https://www.atlantbh.com on June 16, 2022.
