The importance of quality in UX design deliverables
When we start a new project from the UX/UI designer role, there is a whole process to go through. There are occasions when we cover all the stages of the journey, and others, due to the intrinsic characteristics of the project itself, or external factors, when it’s not necessary. However, all these milestones are equally important and help to successfully reach the next phase, and UX design deliverables are part of this process.
Let’s take a brief tour through all these stages. The first phase is inception: the goal here is to gather all the preliminary information regarding the project, talk with the business team and obtain their requirements, have a meeting with development and understand the capacity and limitations of the technology.
The second phase is called conceptualization: what we aim to do at this stop is to organize, catalog, and prioritize the requirements that will make our design usable and at the same time meet the client’s objectives, without forgetting to adapt to the technology we have available. For this, we can use flow diagrams to understand our users’ journey map, among other tools.
We continue with the design phases: first, we will create wireframes that we’ll test with the client and iterate if necessary, before moving on to the visual design phase.
Once we reach this stage, we might think that our work ends here. However, nothing could be further from the truth, our work continues with the handoff.
The handoff is the project transfer phase: at this point, we need to deliver our design to the layout and development team so they can turn it into a digital reality.
This transfer must be impeccable, we must provide the receiving team with all the relevant information about the design that needs to be implemented. To ensure we are handing over a file that meets the best conditions, we can rely on a series of tips or advice to check that our deliverable complies with all the quality specifications.
A single design file
The first useful tip is to have everything compiled into a single design file (within Figma or whichever tool you prefer), using the necessary pages to make the process understandable. You might have a first page with documentation, followed by another page containing the flow diagram. You should also have one for wireframes and another for the design.
We recommend differentiating between desktop format design and mobile design, having each on a different page. However, this last division will depend on the project size. For a modest application, they could perfectly be together, as it would be simpler to maintain coherence between the flows and they could be easily compared. Yet, when handling large designs with numerous flows and screens, it becomes difficult to use a single page for both.
Name your layers, groups, and frames
When designing, we must keep in mind that our file will change hands at some point, either due to the handoff to development or because another designer colleague takes over.
For this reason, we must be very rigorous in naming the layers, groups, and frames that the document may contain to facilitate the comprehension for whoever takes over, without the need to make an effort to decipher it. Remember to use clear, descriptive, and concise names, avoid spaces between words, and steer clear of accents, symbols, or special characters.
Use corporate elements
Before starting to design, you should have a well-defined style guide, including a series of typographic styles, color palette or palettes, components, grids, and certain resources like icons, illustrations, or images.
Your design will follow these previously established patterns, thus maintaining the coherence and cohesion of the brand.
See also: Design Systems, what are they and why are they so important?
Don’t design just the happy path
It’s important to consider what will happen during all flows. If we’ve correctly defined the flow diagrams in earlier stages, we have practically paved the way; however, we need to translate this into screens. Things don’t always go as expected; sometimes a search yields no results, there are empty states, and errors can arise throughout the process, whether they are human or technological.
Let’s design for all scenarios. Let’s not forget to compile both success and error messages as relevant.
Use real texts
We don’t always have access to the final content of our design; however, whether we do or not, let’s try to use texts as close to reality as possible. Our design can be compromised if we have miscalculated spaces. We might think a text will take up a couple of lines, and when we see the developed product, those couple of lines turn into ten. Something very similar can happen if the final language of the designed application changes.
Check the color mode
This point applies depending on the design’s format. For a digital design meant to be interacted with through a screen, the design tool will allow you to switch between light color systems (HEX, RGB, CSS, HSL, HSB); there is a direct relationship between these systems, and visually you won’t notice the change.
What if our design is meant to be printed? In this case, the color mode will be CMYK. Ensuring that we use the correct color mode will be crucial to obtaining good results.
Gather all your assets
It’s possible that in designing we’ve used icons, logos, illustrations, or images. We call these resources assets, and the first step to turn them into a deliverable is to optimize them and then group them.
For vector assets, we will provide the resource in SVG format. We can perform the export directly from our design tool; the next step would be to use some easily accessible external application that allows us to optimize these SVG files.
In the case of images or non-vector elements, we should use JPG or PNG formats, the latter in case the resource needs to have a transparent background. We will use external optimization tools just as we did with the SVG format.
Document
This step is optional and directly related to the nature of the project. It might be necessary to create additional documentation to facilitate the handoff, but it’s also possible that our design is comprehensive enough to explain itself.
Create a checklist with all the previous points
Finally, we strongly recommend that to ensure you review all the above points before delivering your design, create a checklist where you can mark each item as you verify them. It will make your work easier and prevent you from overlooking something important.
Completing a UX/UI design project is a process that combines meticulousness and strategic vision. From the inception phase, through conceptualization and design, to the crucial handoff, each stage contributes to the project’s success.
It’s not only necessary to design with the user in mind but also to prepare and deliver the design in a way that facilitates its technical implementation. Creating wireframes, visual design, and meticulous preparation for the handoff are steps that require detailed attention and a focus on quality and consistency.
By ensuring that every element, from layer names to asset optimization, is clearly defined and organized, UX/UI designers pave the way for a seamless implementation that respects the original vision and meets the end-user’s needs.
This holistic approach, in addition to improving the user experience, also strengthens collaboration between design and development, culminating in digital products that are both functional and aesthetically pleasing.
This is a translation of the following article from our corporate website:
