Project Overview
To improve the app's technical support, we migrated the application to a new version of Angular, which also allowed us to create a comprehensive design system to refine the UI with the help of the product team (2 product owners, product manager, and myself).
Typography
I started with essentials – fonts. I audited the entire application to collect all font styles used in the two parts: admin and client-side. I reduced the number of typefaces and font styles, replacing some with frequently used ones.
The typography now includes 6 headings, 2 subtitles, 2 types of body text, and 1 caption style.
Colors
To streamline the color scheme, I collaborated closely with the developer to assess the frequency and location of usage for each color.
As a result, we reduced the number of colors used, improved accessibility, and established a cohesive color scheme throughout the application.
Components
I made changes to the UI components, including adjusting colors, eliminating inconsistencies, and redesigning elements using the built-in logic of Material Design components.
Buttons
I encountered several challenges during the process, but the main ones I addressed were:
- The primary buttons' background color was changed to a darker shade to improve legibility when paired with white text.
- The contrast level of the secondary buttons was adjusted to avoid confusion with disabled buttons.
Checkboxes
The checkboxes also underwent several changes, including:
- Using grey checkboxes as default to maintain consistency throughout the whole app.
- Changing the indeterminate state of checkboxes to a filled box and updating the accordions to grey arrows.
- Darkening the grey color on the default state for the clearer visual distinction from disabled states.
Table grids
I replaced the previous infinite scroll in our application's table grids with a pagination component. This decision was made due to the heavy load on the server caused by the previous implementation.
The new pagination component includes a dropdown for quick navigation, even with filters applied.
Input Forms
The application features 2 types of input fields: those with labels above and those with labels on the left.
After careful consideration, I determined the following criteria:
- Inputs with labels above the input field will be used in modal forms and popups to minimize screen real estate usage.
- Inputs with labels on the left will be used everywhere else to support inline editing.
Other components
Other components don’t require many changes, but I made sure to apply consistent design logic throughout the entire system to maintain a cohesive design system.
Final Result
Based on our research and design system, we were able to implement several tools and processes to ensure consistent application of the guidelines by our team. These include:
1. Creation of a shared design library with reusable components.
2. Establishment of a review and approval process to ensure adherence to the guidelines.
3. A color and font system that aligns with the overall brand guidelines.
4. Components that are accessible, intuitive, and aesthetically pleasing.
5. Incorporation of the widely used Material Design icon system for easy adoption by designers, developers, and users.
Conclusion
This case study highlights the progress of creating a design system to reduce development time and streamline the design process.
Developers can now reuse interfaces, cutting development time by 2.5x. And as a designer, I save 1.5x time previously spent checking for pre-built components.
