A byproduct of a boutique innovation consulting firm, Aperture was a strategically funded web application tasked with expediting product innovation within the materials science industry through the power of Artificial Intelligence and Natural Language Processing. A custom component library was built to seamlessly integrate into the company’s recently refreshed brand guidelines - a synthesis with the goal of distillings Aperture’s large sets of qualitative and quantitative data into readable, colorful, aggregations.

A limited design budget presented itself as an opportunity to contribute outside the boundaries of UX Engineering and within the realm of UX Design. Before my intervention, a misguided customization attempt of the Material UI component library had painted Aperture Version 0 into a visually inconsistent application with competing calls to action, questionable typographical hierarchy, and an obfuscated visual identity. We started in Figma - from low fidelity, and then to high fidelity, and then finally to high fidelity consisting of reusable styles and components. Poppins, a Light San serif font was chosen as the primary typography for its ability to accentuate the platform's approachability while also underscoring its scientific initiative. A charcoal dark mode was selected to bolster the visual presence of Aperture’s marquee data visualizations.

To avoid further messy customizations of mixed success, MaterialUI was removed from the toolbox (and the package.json). In its place, a custom component library was engineered into a consumable and semantically versioned NPM package. Storybook and custom Tailwind configurations were used to ensure pixel perfect implementations of corresponding Figma components, with the intention of creating a UI library that was as reusable and organized as its Figma counterpart.