Developed Component Library to Create Consistency Among 118 Member Organizations
With an increase in the amount of webpages we were creating, our team recommended to GS1 that we create a Figma component library. Our goal was to create a library based off the established one for their US member organization to increase our efficiency in designing layouts and create better consistency between each webpage. By working alongside our development and UX teams we built a functional library with over 1,000 components for both mobile and desktop screens. This allowed us to increase our project delivery and spend more time considering information architecture, visual design, and interactive elements.
Agency
Bailey Brand Consulting
Role
Designer
Deliverables
Component Library
Our Process
We started off by meeting with our UX and development team to come up with a plan to tackle this large component library. We were at an advantage with having GS1 US’s components as a starting point but it would still require a lot of time to plan, build, test, and finalize the library.
We set up a homepage in Figma with a schedule and assigned each designer to a list of components to build. Over a month, we dedicated hours to building each component, watching tutorials, and troubleshooting problems with one another.
As each component was finished, our UX team reviewed and tested them, leaving feedback on the ones that were broken or not built correctly. We frequently collaborated with them on fixing components that we struggled with or to review our progress.
Finishing the Library
After all components were finished, we shared the library with our client to review with their development team for approval. The end result was a massive Figma component library with over 1,000 functional, interactive components.
The library will accelerate the team’s design process when creating webpages and applications. More thought can now go into visual design and adding interactive elements while allowing for more projects to be taken on while maintaining our tight deadlines. Overall, the Figma component library increased our project delivery by 30%.