PRODUCT DESIGN
RESEARCH
UX
Entity Card: Universal Interface for 6× Faster Development
This case shows how a systematic approach and the use of standard UX/UI patterns can speed up design and development several times and reduce TTM (time-to-market).
I was the only designer on this project. Working closely with the frontend team, I designed a universal interface for interacting with entities across all products in the FinOps line, supported the development of its API and documented it as a UX/UI pattern.
Challenge Overview
We faced the challenge of developing two major products in parallel — VK GRC, designed to organise an internal control system for enterprises, and AIS Tax-3, aimed at automating interactions between taxpayers and tax authorities.
The overall scope included about 400 screens and more than 50 complex user flows, all under a very tight 3-month deadline with extremely limited design and frontend development resources.
Examples of user flows are shown in the figure below:
Research
I conducted extensive research — analysing multiple entities, complex user flows, and use cases. Then I created a mind map of common characteristics that influence the UI.
As a result of this research, I defined a final list of functional requirements for the entity card interface and proved to the team that we could design a single, universal interface that can be reused for any entity across all our products.
This visual shows how the main interface blocks came together:
Solution: Universal Entity Card Interface
Main Interface
The entity card interface had to let users work both with the entity as a whole and with its individual parts.
To make that possible, I designed the main interface that includes key information and actions related to the entity, while dedicating most of the space to the content and interactions with it.
Hierarchy
The hierarchy area is used to display the structure of flat and hierarchical entities. For simple entities without sections, the hierarchy view can be turned off.
Content and Action Display Options
To display different types and amounts of data the entity card can use one or multiple forms, table, or their combinations.
Because users can perform actions on the entity, its sections, or specific parts of the content depending on the business process type or stage, the interface includes configurable toolbars at different levels.
Sidebar
All additional entity actions (including commenting, file attachments, business process view, and overview) are located in the sidebar.
Users can switch sidebar display modes using icon buttons at the top of the panel.
Developing
I presented the interface to the frontend and backend developers, and together we designed the API to make the interface fully configurable — any parameter can be enabled or disabled as needed.
We spent a little over a week writing the code and preparing the API, creating a tool we can reuse and develop independently.
Impressive Results
When we started developing the VK GRC and AIS Tax-3 products, we measured the average development speed per screen using the universal interface.
We found that a designer needed only about 7 minutes per screen, and a developer less than an hour and a half — six times faster than the standard speed.
Creating a universal interface helped us significantly reduce product development time and meet tight deadlines.
More importantly, we started reusing this interface for typical screens across projects, which helped us shorten the time to market.
Feedback
Since the creation of the entity card, I’ve received a lot of positive feedback from colleagues across different specialisations. And I continue to receive it with each new project we develop:
Lead Frontend Developer
It took 1.4 hours per screen — I think that’s phenomenal 😍 The speed-up is so huge that we don’t even need front-end devs for this project anymore 👍
Frontend Developer
We’ve got a 6× efficiency boost! With the old approach, front-end devs spent about 8 hours on a single screen, and with the new one — only 1.4 hours! 🚀
Product Designer
The back-end team told me the entity card is the best thing ever invented 💚, and it just speeds everything up phenomenally!
Project Manager
We’ve never had such tight deadlines and such a large scale before , and the fact that we managed to make the entity card is just a lifesaver — it’s like having a joker in the deck 💜🃏
Lead Frontend Developer
Hi, thanks again for the entity card ❤️ Everyone was worried the front-end was falling behind, but now we’ve overtaken the back-end, and we were planning to hire two more front-end devs, but realised we don’t need them anymore 😱
Frontend Developers
‘Good thing we came up with the entity card — without it, we’d have been in real trouble!‘
‘Glory to the entity card — without it, we would’ve been doomed! 😅‘
User Testing & Continued Application
We continue to actively use the universal entity card interface as a fully integrated, template-level component of our design system to ensure fast development and a consistent user experience.
Alongside the API documentation, I’ve created comprehensive internal documentation describing the entity card as a UX/UI pattern, which I’ve shared with the entire team. This shared resource helps us stay aligned, keep all current knowledge about the interface in one place, and collect ideas for future improvements.
We also have a development roadmap for the interface — we’re aware it’s not perfect, and we know exactly what our next steps should be to make it better.
In addition, with my design team I’ve conducted user testing and identified several usability issues that we plan to address in the near future.
Takeaway
This is one of my favourite projects because it clearly demonstrates the power of the things I deeply believe in:
Formal logic, along with systems and analytical thinking, is essential in design.
When a designer and a front-end developer are aligned and work towards the same goal, real magic happens where they meet.
Reusing template-level components from a design system is incredibly effective and brings remarkable speed.
Documenting components and UX/UI patterns is a necessary and highly valuable part of the development process.
But most importantly, this project gave me a completely new perspective on design!