GINA - Prime React
(Working within libraries)
Designing within an established design system
Designing from scratch is a lot of fun, so is redesigning sites that are considered outdated whether it's for their style or their purpose. But what about using libraries?
Many times developers are comfortable working with libraries, which come with an already established design system, and sometimes keeping things fresh within a system can feel like a challenge.
​
GINA was created as an in-company product to help people selling Google services keep track of their clients and the current subscriptions. The original site had the information that the vendors needed but the legibility was hard due to a misuse of the components in the design system, mostly missing proper hierarchy of them.
Components and Hierarchy
Designing from scratch is a lot of fun, so is redesigning sites that are considered outdated whether it's for their style or their purpose. But what about using libraries?
Many times developers are comfortable working with libraries, which come with an already established design system, and sometimes keeping things fresh within a system can feel like a challenge.
​
Working within Prime React, by using the library the Devs were already using made the transition into the new look of the site extremely smooth. With an emphasis on Headers with color accents and font sizes the information was a lot easier to read for the vendors and those with a subscription.
Graphics and Tables
One of the biggest challenges when showcasing information is making sure that it's displayed in a way that is easy for our end user to read and follow. In this case since we're working with metrics, making sure that there was enough room to show everything in graphics and tables was crucial.
Conclusion: Libraries
GINA was perfect proof that we don't have to always create a product from zero to make it good and perfect for the purpose it's intended. Working with Prime React was a fun challenge, getting to give proper hierarchy to the already existing information and by this, making the life of the Devs easier, was very satisfying.
​
Designing within library components whether it's Prime React, Material or Bootstrap doesn't have to feel restrictive and it's necessary to show flexibility as a designer. As a UX Unicorn who also has had to code, libraries can be a great asset for products that require speed and efficient organization of big volumes of information.
