Designing a consistent interface and reusable UI components for a complex CRM system covering customers, orders, communications and business operations.
UI DESIGN · CRM · DESIGN SYSTEM
Project overview
CLIENT: Tuli via Gamabit d.o.o. ROLE: UI Designer YEAR: 2022 PLATFORM: Desktop CRM application FOCUS: Ierface design · Design system · Reusable components · Visual consistency
Work process
The challenge
Tuli is a CRM system designed to support the daily operations of a metal-products business, bringing customer information, orders, documents, communications and business statistics into a single application.
The project involved translating client-provided wireframes into a coherent visual interface across more than 40 screens.
The main challenge was to establish a consistent design language that could accommodate different types of information, workflows and management functions while maintaining clarity throughout the application.
The main design priorities were:
Establish visual consistency across a large number of screens and functions.
Create reusable UI components to support efficient design and implementation.
Organize dense information through clear typography, hierarchy and layout.
Translate wireframes into polished interfaces while preserving the intended functionality and structure.
01 - From wireframes to interface design
The project began with wireframes provided by the client, defining the application's structure, functionality and key interactions.
My role was to translate these wireframes into a cohesive visual interface, establishing clear information hierarchy, typography, spacing and consistent interaction patterns.
With more than 40 screens covering different areas of the CRM, maintaining consistency while accommodating different content types and functionalities was a central consideration throughout the design process.
02 - Building a consistent design system
To maintain consistency across the CRM's extensive interface, I developed a design system in Figma with reusable components and shared visual guidelines.
Typography, colors, spacing and interface elements were defined to establish a coherent visual language across different sections of the application.
The component-based approach helped streamline the design of more than 40 screens while ensuring that recurring patterns remained consistent throughout the system.
02 - Final interface designs
The final designs brought together the CRM's different functions within a consistent visual framework.
More than 40 high-fidelity screens were created, covering customer management, orders, documents, communications, statistics and other business operations.
Reusable components, clear information hierarchy and consistent interaction patterns helped maintain a unified experience across the application's different sections.