Avatar Frames for NFL Super Bowl Slots
AI-Augmented Feature Development.
Exploring how AI can accelerate feature development from early concept through UX and UI.- Duration
- 3 DAYS
- Scope
- CASE STUDY · 7 MIN READ
- AI Software
- Claude Design, Claude Code, ChatGPT, Figma Make, Firefly, DaVinci
- 01 Feature Definition
- 02 Assumption Mapping
- 03 Research & Insights
- 04 UX / Prototype
- 05 UI
* This is an independent conceptual case study created for portfolio and educational purposes. The concepts, designs, and workflows presented here are not affiliated with or created for Product Madness. Any references to an existing game are used solely to illustrate how AI-assisted workflows could be integrated into an established product experience.
Define the feature
Framing the concept, the player problem, and the hypothesis worth testing.
Using ChatGPT as an ideation partner, I provided the feature concept, player problem, and initial hypothesis. AI helped challenge assumptions, explore different perspectives, and refine the thinking into a focused product hypothesis.
Feature Concept — Avatar Frames
Avatar Frames introduce a new layer of player identity and personalization to NFL Super Bowl Slots. Players can earn, collect, and equip cosmetic frames representing team affiliation, progression, achievements, seasonal events, and other accomplishments.
The feature gives players a visible way to express who they are, what they support, and what they have accomplished.
The Opportunity
NFL Super Bowl Slots already creates a strong sense of team identity. I saw an opportunity to extend that experience by giving players more ways to express their individual identity, achievements, and status.
Drawing from my experience developing Avatar Frames for Big Fish Casino, I explored how a similar system could be adapted around NFL fandom, achievement, collection, and progression.
This case study uses Avatar Frames to explore how AI can accelerate feature development from early ideation and player insights through UX, and UI while keeping product and creative decisions in the hands of the team.
Giving players visible ways to express their team identity and accomplishments will increase the perceived value of progression and rewards while creating a stronger foundation for future social features.
This is who I am.
This is what I've accomplished.
This is what I've earned.
Define what we need to validate
Before investing in UX and visual design, I wanted to identify the assumptions behind the feature and determine what needed to be validated with players.
I used ChatGPT to pressure-test the initial feature hypothesis, surface assumptions I may have overlooked, and organize them into areas for validation. AI expanded the areas worth exploring; I evaluated and prioritized the assumptions most relevant to the feature.
How strongly players want additional identity expression.
Whether visibility actually increases perceived reward value.
Whether frames influence engagement or participation.
How much customization players actually want.
Research planning
With the core assumptions identified, the next step was translating them into research questions that could validate whether Avatar Frames would provide meaningful value to players.
I used ChatGPT to expand the question space, organize questions around the core assumptions, and identify potential gaps in the research plan. I then refined and prioritized the questions most relevant to the feature hypothesis.
Player Identity
- How important is NFL team identity outside of the core gameplay experience?
- What aspects of their player identity would players most want others to see?
Collection & Rewards
- What makes a cosmetic reward feel worth earning?
- Which types of frames would players value most: team, achievement, event, rarity, or progression-based?
Social Visibility
- Do players value rewards differently when other players can see them?
- Where would players want their identity and accomplishments displayed?
Usability & Complexity
- How much customization do players actually want?
- Would another collectible system feel rewarding or overwhelming?
Validation & findings
Without access to live players for this conceptual case study, I used ChatGPT to simulate a range of player perspectives and pressure-test the feature hypothesis before moving into UX.
These simulated perspectives are NOT Consumer Insights and are not a substitute for player research or usability testing. In a production environment, these assumptions would need to be validated with real players. Here, AI is used to broaden the perspectives considered, surface potential risks and opportunities, and help identify what should be explored during prototyping.
I prompted ChatGPT to respond to the research questions from the perspective of players with different motivations and behaviors. Rather than asking ChatGPT to validate the feature, I intentionally used it to generate both positive and critical reactions to challenge the concept from multiple perspectives.
Simulated Player Perspectives
“I'm a lifelong fan of my team. If I've chosen them in the game, I'd want my profile to represent that too. I'd probably use a frame tied to my team or something I earned during the season.”
Team affiliation could be a strong foundation for player identity.
Explore team-based frames as an accessible entry point into the system.
“A basic team frame wouldn't mean much to me if everyone gets one. I'd rather equip something that shows I completed a difficult challenge or participated in a special event.”
Achievement and exclusivity may increase the perceived value of a frame.
Explore frames as visible representations of progression, milestones, and accomplishments.
“I mostly play to relax. I don't spend much time changing my profile. If I earned something cool and could equip it right away, I might use it, but I wouldn't want to dig through a bunch of menus.”
Deep customization may not appeal to players primarily motivated by relaxation.
Explore one-tap equip when a frame is earned, with deeper customization available for players who want it.
“I'd want to see which frames I've earned and which ones I'm still missing. Limited frames during the playoffs or Super Bowl would give me something else to work toward.”
The collection itself could become part of the motivation.
Explore a collection view with earned, locked, rare, and limited-time frames.
“I don't really care what other players see on my profile. I'm mostly playing for myself.”
Social visibility alone may not provide enough value for every player.
The system should also create value through personal achievement, collection, and customization rather than relying solely on social status.
What Did Scenario Testing Surface?
| Assumption | Simulated Perspective | What Still Needs Validation |
|---|---|---|
| Identity matters | Potentially strong for team-driven players | How strongly players want additional identity expression |
| Visibility creates value | Value may vary significantly by player motivation | Whether visibility actually increases perceived reward value |
| Collection motivates | Potential opportunity for collectors and achievement-driven players | Whether frames influence engagement or participation |
| Simplicity matters | Low-friction interactions may be important for relaxation-oriented players | How much customization players actually want |
Move Into UX Exploration
The simulated perspectives surfaced enough potential value to continue exploring the concept, while also identifying important risks and unanswered questions.
Team affiliation should provide an intuitive starting point.
Frames should have the potential to communicate what a player has earned or accomplished.
Players who are motivated by collection should be able to understand what they own and what remains available to earn.
Players should be able to equip a newly earned frame quickly without being forced into a deeper customization flow.
The feature should provide value through identity, achievement, and collection even for players who aren't socially motivated.
Where AI Stops
AI helped expand the perspectives considered and identify questions worth exploring, but it did not validate the feature.
In a production environment, Consumer Insights, player interviews, behavioral data, and usability testing would remain essential before making significant product decisions. AI can help teams identify assumptions and potential edge cases earlier, making real player research more focused, it should not replace it.
UX Exploration & Prototyping
With the feature hypothesis defined and key UX considerations identified, the next step was exploring how Avatar Frames could fit into the existing player experience.
The goal at this stage was not visual polish. It was to determine where the feature should live, how players discover it, and how they move between earning, equipping, and managing their collection.
I used ChatGPT as a UX thought partner to explore multiple ways Avatar Frames could integrate into the existing experience.
I provided the feature requirements, player considerations, and product constraints, then used Claude Design and Figma Make to generate alternative interaction models, identify potential friction points, and surface edge cases.
Claude Design and Figma Make accelerated the exploration of possible flows. I evaluated the alternatives and selected the direction that best balanced discoverability, simplicity, and collection depth.
UX Direction
When players earn a frame, they can immediately preview and equip it.
Players can access their equipped frame and collection through their existing player identity.
Players who want more depth can browse earned, locked, limited-time, and achievement-based frames.
Core Flows
The quick path keeps the experience lightweight for casual players, while the deeper path gives collectors and achievement-driven players more control.
Prototype Scope
The initial prototype focuses on the minimum interactions needed to evaluate the feature:
-
01Frame Earned
A player receives an Avatar Frame through gameplay, progression, or an event.
-
02Reward Preview
The frame is shown around the player's avatar with context explaining how it was earned.
-
03Equip Now
The player can equip the frame immediately with one action.
-
04Player Profile
The equipped frame becomes part of the player's visible identity.
-
05Frame Collection
Players can view earned and locked frames.
-
06Frame Details
Selecting a frame reveals its source, rarity, requirements, and status.
-
07Equip / Change
Players can switch their equipped frame from the collection.
- Can players immediately understand what an Avatar Frame is?
- Is it clear why and how a frame was earned?
- Can a frame be equipped without unnecessary steps?
- Can players easily find their collection later?
- Is the distinction between earned and locked frames clear?
- Does the system provide enough depth for collectors without overwhelming casual players?
I used Claude Design and Figma Make to turn my UX direction and wireframes into a functional interactive prototype.
I defined the feature logic, user flows, information hierarchy, and interaction requirements, then iterated with Claude Design and Figma Make on the implementation until the prototype reflected the intended experience.
UI Design
Turning the validated UX direction into a scalable visual system.
Before moving into final UI, I used the same UX direction and wireframes across multiple AI tools to explore how each interpreted the visual system. The outputs varied significantly in hierarchy, product fidelity, component treatment, and visual style. Rather than selecting one output as the final design, I evaluated the strengths and weaknesses of each to understand where AI could and couldn't accelerate UI development.
CLAUDE | Structure | Preserved the original wireframe structure and interaction architecture.
ChatGPT | Hierarchy | Strong hierarchy and consistent interpretation across screens.
DaVinci | Frame design | Strong exploration of frame designs and collectible presentation.
FIREFLY | Brand fidelity | Captured the game's existing visual language most effectively.
FIGMA | Components | Produced the most cohesive and editable UI system across the full flow.
AI Tools for UI Design
The same UX direction and wireframes run through five AI tools, compared on what each contributed and where each fell short.
Tool Comparison
| Tool | What it did well | What I'd take from it | Main weakness |
|---|---|---|---|
| Claude | Preserved the original wireframe structure and interaction architecture. | Structure · UX fidelity | Least visually resolved; felt more like a skinning pass than production UI. |
| ChatGPT | Strong hierarchy and consistent interpretation across screens. | Hierarchy · UI system | Polished, but didn't consistently feel native to the existing product. |
| DaVinci | Strong exploration of frame designs and collectible presentation. | Frame design · Collectibility | Weaker system consistency across the full experience. |
| Firefly | Captured the game's existing visual language most effectively. | Brand fidelity · Game integration | Generated details became inconsistent and required significant designer cleanup. |
| Figma | Produced the most cohesive and editable UI system across the full flow. | Components · Layout consistency | Structurally strong but visually generic compared with the established product. |
What I Learned
AI was more effective at expanding UI exploration than producing production ready UI.
Because NFL Super Bowl Slots already has an established design language and component system, an experienced UI team could likely reach a consistent, implementation ready solution faster by working directly within that system.
For a new product without an established visual direction, these tools could be significantly more valuable for exploring visual territories and aligning on direction before final design.
Where AI Stops
None of the outputs were production ready. Final UI still requires a designer's understanding of the product system, interaction patterns, brand standards, accessibility, consistency, and implementation constraints.
CONCLUSION
AI tools accelerated exploration, not decision making. Over three days, I used AI across feature definition, assumption mapping, research planning, UX exploration, prototyping, and UI design to see where it could meaningfully accelerate the product design process. The biggest advantage wasn't generating a finished feature faster. It was increasing the number of ideas, perspectives, and directions I could explore before committing to one. AI was most effective as a thought partner helping challenge assumptions, surface edge cases, explore alternative flows, and rapidly turn ideas into something tangible enough to evaluate. Where it became less effective was closer to final execution. Production ready UI still requires deep product context, an established design system, collaboration across disciplines, and designer judgment. The opportunity I see isn't replacing the product design process with AI. It's using AI to make the early stages of that process faster, broader, and more iterative while keeping the decisions with the team.
This is an independent conceptual case study created for portfolio and educational purposes. The concepts, designs, and workflows presented here are not affiliated with or created for Product Madness. Any references to an existing game are used solely to illustrate how AI-assisted workflows could be integrated into an established product experience.