Styles
The foundations of the design system: colors, icons, containers, and typography.
From the beginning, I collaborated with UX, product, engineering, and marketing. Throughout my time there, I noticed inconsistencies in the assets used by different teams. The engineering team had its own design system rules, while the UX team used component designs from wireframes based on past projects. This disconnect between designs and what was built highlighted the need for a consistent approach across both teams.
After discussing with each team, we concluded that we needed to create a component library based on both engineering and UX standards to ensure it could be used and understood by both sides. Additionally, we aimed to combine marketing and product icons into one library for a more consistent and cohesive look. We also sought to provide a consistent appearance for data visualization used in the platform and within marketing collateral.
I collaborated with the UX team to audit the engineering design system standards used on an internal documentation site and UX designs from their mocks. We assessed what we had and what was needed from stakeholders. While building the initial component library, I explored typography, colors, small elements (buttons, etc.), larger components, data visualization, and iconography. I also wrote and published a blog discussing why and how the component library was built.
The foundations of the design system: colors, icons, containers, and typography.
Redesigned icons based on Feather icons which was used in the platform at the time then combining with common icons used within marketing materials by the marketing team.
Built off of the atoms of the design system, these core components such as buttons and form fields would create the bigger components and then eventually pages/layouts.
Pre-built graphs commonly used in the platform built out in the design library.
One of the features that the UX team wanted within PreAmp was the ability to have components be responsive cause of the vast differences in user browser sizes.
Common layouts built within PreAmp using atoms, molecules, etc from the PreAmp Design System.
After discussing with each team, we concluded that we needed to create a component library based on both engineering and UX standards to ensure it could be used and understood by both sides. Additionally, we aimed to combine marketing and product icons into one library for a more consistent and cohesive look. We also sought to provide a consistent appearance for data visualization used in the platform and within marketing collateral.