Bungie Website Rearchitecture
My Role: Design Lead. UX/UI design, design systems, content architecture, responsive design, and team leadership.
Timeline and Tools: A tight-deadline migration following Bungie's acquisition by Sony. Figma and interactive prototypes.
Summary: After Bungie was acquired by Sony, I led the design effort to centralize how marketing websites are managed. I audited 12+ pages and consolidated them into 20+ flexible, responsive components, leaving only five bespoke ones while keeping the immersive feel of Bungie's games.
The Problem
The Challenge
Bungie's marketing sites were each built one at a time, which made them hard to maintain and meant most content updates needed an engineer. The goal was a flexible, self-serve system that kept the rich visual character of pages like Destiny 2, with its layered artwork and parallax effects.
Target Audience
Primarily Bungie's marketing and content teams, who needed to build pages without engineering help. Secondarily, players visiting the Bungie, Destiny 2, and Marathon sites.
User Needs
Authors needed to update content on their own, reuse proven page structures, and still create distinct pages on any screen size. Players needed clear, consistent, and immersive experiences on every device.
Research
User Research
I led an audit of 12+ Destiny 2 and Marathon pages to find what could be reused and what truly needed a custom design. We then tested the components with content authors and design partners to confirm they were flexible enough.
Competitor Analysis
The most useful comparison was within Bungie itself, where the same patterns were being designed and built again and again.
Key Insights
Modular does not have to mean generic. Shared components can still produce unique looking pages.
Responsive imagery needs art direction. Destiny’s expressive artwork often depended on composition and layering, requiring more than simply scaling images between screen sizes.
Style and structure can be separated. Flexible wrapper sections let expressive visuals hold standard content modules.
Custom work still has value. Big announcements suit bespoke design, while ongoing content fits the system.
Design Process
Structure and Wireframes
I worked with the UX team to break existing pages into reusable content and visual patterns, then used low-fidelity wireframes to test how they could become configurable components across screen sizes. We kept the existing page structure to avoid disrupting users. Each page is built from visual wrapper sections that hold reusable components. These wrappers carry effects like full-width imagery and parallax, which gave us many combinations without new custom components.
Design System
I led the consolidation of existing UI into 20+ responsive components. Authors can configure colors, imagery, text, tables, timelines, layouts, and visual effects, with controlled flexibility that keeps pages consistent.
Mockups and Prototypes
Figma mockups and interactive prototypes across desktop and mobile showed how Destiny 2 artwork could adapt to different layouts without losing its composition. They also confirmed the components kept the immersive feel while working in a CMS.
Results and Impact
Metrics
12+ pages audited and migrated
20+ reusable responsive components created
5 bespoke components remaining
Marketing pages became much more self-serve, with far fewer custom builds
Lessons Learned
I wasn't sure we could cut bespoke components this far without hurting visual quality. Working closely with content creators showed me that understanding real content needs leads to modular solutions that keep variety and consistency together.
