Game Title Pages
Contents
Intro
Product pages were designed for 2K’s AAA game titles, each tailored to reflect its distinct brand identity while maintaining a consistent user experience across the portfolio. Key deliverables included sitemaps, user flows, wireframes, style kits, and high-fidelity visual designs for each game.
Challenge
Each game presented a unique tone, audience, and visual style, from historical strategy to stylized shooters and fast-paced sports simulations. The challenge involved creating pages that remained true to each title’s brand while supporting consistent structure, scalability, and user engagement.
Solution
A modular, component-based design system was implemented and customized per title. Visual styles, content hierarchy, and interactive elements were adapted to match each game’s aesthetic, ensuring a cohesive user journey from content discovery to purchase across desktop and mobile platforms.
1. Introduction

Designing product pages for 2K’s AAA titles required a tailored approach that balanced consistency with creative flexibility. . Each page needed to resonate with its specific audience, whether fans of turn-based strategy, fast-paced sports, or action-driven RPGs, while delivering a distinct visual identity, clear navigation, purchase options, and game details.

For this walkthrough, Civilization VI was used to demonstrate the design process. The layout reflected the game’s strategic depth, historical themes, and established legacy. The project involved mapping user flows, creating detailed sitemaps, developing wireframes, and building a style kit aligned with the game’s tone. Visual elements such as typography, colour palette, and textures were selected to support the game’s complexity and refined aesthetic. This method formed the basis for product pages across other major titles in the 2K portfolio.
Before
After
Civilization VI Homepage from Wireframe to Final Design
2. User Flow

The process began with collaborative discussions with the game studio to understand what needed to be communicated about Civilization VI. These early conversations shaped the content hierarchy and messaging goals. As a turn-based strategy game with a layered, intellectual appeal, Civilization VI required a structure that conveyed depth without overwhelming users. The sitemap and flow below were designed to guide users through the experience in a clear and engaging manner:
Civilization VI User Flow
Civilization VI User Flow
The page layout was organised into focused content sections, each designed to communicate essential game details while supporting user exploration and conversion:
This flow balanced immersive storytelling with consistent access to key actions, ensuring that users could explore and purchase seamlessly. The structure was then adapted and re-skinned for other Civilization titles and extended to fit the unique branding of additional 2K game properties.
3. Wireframing

Once the user flow and sitemap were established, the next phase focused on wireframing key page templates. Low-fidelity wireframes were created to map content hierarchy, define layout structure, and plan interactions across desktop and mobile breakpoints. Special attention was given to the placement of trailers, CTAs, edition selectors, and persistent purchase modules to maintain engagement throughout the user journey.

For Civilization VI, wireframes balanced dense strategic content with clear visual breathing space. Components were modular, allowing content updates or localisation with minimal design disruption. Interactive elements such as carousels, tabs, and anchored sections were outlined early to support development handoff and usability testing. This stage helped align stakeholders on content expectations before moving into high-fidelity design
Scroll Here
Original Homepage
Wireframes
4. Style Guide

The style guide was developed to ensure visual consistency while reflecting the distinct identity of each game title. For Civilization VI, the aesthetic leaned into a sophisticated, intellectual tone with a muted colour palette, serif typography, and map-inspired textures. Iconography and UI components were styled to echo the game’s strategic and historical themes.

Core elements such as typography scales, colour codes, button states, and card styles were documented for use across responsive breakpoints. The guide also included rules for spacing, layout grids, and image treatments to maintain alignment across internal teams and external developers.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 3
Slide 4
Slide 5
Slide 6
Civilization VI Style Kit
Each 2K title required its own set of style guidelines, which acted as the foundation for scalable design systems tailored to each brand.
5. Final Design

With the structure, wireframes, and style guide in place, the final visual design brought all elements together into a branded experience. The Civilization VI homepage was crafted to reflect the game’s strategic depth and historical richness, using layered textures, cinematic visuals, and carefully balanced typography to draw users in.

The layout emphasised storytelling and exploration, guiding users from cinematic hero content through gameplay insights, editions, and purchasing options. Interactive modules were refined for responsiveness and accessibility, ensuring an engaging experience across all devices.

Below is a screenshot of the Figma board showcasing the designs being created for all the pages. This is followed by the final homepage layout for Civilization VI, highlighting the completed visual design.
Creating the Final Designs in Figma
Creating the Final Designs in Figma
Scroll Here
Final Homepage Design
Final Homepage Design
Civilization VI Designs
6. Other Game Titles

In addition to Civilization VI, visual design systems were created for a range of other 2K titles, each with its own audience, tone, and brand identity. Every page required a tailored approach to layout, typography, colour, and content hierarchy to reflect the game’s personality while maintaining usability and consistency across the broader 2K digital ecosystem. Below is a breakdown of design considerations for each game, leading into the respective style guides and final homepage designs.

Lego 2K Drive The design leaned into a bold, playful aesthetic aimed at younger audiences and families. A bright colour palette, chunky type, and animated UI elements echoed the energy of Lego’s brand and arcade-style racing. Layouts emphasised fun and discovery, with character art and vehicles featured prominently across modules.
User Flow
Lego 2K Drive Style Kit
Scroll Here
Lego 2K Drive Homepage Design
Lego 2K Drive Homepage Design
Lego 2K Drive Designs
XCOM The promotional page emphasised a sci-fi aesthetic for the renowned tactical squad-building, turn-based combat game, with visuals of an ongoing battle against alien forces. A dark colour palette with neon highlights and stylised illustrations reinforced the gritty, high-stakes atmosphere, while clear CTAs encouraged pre-registration and community engagement.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
XCOM Style Kit
Scroll Here
XCOM Homepage Design
XCOM Homepage Design
XCOM Legends Designs
Borderlands The Borderlands design adopted a gritty, comic-book visual style aligned with its irreverent tone and cel-shaded graphics. Rough textures, bold outlines, and expressive typography captured the anarchic spirit of the franchise. Key sections featured character callouts, loot-focused mechanics, and pre-order incentives with stylised illustrations.
Scroll Here
Borderlands Style Kit
Borderlands Style Kit
Scroll Here
Borderlands Homepage Design
Borderlands Homepage Design
Borderlands Designs
A clean, editorial layout was used to mirror the sport’s prestige and performance-driven culture. Hero sections used full-screen action photography and player spotlights, while interactive edition comparisons and stat breakdowns were central to the user experience. Dark backgrounds with high-contrast red accents reflected the sleek visual identity of the game.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
NBA 2K25 Style Kit
Scroll Here
NBA 2K25 Homepage Design
NBA 2K25 Homepage Design
NBA 2K25 Designs
The design emphasised motion, clarity, and refinement. A cool-toned palette and minimalist layout allowed dynamic player visuals and gameplay animations to take centre stage. Clear typographic hierarchy guided users through match modes, editions, and career features, reinforcing the precision of the sport.
User Flow
TopSpin 2K25 Style Kit
Scroll Here
Topspin 2K25 Homepage Design
Topspin 2K25 Homepage Design
Topspin 2K25 Designs
High-energy visuals defined the design with aesthetics drawn from live-event production, using spotlights, bold colours, and dramatic imagery of wrestlers in action. Interactive galleries and animated transitions were integrated to reflect the spectacle of the WWE universe while keeping navigation straightforward and punchy.
Scroll Here
WWE 2K24 Style Kit
WWE 2K24 Style Kit
Scroll Here
WWE 2K24 Homepage Design
WWE 2K24 Homepage Design
WWE 2K24 Designs
A free-to-play, third-person roguelike hero shooter that was in active development and required a promotional page to introduce the game and build early excitement. The design focused on generating sign-ups for future playtests, using bold visuals, layered motion effects, and a futuristic interface to reflect the game’s experimental tone and evolving identity.
Scroll Here
Ethos Style Kit
Ethos Style Kit
Scroll Here
Ethos Homepage Design
Ethos Homepage Design
Ethos Designs
Created as a platform hub for 2K’s ecosystem, which required a highly modular, brand-neutral design. Neutral tones, clean grids, and scalable components supported dynamic content from multiple titles. The focus was on flexibility, accessibility, and alignment with the company’s long-term digital infrastructure.
Scroll Here
2K DNA Homepage Design
2K DNA Homepage Design
2K DNA Designs
7. Conclusion

This project brought together a wide range of visual styles and structural frameworks to support the distinct identities of each 2K game title. From the historically rich depth of Civilization VI to the high-octane energy of WWE 2K24, each page was created to reflect the tone, audience, and gameplay experience of its respective title. The design process involved close collaboration with game studios to understand the core themes, unique features, and marketing priorities that needed to be conveyed.

Consistent UX patterns were implemented to ensure usability across the ecosystem, while bespoke visual treatments upheld the integrity of each franchise. The result was a modular, scalable design system built to respond to evolving content needs, new game releases, and campaign strategies.

Working across multiple franchises highlighted the importance of adapting to different visual identities while maintaining a consistent user experience. It reinforced the need to collaborate closely with stakeholders to understand each game's marketing goals, player demographics, and narrative tone before translating them into design decisions.

These projects sharpened expertise in UI systems thinking, stakeholder alignment, and responsive design, while providing a deeper understanding of how design contributed to storytelling, user engagement, and commercial impact within the gaming industry.