B.X.T.

< Portfolio

Xbox Rewards:
Details Framework

UI System

Xbox circa 2023 - Present

The details system was devised to be a flexible template that would be able to handle a majority of the content pages that include but not limited to quests and redeemables.

The Plan So Far

TBD

The Framework

The main layout is structured around 3 content areas that are re-arranged depending on the device form factor. This layout structure was designed to support: 1) console, 2) desktop, 3) handheld, and 4) mobile. As for web, this has been out of scope, but the design system can support web experiences.

Multiplatform Responsive Layout

For the most part, the Rewards details pages are designed around the use of modal overlays.

The main reason is so that it makes it possible to have a somewhat consistent design across platforms especially on desktop where the viewport width can fluctuate depending on user's preference. This attempts to minimize large empty gaps when there isn't enough content to fill in any given space.

Secondarily, this allows Rewards content to live outside of its domain, meaning other parts of the Xbox ecosystem could invoke Rewards content in their domains without taking out and disrupting the user's current experience.

Why is this necessary? The objective of the Rewards program is to integrate throughout the Xbox exosystem as a monetization and engagement support system.

Overview Block

This gives the user a quick summary of their progress for a quest/redeemable and any key tasks that may require their attention. It was designed to be scalable in terms of allowing for supporting different types of tasks that require tracking progression.

Details Block

An overview is not always enough. This block was designed to contain smaller content blocks that stack and can be specifically ordered or conditionally based on the user's journey.

Quest Trackers

TBD

Claim States

This was a new pattern created to catch the attention of the user in a big way by applying an accent color to key elements to indicate an action is required.

Other Conditional States

TBD

Dropdown Behavior

TBD

Color Themes & Acessibility

TBD

Input Modality

TBD

History

TBD

Merging experiences

TBD

Pain Points

TBD

Early Explorations

This is where the current designs began———as a side project while I waited in between assignments.

Content Expansion

Content is king. Coming from a content and monetization background, I drew up some new quests to replace the ones that were offered by Microsoft Rewards on the Xbox to add more types of engaging content. Additionally, the plan was to create a new revenue stream by offering an alternate market research venue via sponsorships.

Unfortunately is not an avenue to consider because it was noted that it would be "too much work" to build an infrastructure to support a more robust experience.

Later Explorations

This is where it became what it is today.

Quests

TBD

Sponsorship Exploration

TBD

Non-points Quests Explorations

TBD

Treat Yo'self

TBD

Kindness

TBD

Catch-all Template???

When I first started working on this framework, it was originally intended to be specifically for quests. As time went, I relized that the task of quests and redeemables were very much the same, each needing X of Y to earn or redeem.

I ended up pressure testing the UI to see if it was possible to produce other types of content.

From my explorations, I determined it was possible, but would it be the right thing to do. Sometimes it's useful to have different templates to help distinguish purpose of a task or whatnot.

Growing Pains

Legacy drags down progress.

If It Ain't Broke...

TBD

That's all folks!