MyInvestor Design System

Generation of the DS and layouts for scaling

Role

Senior product designer

Deliverables

Design system layout

Documentation layout

Technologies

Web

Mobile

Problem statement

I joined MyInvestor right at a time when they were undergoing a big rebranding and I needed to see how the new materials adapted to digital.

They had no Design System or UI kit in place. Guidelines and documentation were missing. All the work was manual and extremely inefficient. Accessibility was not contemplated.

I decided to start the work to leave the basis set up to continue building from there what would be their design system.

Web screenshot of Myinvestor's site

Execution

I laid out the basics for the structure. Defined the foundations and their usage.

At the time they were cascading and there were little agreements and conversation happening between design and development team. My idea was to create a structure prepared for scaling and laying out accessibility standards, including documentation for both devs and design. I started opening up the communication and including devs in the creation of the Design System.

Color palette:

I reviewed the color schemes shared by the brand agency and defined the tints and the accessibility guidelines for the use of color throughout the digital products.

UI main colors
UI secondary colors
UI color palette

Component Structure:

I arranged the pages per component to include the components with examples, built and documentation, do’s and dont’s, and accessibility checks for devs. I set up the foundation’s styles of the palette, typography, elevation, icons and a set of main components to be used across products.

This project inspired some articles you can find below:

Focusing on buttons