Bungie Website Rearchitecture

Your Role: Design Lead; UX/UI Design; Design Systems; Content Architecture; Responsive Design; Team Leadership

Timeline & Tools: Tight-deadline migration project following Bungie’s acquisition by Sony; Figma and interactive prototypes

Summary: Following Bungie’s acquisition by Sony, I led the design effort to centralize marketing website management across organizations. Working with a team of UX designers and contractors, I audited and consolidated 12+ existing marketing pages into 20+ highly configurable responsive components, reducing bespoke components to just five while preserving the immersive qualities of Bungie’s game experiences.

The Problem

The Challenge

Bungie’s marketing websites had evolved through individually designed and developed experiences. While pages shared common UI patterns, many elements were implemented as bespoke designs or duplicated code, making the sites difficult to maintain and requiring engineering support for many content updates.

The acquisition by Sony created a need to centralize marketing website management across organizations and make the publishing process more self-serviceable for non-technical teams.

The challenge was particularly complex for Destiny 2. Its marketing experiences relied on large expressive artwork, layered PNGs, unique compositions, parallax effects, and other visual treatments that created an immersive connection to the game. A rigid component system could make the websites easier to manage, but risked stripping away the visual qualities that made the experiences distinctive.

The goal was to create a flexible system that could support the needs of marketing and content teams while retaining the visual character and information architecture of the existing experiences.

Target Audience

The primary users were Bungie’s marketing and content teams, who needed to create and maintain pages without relying on engineering for every change.

The secondary audience was the players visiting Bungie, Destiny 2, and Marathon marketing websites. The resulting experiences needed to remain visually engaging, intuitive, and consistent across screen sizes.

User Needs

Content authors needed to:

  1. Create and update marketing content without technical implementation.

  2. Reuse established page structures and UI patterns.

  3. Configure imagery, backgrounds, colors, text, tables, timelines, and other content.

  4. Produce visually distinct pages while working within a consistent system.

  5. Maintain content across responsive screen sizes.

Users needed:

  1. Consistent information architecture and navigation.

  2. Clear and predictable content structures.

  3. Visually immersive experiences that reflected the identity of Bungie’s games.

  4. Responsive experiences that maintained their visual impact across devices.

Research

User Research

I led an audit of 12+ existing Bungie marketing webpages across Destiny 2 and Marathon, examining their content structures, UI patterns, visual treatments, and responsive behavior.

The goal was to understand which elements could be consolidated into reusable patterns while identifying areas where visual or functional requirements justified a bespoke solution.

The resulting system was also tested internally with content authors and design partners to validate whether the proposed components provided enough flexibility to satisfy marketing needs while making page creation more consistent and manageable.

Competitor Analysis

Rather than focusing on external competitors, the primary research opportunity was within Bungie’s existing ecosystem. Comparing the existing pages revealed repeated patterns that were being independently designed and implemented across different experiences.

This allowed the team to identify opportunities to consolidate similar structures while preserving the visual treatments that made individual campaigns and game experiences distinctive.

Key Insights

  1. Modular does not have to mean generic. Reusable components could provide a consistent structural foundation while still allowing content teams to create visually distinct experiences.

  2. Component boundaries should follow content needs. The goal was not to componentize every visual pattern, but to identify meaningful structures that could be reused across different marketing needs.

  3. Responsive imagery required art direction. Destiny’s expressive artwork often depended on composition and layering, requiring more than simply scaling images between screen sizes.

  4. Visual treatments and content structures could be separated. A flexible wrapper system allowed expressive visual sections to contain standard content modules without creating new bespoke components for every combination.

  5. Bespoke experiences still have value. New season and expansion announcements benefited from custom designs, while ongoing marketing content could transition into the modular system for easier maintenance.

Ideation

Sketches

The design process began by breaking down existing webpages into their underlying content and visual patterns. Rather than treating each page as a single bespoke experience, I worked with the UX team to identify the individual structures that could become reusable modules.

Wireframes

Low-fidelity explorations were used to test how common content structures could be adapted into configurable components.

The team explored different combinations of content, imagery, layout, and visual treatments while considering how each module would behave across screen sizes.

This process helped distinguish between reusable structures and genuinely unique experiences, allowing us to reduce unnecessary duplication without compromising the visual quality of the pages.

Information Architecture

The existing information architecture was retained wherever possible so that migration would not unnecessarily disrupt the user experience.

At the component level, the architecture evolved from individually implemented page sections toward a modular hierarchy:

CMS Page → Visual/Wrapper Sections → Reusable Content Components → Configurable Content

One of the most important solutions was the creation of custom wrapper sections. These wrappers could provide unique visual treatments such as full-bleed imagery, overlaid PNGs, and parallax effects while containing standard modules such as three-column layouts or alternating image-and-text sections.

This allowed multiple combinations of visual and content patterns without creating separate bespoke components for each combination.

Visual Design

Design System

I led the consolidation of existing UI elements and UX patterns into a system of 20+ reusable responsive components.

Components were designed to provide content authors with meaningful configuration options, including:

  1. Custom color schemes

  2. Background imagery

  3. Content imagery

  4. Text content

  5. Tables

  6. Timeline dates

  7. Layout and content configurations

  8. Responsive image behavior

  9. Visual treatments such as overlays and parallax

The system was designed to provide controlled flexibility rather than unlimited customization. This allowed authors to create varied marketing experiences while maintaining consistent underlying structures and behavior.

High-Fidelity Mockups

High-fidelity mockups were created in Figma to demonstrate how the modular components could support the visual language of Bungie’s marketing websites.

I created interactive mockups across screen sizes to validate responsive behavior and explore how expressive Destiny 2 artwork could adapt to different layouts without losing its intended composition.

The final system supported visually distinctive pages while sharing a common set of underlying components.

Interactions

Interactive prototypes were used to demonstrate responsive behavior and component configurations across desktop and mobile layouts.

Particular attention was given to complex visual treatments including:

  1. Large full-bleed imagery

  2. Overlaid PNG assets

  3. Responsive image positioning

  4. Nested content layouts

These interactions helped the team evaluate whether the components could preserve the immersive qualities of the original designs while remaining flexible enough for CMS use.

Results & Impact

Metrics

  1. 12+ existing marketing webpages audited and migrated

  2. 20+ reusable responsive components created

  3. 5 bespoke components remaining after consolidation

  4. Marketing pages became considerably more self-serviceable for content teams

The migration significantly reduced the need to create a new bespoke implementation for every marketing page or content update.

Lessons Learned

I initially questioned whether it would be possible to reduce the number of bespoke components as aggressively as the project required without compromising the visual quality of Bungie’s marketing experiences.

Working closely with content creators changed that perspective. By understanding the content and creative needs behind the existing pages, we were able to identify modular solutions that preserved visual variety without reproducing the same structures across multiple bespoke components.

The project reinforced the importance of designing systems around real content needs rather than simply abstracting existing designs. The result was a more scalable framework that balanced creative expression with the maintainability and consistency required by a centralized CMS.