Kelvin was growing fast and signing more clients. Teams were shipping one off solutions and creating a ton of design and engineering debt.
Kelvin hadn't established any shared visual design language that would be cohesive, consistent and provide an exceptional user experience for Kelvin as they grew.
I was tasked with creating, defining and structuring a design system library for Kelvin.
One of the initiatives of this design system was defining a visually cohesive icon family. We aimed to achieve visual consistency, clarity, brand recall and scalability as the icons at Kelvin grew. Our icon family would prioritize web, with mobile next and tablet in mind.
We performed a UI Audit of Kelvin’s existing iconography and tried to understand their evolution and purpose. I documented and categorized each icon in Kelvin noting its context, location, placement, size, and their platform. Icons are used to compliment text or as stand alone actions. They are used on both dark and light backgrounds. We kept brand in mind and how the Kelvin brand is perceived. We wanted to create an icon family that was: confident, resourceful, curious, intentional.
The visual design direction was inspired by Frank Lloyd Wright, who believed in creating harmony with people and nature. The design focused on a geometry that was inspired by natural forms such as symmetry, and smooth and rounded curves.
The style is purposeful, light and balanced. The icons have variations of outlined and filled depending on their context and text compliment. Their symmetry makes them quick to understand. Their forms are flat and have a single color usage that ensures readability.
Their construction is based on a 4px multiple inspired by Material Design. The icons are on pixels and integers have no decimals. They correspond to organic feeling keyline core shapes.
Keyline shapes are the foundation of the icon structure. Maintaining these shapes ensures visual proportion and consistency at scale. The widths maintain a 1px including curves. Terminals are rounded.
Colors are intentional and communicate the brand and product meaning and corresponds to Kelvin's primary colors.
Below is a small sampling of the rest of the Design System visual language we did for Kelvin.