Overview

Deliverables

G.com Figma Desgin System Library

My Role

UX / UI

Team

Visual Designer, UX Designer

Client

Genesis Motor America

Project Brief

While working at Innocean, I played a significant role in creating and maintaining the G.com design system libraries. When I joined the company, there was no proper design system library for designers to use while working on projects. The initial task was repetitive and tedious as we had to manually find every atom, molecule, component, and other design elements on the website and add them to the library. However, throughout the process, I discovered several issues with our website and design system, such as inconsistent behavior of the buttons, fonts, colors, grids, and spacing. The absence of a proper design system library resulted in inconsistent designs created by the team for each project. Thus, each atom and component were inconsistent throughout the website. Over six months, we completed the Figma design system library based on our live website and presented it to the other teams. Additionally, I gave several presentations on how to use the Figma design system library to encourage other designers who were not familiar with the design system and Figma to create design consistency on our website. Of course, a few presentations and explanations didn't fix all the problems at once. We had to constantly answer questions from other designers and showcase many more times how to use the design library properly. Although the process was tedious initially, it was an excellent opportunity to identify and solve many of the inconsistencies our website was facing.

Now I have taken up the responsibility of maintaining and updating our library and leading this work. I am working with other designers to add and update various components and atoms with suitable variants as we work on projects.

Figma Design System Library

Below are some screenshot examples of the library that we created in Figma

Below are some screenshot examples of the component that we created in Figma

Vehicle Landing Page Hero Component

Below are some screenshots of the presentation that we made to let other designers know how to use the Figma design system library to encourage other designers who were not familiar with the design system and Figma to create design consistency on our website

Previous
Previous

H.com Design System Library

Next
Next

H.com VLP Safety Module