UI/UX Design Deliverables: What You Get at Every Stage

So what will we get after your work is done?

The result of our work is a set of artifacts: research findings, structure, designs and specifications that design and development teams can rely on throughout the product lifecycle. This article lists every UI/UX design deliverable we produce, what each one is for, and an example from our projects.

There are many techniques, terms and definitions in the design world. Some of them only add project time and cost; others are real working tools.

Having done more than 100 projects, from small startups to big well-known brands, we've identified for ourselves the most effective list of these artifacts:

• Competitor analysis
• User research (optional)
• Information architecture
• Low-fidelity wireframes (optional)
• UI layouts
• Interactive prototype
• User testing (optional)
• UI animations (optional)
• Design system (optional)

As you may have noticed, only 4 of these are essential for developing or improving any product. The others can significantly improve the user experience but are not mandatory: it all depends on product requirements, budget and timing. This keeps the project focused on results without unnecessary steps.

Now let's take a closer look at each of them.

Competitor analysis

Competitor analysis helps us identify the strengths and weaknesses of the products your users compare you with.

Usually we choose 5-7 direct competitors and, through benchmarking, determine which one solves the particular problem best. For the monobank UX audit we went further and benchmarked 10 leading fintech apps, including Revolut, Monzo, N26 and Wise; for the Crush dating app we compared Tinder, Bumble, Hinge and Happn to find what could set Crush apart.

User research

User research is another useful tool for any project.

Using methods such as individual interviews, field research and online surveys, we learn more about the needs, goals and behavior of the product’s users. The results are summarized in a final document: user portraits.

For Meter Scanner, an app for submitting utility meter readings, we interviewed 30 people. 28 of them complained about logging in to a different web service for each meter, and 25 wanted to update all meters in one session. Those answers defined the app’s main flow.

Information architecture

Once the research is done, we use the data to build the information architecture of a new product, or refine an existing one to better meet users’ needs.

This is usually a map that gives a bird's-eye view of the product. It helps identify the highest-priority features, define the scope of work and plan more thoughtful navigation. For Farm.One, the IA mind map was the first step in rethinking the e-commerce platform’s structure and planning its new functionality.

We have tried many online mapping tools over the years and settled on FigJam, Figma’s whiteboard, so the map lives next to the designs.

Low-fidelity wireframes

Before modern design tools, a single screen took a long time to make, and edits that now take a couple of minutes required hours. That's when low- and high-fidelity wireframes became useful for quick reproduction and testing.

Tools like Figma have changed this. Components and styles let us create full UI layouts at great speed, so high-fidelity wireframes as a separate stage mostly stretch the time and cost of a project.

We use low-fidelity wireframes when we need to quickly explain an approximate structure.

UI layouts

Whether we have style recommendations from the client or start from scratch, we always begin with visual research: a mood board with several visual concepts that illustrate our vision of the product’s style. Your ideas and references are very welcome at this stage.

Once we agree on the design direction, we design the first pages. Once they are approved, we move on to the next ones. Sometimes it pays to explore several options first: for Crush we designed three distinct UI variations of the main screen before choosing one.

Interactive prototype

The interactive prototype is an integral part of the visual design process. It helps us find weaknesses in the product, verify assumptions and test hypotheses. We prototype in Figma, which has everything needed for user testing.

A prototype is also a business tool. For IONA Pay, a mobile banking and crypto payments app, we delivered an investment-ready clickable prototype in 60 days; the live MVP followed in 16 weeks. Read more in our guide to rapid prototyping.

User testing

It is always useful to stop and test assumptions and design decisions. With an interactive prototype, we run a series of usability testing sessions and write a report that summarizes the findings and recommends next steps.

On Salud.ia, an AI health platform, feedback from alpha users revealed 18+ usability issues. After fixing them, the steps to first meaningful value dropped by about 30% and onboarding became about 25% faster.

UI animations

During the design phase, we can also provide short videos of key interface interactions that guide users down the right path. Developers then use these videos as a reference when implementing the interactions in the final product.

Design system

A design system is a file with all the design specifications. It serves the in-house design team or third-party agencies as well as the development team.

It contains the key design principles, sets of UI elements in different states, rules for typography, colors, adaptive behavior and more. It keeps the visual identity of the whole project consistent and works as building blocks for new pages and features.

On Peoplelogic, an AI performance platform, the new design system included dozens of reusable components and unified patterns across all modules, which made new features faster to implement. On Sandi+, we built the design system before any screen.

For developers

During development, some details can be overlooked. Each one may seem insignificant, but small inconsistencies between design and implementation snowball and can dramatically affect the final user experience.

To avoid this, we work in Figma. A few reasons why it works for handoff:

• In addition to dimensions and spacing, Figma provides code snippets;
• It exports elements to PNG or SVG in a click;
• Developers and designers comment and discuss right in the file;
• Components speed up the design process and remove the need for a separate wireframe stage;
• Interactive prototyping for usability testing;
• Full version history and autosave;
• It is easy to maintain throughout the project.

We can also stay involved during development. On Vera, a generative AI platform, we aligned the interface to a 4-pixel grid to simplify implementation and supported the client through development to make sure the build matched the design.

Conclusion

Creating these deliverables is not always a linear process; it depends on product requirements, budget and deadlines. At the end of the project, we hand over all the finished files and transfer ownership of all the assets in Figma to the client. You can see how the deliverables come together in our case studies.

After that, we can continue working together: provide design support, oversee development to make sure everything is implemented properly, work as your in-house design team and keep the design up to date. See our services and pricing for how that works.

Related reading: how we design an app from discovery to MVP.

FAQ

What are the main UI/UX design deliverables?

Competitor analysis, information architecture, UI layouts and an interactive prototype are essential. User research, low-fidelity wireframes, user testing, UI animations and a design system are added when the product needs them.

Who owns the design files after the project?

You do. We hand over all finished files and transfer ownership of every asset in Figma to the client.

Do you need a design system for every project?

No. It is optional for small products, but it pays off as soon as the product grows or several designers and developers work on it.