BunGIE Component SYSTEM and Style Guide
My Role: Design Lead on Bungie's central creative team. Design systems, component documentation, accessibility, and leading a team of 3 designers.
Timeline and Tools: The first 2 months on the team, preparing Bungie's web properties for migration to Adobe Experience Manager. Figma.
Summary: As Design Lead, I prepared Bungie's web properties for migration to a new content management system. I led a team of 3 designers to consolidate pages across Bungie and Destiny and document components and design tokens in one shared library. The result was more consistent designs, fewer bespoke elements, and faster turnaround.
The Problem
The Challenge
Design assets at Bungie were scattered, so design and art teams made custom decisions for each project. Deliverables were inconsistent, and even simple projects needed several rounds of revisions between design, engineering, content, and product teams.
Existing style guides were static and covered only the basics, like fonts, colors, and icons, which had grown a lot since the guides were first written. Some common components had documentation, but it lacked depth on interaction, localization, accessibility, and mobile use.
Target Audience
The library served the teams who build and ship Bungie's web experiences, including designers, artists, engineers, content authors, and product teams.
User Needs
These teams needed one reliable source for design assets, components they could reuse without custom work, and documentation detailed enough to avoid rounds of back and forth.
Research
Audit
This was an internal audit, not a user research project. Because the goal was to consolidate styles without changing the core experience of the website, we did not run user testing. I led an audit of existing components across Bungie and Destiny pages to find unnecessary variations and agree on consistent UX patterns. We also reviewed where documentation fell short, especially for localized content, accessibility, small screens, and touch interaction.
Key Insights
These came from similar libraries I have built at past companies.
Good documentation gives new work a solid starting point. Teams can approach new features with confidence instead of starting from scratch.
Shared guidelines make onboarding faster. New designers can get up to speed quickly.
A common vocabulary helps teams solve problems together. Everyone describes the same component the same way.
Design Process
Foundations
I personally designed and documented the foundational elements, consolidating type, colors, form elements, tables, and buttons. I made sure everything met accessibility standards. Working with partner design and art teams, we gathered all images, icons, colors, and fonts into a single resource. We gave each one an engineering-friendly label, called a token, and updated the underlying code to use them.
Component Library
I consolidated one-off concepts like tabs, dividers, calls to action, and product comparisons into reusable components. We moved components from across Bungie and Destiny pages into a Figma design library and removed duplicates and unnecessary variations. I strengthened the documentation to cover:
Variations for different text lengths and reading directions
Replacing hover-based interactions that were not accessible
Alignment with Google's mobile and touch design recommendations
Key Decision
The biggest challenge was getting buy-in from design directors that this project was necessary. What won them over was seeing how much simpler it made the website rearchitecture happening at the same time.
Results and Impact
Outcomes
Designs became more consistent, and turnaround time dropped considerably
Fewer bespoke elements and fewer rounds of revisions
Designers could collaborate more easily, and projects could be handed off during time off because guides and components lived in a shared document instead of with one person
Lessons Learned
A shared system does more than keep designs consistent. It also makes teams more resilient, because work no longer depends on a single person's files or knowledge.
It also makes future projects quicker. With a solid foundation in place, the team moves faster overall and spends less time maintaining designs.
