Overview
Deliverables
H.com Figma Desgin System Library
My Role
UX / UI
Team
Visual Designer, UX Designer
Client
Hyundai Motor America
Project Brief
While working at Innocean, I played a significant role in creating and maintaining the H.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, grid, 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, 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
Our Figma library currently contains approximately 180 components. Here are some screenshots of the library.
Below are some screenshot examples of the component that I created in Figma
I designed this Tout component for the ‘Homepage Reimagine Project,’ and it now lives on the H.com homepage. It has multiple variants with various capabilities, and this is how I added it to our design library upon completion of the project.
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