VR Store
Design System

How I led the end-to-end redesign of VR Store's Design System — from units, page rhythm, to cohesion across pages.

650M+ platform value 10,000 unique titles +1.31%+ engagement +1.25%+ total purchase volume

Before

Key problems

Above the fold

UXR indicates that it's not immediately clear that the Store is scrollable — due to the subtle scroll affordance.

Below the fold

Scroll units feel disjointed with inconsistent grids, metadata, and badging. There is also no set rhythm with featured units appearing back-to-back or long periods of mundane shelves before another feature unit is seen.

Accessibility & adaptability

This design does not scale to responsive panel sizes, additional languages, or large text for accessibility. Everything was originally designed to be fixed.

Product Changes

Personalized to you

2026 marks the moment we're shifting Store from a model that's optimized the same for everyone to one where Store is tailored to you: to your interests, tenure, device, local, and accessibility needs. This has never been done before and requires a total reset.

Editorial guides discovery

Editorial doesn't just surface apps — it helps users understand our platform and Meta's recommendations. Our ambition is to build a system of entry points across the full funnel so that editorial context reaches users wherever they are in their journey.

Scalable and accessible

Prior to this work, Store was fixed (always 1024x640) with no support for localization or text resizing. This marks a transformative modernization to our components and design system—starting from the ground up.

My role

I was the IC leading this work from strategic exploration through execution. I partnered with my team of 3 other product designers on the impact to specific screens that they worked on, and design leadership and XFN partners on strategy and vision.

Timeline

This is a large body of work that spanned almost a year in total. Some pieces (e.g., featured card system) were shipped in 2025, others (e.g., above the fold) early 2026, and others remained on the product roadmap till my departure in May 2026.

Process

Before jumping into the details of units or behavior, I started with the foundational question of the grid — specifically, the role of H-scroll in VR.

Store grid 1

Every section is horizontally scrollable

Store grid 2

Only standard sections are horizontally scrollable

Store grid 3

No horizontal scrolling

After aligning with the team on the decision to simplify by removing the volume of H-scrolls in VR, I started to explore and identify the key areas to improve:

Predictable browse rhythm

Predictable browse rhythm

Standardized featured unit system

Standardized featured unit system

Editorial at the right times

Editorial at the right times

Immersive at the right times

Immersive at the right times

Responsive breakpoints

Responsive breakpoints

Optimized above the fold

Optimized above the fold

Following this, I went deep into each of these areas, iterating and ideating on how to optimize the system.

Metadata Simplification

Metadata before

Before

Metadata after

After

Metadata system included 32+ variants

All variants

← drag to explore →

Feature Units

Initial explorations

Initial explorations

Ideation

Ideation

Leadership presentation

Leadership presentation

Motion explorations

Above the Fold

Before — above the fold

Control

Key problems

  1. Subtle and unclear scroll affordance
  2. Missed opportunity to showcase immersive gameplay
  3. Duplicative title and logo within the art
Process 1

Initial explorations

Process 2

Wireframe explorations

Process 3

Motion exploration

Standardization Applied Across Pages

Standardization applied across pages

← drag to explore →

Navigation

If we do nothing

The amount of items we can show will be severely limited on small panels and with large text

Nav before

If we simplify

Truncation will be limited to edge cases only (smallest panels + large text)

Nav after

Where will simplified items move to?

Nav categories

Sales moved to category dropdown and updated to become adaptable

Nav menu

Wishlist and balance moved under profile

Solution

Home Above the Fold

Before

Before

After

After

Browse Scroll

Before

Before

After

After

Bottom of Page

Before

Before

After

After

Category Dropdown

Before

Before

After

After

Category Page

Before

Before

After

After

Impact

The updated design system unblocked responsive panels, AI automated personalization, made Store accessible to all, and simplified browsing — resulting in topline engagement, impressions, and title conversions.

Reflections

What went well?

Metadata simplification resulted in +1.31% engagement and made recommendations clearer with less redundancy, and responsive panels unlocked a more natural way of interacting with the app.

What would I do differently?

Allow top charts to be more flexible — showing a higher number of titles or alone without needing to group with 2 other cards. Additionally, I would look for more ways to increase the density of standard sections without moving to the list style section.

sgficke@gmail.com | Résumé