“How can I design and build UIs in a way that is maintainable, fast, and scalable?” Answering this question was the goal of this project.
NomadHair Component UI Library solves this problem with a shared library that bridges the gap between design and engineering workflow.
Role
Designer, Developer
Scope
Design System Foundation,
Component Design,
Storybook Component Library,
Automating Accessibility Test
Timeline
Mar 2024 - Apr 2024
While creating UI layouts, I looked for repeated use of color, font sizes, or other styles. If any elements were to be used throughout the project, I abstracted them out into a design system.
This way, I could avoid making the same design decision twice.
Building in Component-Driven Approach
The challenge of modern UI development stems from an ever-increasing pace of change, customizations, and unpredictability that require rapid iterations.
This way, I could avoid making the same design decision twice.
I adopted a Component-Driven approach by designing UIs at the smallest component level.
Bridging Design & Development (feat. Storybook)
The challenge of modern UI development stems from an ever-increasing pace of change, customizations, and unpredictability that require rapid iterations.
This way, I could avoid making the same design decision twice.
I adopted a Component-Driven approach by designing UIs at the smallest component level.
Automating Testing with Github CI
Testing is integral to every product development process.
Beyond just being able to iterate quickly, I implemented accessibility and interaction tests to ensure the quality of each UI component being designed and built.
To take this a step further, I used Github CI to automate testings for accessibility, interactions, and visual regressions.
Every time I push code to dev branch, Github CI will run UI tests to verify the changes, which keeps the productive workflow