Xbox Rewards:
Details Framework
UI System
Xbox circa 2023 - Present
- Product Designer 3
- UI
- Visual Design
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