Design system

Developing a unified design system for Isracard's management dashboard to ensure consistency, efficiency and a seamless user experience.

Problem

During the development of a new dashboard design, it became necessary to create new components and pass them to the development team. Since different parts of the project were handled by different programmers, this led to inconsistencies in the final product.
Deliverables

Components, Color System, Iconography, Typography

Role

UI designer

Solution

When creating the design for the new dashboard, my task was to deliver all new design elements to the development team. Therefore, I developed a unified design system to ensure that anyone working on the dashboard had access to all the materials. My goal was to establish a unified design system to maintain consistent and high-quality design throughout all stages of development and ongoing project maintenance

Analysis and planning

I conducted an analysis and studied design systems such as Material Design by Google, Lightning Design System by Salesforce, Human Interface Guidelines by Apple and others. Following the recommendations of these leading companies, I identified best practices and standards for creating a design system.

Development of a design system

During the project, I created a unified design system that includes various components and interface elements. Below are the key components designed to ensure consistency and facilitate efficient collaboration between developers and designers. These elements include core interface components such as input fields, buttons and other UI elements, a color palette and icons used across different sections of the project.

Select controls

Interface elements like radio buttons and checkboxes play a key role in managing settings and user option selection. Our specification within the design system provides clear guidelines on their use in various states, simplifying developers' work and enhancing the quality of the user experience.

Input field states

When developing the design system for the dashboard, it was important to create convenient and intuitive input fields. Different states of input fields help users navigate the interface better: the normal state indicates the field is ready for input, the focus state indicates the field is active, the error state helps quickly identify and correct mistakes and the filled state displays entered data. These states ensure a better user experience and enhance usability in interacting with the interface.

Button & Link

Buttons are presented in two main states: primary and secondary. Primary state buttons are used for key actions or commands, emphasizing their importance. Secondary state buttons are designed for less prominent actions, providing a more restrained appearance and functionality.

Links are presented in a unified standard, ensuring consistency and ease of navigation across website pages.

Typography

Typography plays a key role in creating a user-friendly and visually appealing interface. This section presents the main principles and guidelines for font usage in our design system. Here, you will find information about the chosen fonts, their sizes, styles and recommendations for their use in various components and interface elements. This ensures consistency and ease of text perception at all stages of development and across different parts of the project.

Iconography

Icons are designed with precise dimensions, ensuring proper display across different devices and effective use of colors and styles for clear information communication.

Color palette

The color palette was developed with consideration of the brand's primary colors and accessibility principles. In our interface, color is used to convey meaning and guide user attention, rather than for decoration. It helps to emphasize important elements without distracting from the main content, ensuring clarity and ease of perception.

Conclusion

Creating the design system significantly reduced the time spent by the development team, and my knowledge of CSS and HTML greatly simplified the process of creating specifications. Once, during the presentation of the design system to an external development team, the chief engineer said: 'The design system is very clearly organized and I have no additional questions about it'. This was a wonderful compliment, which confirmed the correctness of my work and the importance of my contribution to the project.