InsureMyTrip Design System

*Certain elements of this project have been undisclosed at the discretion of the company.

Role: Creating and standing up the design system.

Project Length: ~1 month

Problem: The designers and developers lacked documentation of styles/colors/components which had led to inconsistent designs in the past.

Overview: The goal was to create a design system MVP that housed the essentials for any UX/UI design projects. The design system has accessibility guidelines and the components, specifications, and colors in the design system meet the WCAG AA accessibility standards.

Alyson Desmarais

InsureMyTrip Design System

*Certain elements of this project have been undisclosed at the discretion of the company.

Role: Creating and standing up the design system.

Project Length: ~1 month

Problem: The designers and developers lacked documentation of styles/colors/components which had led to inconsistent designs in the past.

Overview: The goal was to create a design system MVP that housed the essentials for any UX/UI design projects. The design system has accessibility guidelines and the components, specifications, and colors in the design system meet the WCAG AA accessibility standards.

Research

A great deal of research was completed before building out the design system.

  • A large amount of time was spent reading about best practices for design systems and researching popular/well-built design systems.
  • Best practices were also taken into consideration for the revised components that were added to the system.
  • A few months prior to creating this system I also attended a UX/development conference that went in-depth on how to structure a design system.
  • Along with research came meetings with the development and QA team to make certain that the way the design system was documented would serve both the designers and developers.

The Structure

The design system is being temporarily housed in a repository manager, however, the goal is to move the system to a design system software which is capable of housing designs while better integrating code.

  • As the developers code each component, the code will be added to the current design system (for the time being).
  • The system is a living document that will be continually updated and built upon.

The System

The design system consists of accessibility guidelines, components, colors, a spacing outline, a typography chart, the responsive breakpoints to follow, and a list of design principles to adhere to.

Conclusion

Creating this design system provided me with the ability to learn even more about best practices for creating components as well as how to incorporate accessibility principles.

Close Menu