XBOX

OVERVIEW

Designed a landing page for the Xbox Series X pre-launch campaign, focused on encouraging users to pre-register their interest via a form. The page aimed to build excitement, highlight key features, and drive sign-ups — all within a concise, user-friendly layout.

ROLE

Digital designer

DATE

2020

CHALLENGES

  • The registration form had to be visible and inviting without overwhelming users or distracting from the main content.
  • The page structure needed to flow logically while respecting user attention spans.
xbox hero

RESEARCH

GETTING TO KNOW THE XBOX GAMER

  • Xbox gamers are tech-savvy and loyal to the ecosystem, valuing performance and exclusives.
  • Most pre-order buyers are already familiar with the console’s key features - they’re early adopters eager to be first and stay ahead.
xbox-research
xbox-research

USER PERSONA

CREATING FOCUS

I developed a user persona to guide the layout, ensuring the landing page addresses buyer goals and pain points effectively.

USER EXPERIENCE

USER FLOW MAP

I created a user flow diagram to visualize how gamers interact with the landing page and what influences their actions.

xbox-research
xbox-research

MID-FIDELITY DESIGN

WIREFRAMES

I developed wireframes to plan the page structure and user flow, then presented the concept to the stakeholders for feedback and alignment.

USER INTERVIEWS

DISCUSSIONS

I spoke directly with potential buyers and used their feedback to further improve the UX and UI of the landing page.

xbox-research

FINAL DESIGN

  • Placed the registration form immediately below the header to ensure quick access for customers ready to sign up.
  • On mobile, where the form isn’t visible in the first fold, I added a prominent "Pre-register Your Interest" CTA for better usability and to keep the primary action accessible without scrolling.
  • Paid close attention to the spacing between CTAs on mobile to avoid accidental taps and ensure a smooth, accessible user experience.
xbox-final

KEY FEATURES

STICKY NAVIGATION

  • Included a sticky 'Pre-register your interest' navigation that appears once users scroll past the form section, giving them a quick way to return and sign up at any point in their journey.
  • Added the product name to the sticky navigation to keep users oriented as they scroll and reinforce brand recognition.

KEY FEATURES

COLLAPSIBLE FEATURE TABS

  • Reduces visual clutter – hides long blocks of text until the user requests them.
  • Supports mobile usability – collapsible sections fit smaller screens without endless scrolling.
PREVIOUS
PROJECT
NEXT
PROJECT