Shardbound Card Upgrade

Lead UI/UX Designer

The Project

Role

Lead UI/UX Designer

Year

2024

Software Used

Figma, Photoshop, Unreal Engine, Miro

Live Project

Link

I led the design of a new card upgrade system that allowed players to invest either in-game or store-purchased currency to improve their cards. Because this functionality did not previously exist in the game, the work began at a foundational level, defining not only the interface, but the underlying player flow, decision points, and progression model.

Working closely with one of the Founders, the Product Manager, and the engineering team (including the co-founder), we shaped a system that balanced clarity, depth, and long-term scalability. A key focus was ensuring upgrade requirements, costs, and outcomes were immediately understandable, while clearly communicating how each upgrade affected both an individual card and the player’s broader deck or army.

The resulting flow enabled players to make informed choices, understand the value of their investment, and progress with confidence. The system was refined through multiple rounds of playtesting and user feedback, leading to targeted redesigns and structural adjustments that reduced friction and improved overall comprehension.

Key Design Challenges

  • The game had no established upgrade mechanics or precedents, requiring the system to be defined from first principles rather than iterating on existing patterns.
  • With the game still in pre-alpha, opportunities for large-scale validation were limited, requiring careful use of internal playtests, qualitative feedback, and informed design assumptions.
  • Card art and frames were still in development, necessitating designs that could accommodate shifting visuals without breaking layouts or flows.
  • Currencies, experience, and balance were still being actively explored, making it essential to design flexible flows that could adapt as progression rules were refined.

The Objectives

  • Partner closely with the Co-Founder and Project Manager to define the foundations of the card upgrade system, aligning player progression, balance considerations, and business goals.
  • Design a meaningful and fair upgrade model that allowed players to improve cards using either earned or purchased currency, clearly communicating value without undermining long-term balance.
  • Create a cohesive upgrade experience across the product, designing UI that surfaced upgrades both at the individual card level and within broader game contexts.
  • Define and document the end-to-end user flow, informed by research into comparable and adjacent games, identifying best practices as well as opportunities to differentiate.
  • Understand player motivations and pain points by running a beta for the card upgrade system, using feedback and playtest insights to refine flows, messaging, and progression clarity.

The Process

I worked closely with the team to research upgrade systems across a range of genres, looking at both direct competitors and adjacent games to understand how different models handled progression, clarity, and perceived value. This research helped establish what patterns players already understood, as well as where Shardbound could differentiate.

From there, we facilitated workshops to define how upgrades would meaningfully affect cards (spanning artwork, stats, and progression) while introducing a level-up structure that felt rewarding without adding unnecessary complexity. These sessions helped align design, product, and engineering on both the player-facing experience and the underlying system.

Using the outcomes of this work, I created wireframes and UI designs that translated the system into clear, usable flows, and partnered with engineering to ensure the designs were feasible and ready for implementation.

Once the feature was built, we ran internal playtests to validate assumptions and identify friction, then released the upgrade system to a limited group of players. Feedback from this early rollout informed further refinements before broader release.

Testing and Iterations

We validated the card upgrade system through a combination of closed beta testing with pre-registered players and recorded internal playtests. These sessions quickly surfaced gaps in player understanding around card value, specifically how excess value from sacrificed cards was handled, and whether progress carried over or was lost when upgrading.

We also identified usability issues in the interface. Players weren’t always sure when a card was eligible for upgrade and consistently asked for a clearer visual indicator. In addition, feedback pointed to the experience feeling functional but unrewarding. While some of this was expected due to missing VFX at the time, it reinforced the importance of clear feedback and a sense of payoff in the upgrade moment.

Based on these findings, we restructured the layout to better support player decision-making. After selecting a card to upgrade, the interface was reorganized to show upgrade inputs on the left, the current card and requirements in the center, and a clear preview of the upgraded result on the right. This made it easier for players to understand both what they were spending and what they were gaining.

We introduced a progression bar with star levels to communicate the card’s current level and its post-upgrade state at a glance. Additional visual indicators—such as borders and icons—were added to upgradeable cards to convey faction, tier, and upgrade eligibility, helping players confidently choose which cards to sacrifice and avoid unintentionally spending higher-value duplicates.

In response to player feedback around reward and satisfaction, we added a dedicated upgrade moment with VFX and animation. This “upgrade reveal” significantly improved the perceived value of the action and encouraged repeat engagement, reinforcing both progression and long-term motivation.

As interest in the game grew, we expanded testing to a broader group of players. Follow-up feedback confirmed that earlier pain points around clarity and layout had been largely resolved, with particular praise directed at the improved visual feedback and upgrade payoff.

Finally, as the game’s overall UI evolved to better unify the in-game battlefield experience with menus and the home screen, we revisited the card upgrade system to ensure it aligned visually and behaviorally with the rest of the product.

An Unexpected Change

As the UI evolved to align with updates to the design system and earlier player feedback, the monetisation team was running parallel testing on progression and upgrade mechanics. Through a series of cross-functional reviews, we aligned on a strategic shift: moving away from upgrading cards via duplicates and instead using a dedicated currency earned through gameplay, quests, or direct purchase in the newly introduced store.

This change had broader implications than just the economy, it fundamentally altered how players understood value, progression, and investment. While it required revisiting the upgrade flow and layout, the timing aligned well with the ongoing UI work, allowing us to integrate the new model cleanly rather than retrofit it later.

What could have been a disruptive pivot became an opportunity to simplify the experience. By redesigning the layout around currency-based upgrades, we were able to clarify costs, reduce player anxiety around sacrificing cards, and create a more transparent and scalable progression system, while staying consistent with the evolving design system.

The Results and Lessons

One of the most important lessons from working on Shardbound was reinforcing a mindset that proved critical throughout the project: make it exist first, refine it later. At the time, the game was evolving rapidly. Card art, frames, and even the design system were still in flux. Waiting for everything to be ready would have slowed learning significantly. By getting an initial version of the system in front of players early, we were able to validate assumptions, identify gaps, and let real usage guide the design forward.

This approach not only shaped the upgrade system itself, but also helped mature the broader UI and design system. Early testing revealed exactly what was missing, unclear, or unnecessary, allowing us to evolve toward a more complete and coherent system over time.

Seeing an imperfect design improve through iteration was one of the most valuable parts of the process. As the system matured, players were able to move through the upgrade flow with confidence, understanding what was required, what they were gaining, and why it mattered. By the later stages of testing, most recorded issues were no longer about usability or clarity, but about economy balance and upgrade costs, which was a strong signal that the interface itself was doing its job.

The design was not without compromises. Ideally, the upgrade experience would have benefited from more polished visual effects to heighten the sense of reward. Earlier VFX concepts were removed as the system was streamlined, and my time with the team ended before we could reintroduce them. With the later shift toward currency-based upgrades and real money spend, the emotional payoff of upgrading became even more important and is something I would have prioritized further given the opportunity.

Despite those limitations, the system achieved its core goal of creating a clear, low-friction way for players to upgrade cards without confusion or unnecessary cognitive load. Collaborating with the team on this project was one of the most enjoyable experiences I have had as a designer, particularly seeing player feedback directly shape decisions and improve the product with each iteration.

The insights gained from this work around progression design, early validation, and designing within ambiguity have had lasting value and will continue to inform how I approach complex systems.

Gallery

No items found.

Other Projects

A showcase of my Product Design project work.

Inkpay Website
Inkpay Website
View Project
GU Mana Wheels
GU Mana Wheels
View Project
Gods Unchained Combat Log
Gods Unchained Combat Log
View Project
Glamourpay App
Glamourpay App
View Project
Shardbound Battlepass
Shardbound Battlepass
View Project
Guild Of Guardians Site
Guild Of Guardians Site
View Project
Gods Unchained Emotes
Gods Unchained Emotes
View Project
Shardbound Store
Shardbound Store
View Project
Gods Unchained Expansion Site
Gods Unchained Expansion Site
View Project
OnPlatinum Website
OnPlatinum Website
View Project