GEA Design System

UI, Design System

Design Team

José María Armendariz
Aída López
Mariana Macías

In 2020, Aguascalientes State government, through one of it's agencies and design team, decided to make a change in the design of the whole official website.
The redesign would rely on the decisions like what type of framework we were going to work with, taking in consideration that the government has at least 50 agencies and institutions, where they have a person in site reponsible of updating their website. This would also consume some time to make training sessions, to show how the framework, components and structure of the pages should be.

Choosing Frameworks

The old version of the website, used Bootstrap 3 as it's main framework, so most of the teams inside the agencies are familiar with the syntax of Bootstrap.
As the mayority of the agencies websites are structured the same way, and have basic sections to display public information as a requirement, we needed a framework to be able to create components. The development team made several suggestions, and ended up choosing Vue.js as the main framework, combined with Bootstrap (started planning with Bootstrap 4, but by May 2021, we updated to Bootstrap 5).

Design System

Before getting into any developing, there has to be a base for the whole redesign. A design system is the most common and necessary in these kind of projects, since you can document the whole process, and make the handoff to developers easier. In our case, there are some other departments that develop inner systems that interact with the normal citizen, and others for internal use of the government agencies.
Having Bootstrap 5 as a base framework, it's easier to set the initial layout. The composition of the types of section would be defined through columns.

General Layout

Color

The color palette is defined by the official communication department. We set these colors to the color palette, and also made adjustments to make a secondary and complementary palette and the variations of each one. When working with color and typography, you would also expect to do some adjustments to meet the minimum accesibility guidelines (WCAG, Level AA).

Aguascalientes State Government official color palette

Adjusted color palette for web.

As the colors are used as background in many elements, we would also do some complementary gradients.

Gradient color palette.

Accesibility: Color Contrast

As I mentioned before, we wanted to meet the minimum requirements in accesibility from the Web Content Accesibility Guidelines (Level AA). So we made a color contrast check with the font we were going to use.
Figma has many plugins that helped us with this task, so we could make the correct adjustments and see which were the right font weight to use.

UI Kit

Since the beginning of the project, there was always the intention of making components. This would ease the handoff to the developers. As well as the designers to concentrate into solving problems, rather than spending time making the elements from zero.
Buttons, cards, navbars, headers, inputs, are many of the components made. Some are set with variants, and others for their nature, just the structure of how they should be displayed (with Figma Auto layout).

We started working in this design system in september 2020. We continue improving it, researching the best practices for it's use.
You can check the new design implementation in the Aguascalientes State Government official site.
If you want to see the design system in Figma, you can check it here. Or the web documentation, here.