Embedded Files
Overview
I spotted an opportunity to help my team's day to day work by establishing clear guidelines for design components and styles. This documentation enabled the team to be more efficient, improved consistency across design files and ensured a smooth development handoff.
Understanding the problem
I chatted with my teammates to understand our struggles, and we decided that creating a single source of truth for styles and components was a good solution to help keep everyone aligned.
I started to keep a UI inventory during my daily work, organising patterns and components in a centralised document. This visual approach highlighted areas for improvement and gained support from the team throughout the project.
Organising and designing
Using Figma, I designed common components like buttons and forms, each documented with clear descriptions and usage guidelines. Additionally, I compiled accessibility and microcopy considerations into a document to help inform future design decisions.
Testing and sharing
Components underwent testing in workshops to gather feedback, and get everyone comfortable with using the library. After refining a few flaws, the library was presented to the company and was well received.
Results
A foundational UI kit and Style Guide
Accessibility and Microcopy guidelines
Improvement in efficiency and communication between designers and developers
Google Sites
Report abuse