In this company, I dedicated entirely to UI/UX design working on the Visual Design of the web and internal applications (desktop and mobile). This is an example of the steps we followed in the creation of a new, more intuitive design system, both visually and technically.

Design Principles

The main objective of creating a new design system was to achieve unification in all navigable pages because as the company grew, more elements needed to be implemented in a way that did not lose the overall consistency of navigation and that was easier and more intuitive for the user. We also kept the corporate identity so that it would not lose its essence.

Research

Analyzing the existing design system we realized that there were many missing icons or warning signs that we had to incorporate, we did exhaustive work on how, where, and why to implement these new interactions, putting hypothetical cases and testing with users.

Style Guide

The style guide was already created, the main colors are blue and white, as it represents the water of a river, but we decided to add a 3rd color to the palette, a canary yellow. A color that would stand out and that could work in cases of alert message or for example, in the accessible keyboard, we use it in focus.

Reusable Components

We made a list of all the necessary components such as typography, buttons, badges, inputs, checkboxes, date pickers, menus, notifications, and tags, among others, and created a master element for each of them in order to create their variants and define the different properties and work more efficiently in future projects.