Elephant Insurance, 2024»2025
Trunk Components
Design System and Angular Component architecture
Design System
Beginning the work in Figma, I created interactive components demonstrating more flair from Elephant's new branding in the base web app elements. The Figma component library has allowed me to quickly design new layouts while maintaining consistency and accessibility considerations.
Component Architecture
Using Angular and TypeScript, I then created a developer friendly component library for our form and page layouts, allowing developers to add new functionality without getting bogged down by brand styles and accessibility considerations.
To allow these components to be easily shared across projects, I created a private npm repo on Github to host it as a package. During this process, I used Storybook to test individual components before including them in a new project.
In Action
After verifying with Storybook, we included them in the account login project, creating a much more branded experience with a customized layout, but using the components made this a cinch to put together.
