Infrakit

When working on digital products already in production, achieving a balance between refining the existing UI and addressing the need for new features is critical. While polishing the UI enhances user experience and ensures a intuitive interactions, introducing new features drives business growth and responds to evolving market demands. The challenge lies in prioritizing these efforts effectively—improving usability and design where it matters most while innovating to meet future user expectations and business objectives. This balance is essential to maintaining user engagement and staying competitive.

• Product design: web and mobile application for several user roles
• Design system

In these kind of cases, coordination between Business, Development and Product teams is essential, as well as the priorities prioritisation. Our product team was working closely with Development and Product teams to ensure changes in the UI upgrades are taken in less-risky ways. Second point is related to the product scope: having in mind different user roles (Contractor and Infrastructure owner) are interacting with different parts of the product: browser and mobile application, it's important to consider the value each change brings to the user. Starting with smaller, less impactful changes was essential for the acceptance by the existing users and has set the ground for introducing new features in the future.

To ensure design elements consistency and make the communication between Design and Development teams smooth, design system is introduced. In this case the structure was in line with the product information hierarchy. Figma is used as a tool of preference and has provided options for dividing a file into pages and adding variables like color, typography, and layer styles. It is important to document decisions made throughout the process of designing because the design system should be comprehensive to everyone, not just the design team. Every file should has a styles page with documentation, components page, and a UI page. Component documentation is the most important part of the file. Every component is defined with spacing, sizing, variants, states and rules for behavior on different resolutions and devices. Variables inside Figma are used for consistency, and they come in handy in Dev Mode where the impact of these concepts is visible in practice.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto sed aspernatur tenetur saepe id ab et sapiente modi! Corporis laudantium eius eos vero totam quis, consequuntur placeat asperiores distinctio. Omnis.