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, or accessibility problems, or anything else which can ruin our experience while using the product.

Usability research methods like: think-aloud method, ab 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 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 design system, as it gets easier to change 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.

Responsive design

Image Source

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.

layout of web elements

Image Source

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.

Typography in design

Image Source

Color

The right choice of color can support 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.

color contrast

Image Source

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.

Organising 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 be 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.

Design Lint

Image Source

Spellchecker

Spellchecker is a plugin that checks layers for spelling errors. It is common that you will have spelling errors due fast typing content or copying it from one language to another. This plugin currently supports English, Russian and Ukrainian text.

Spellchecker

Image Source

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.

Redlines

Image Source

Conclusion

The goal of any design review is to study goals, objectives, and user behaviours. We want them aligned with the company’s intended goals. Goals can change, whether the product changes or the if 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!

Defining the redesign process at Atlantbh
BlogUX/UI
October 11, 2022

Defining the redesign process at Atlantbh

The design team at Atlantbh is continuously exploring best design practices and establishing new design processes for team and company needs. The UI/UX and product designers are taking every opportunity to pass on lessons we've learned working on our projects and build a base of guidelines for future use. One…
User Experience Psychology
BlogUX/UI
August 23, 2022

User Experience Psychology

User experience psychology (UX design psychology) is about understanding the behaviors of the people whose problems you're trying to solve and designing the user experience to align with those human behaviors. "A designer who doesn't understand human psychologies is going to be no more successful than an architect who doesn't understand physics," —…

Leave a Reply