Helping players manage their card collection on the go
MOBILE STRATEGY ○ UI ○ PROTOTYPING
Introduction
Sylvan Library allows users to manage their collectible card library. This mobile-first solution empowers users to seamlessly manage their collections on the go, whether they’re at a local game night, a store, or a large convention where buying, selling, or trading cards can be fast-paced and high-stakes.
My role
Lead Designer
The team
1 Full-stack developer
My contribution
As the Designer on this project I led research, created interactive prototypes, and ensured that the app met the needs of our players in a variety of contexts. I also led the design strategy and collaborated closely with my partner to balance design goals with technical constraints.
Technical challenges
Managing large amounts of data
There are 90,000+ unique cards Magic: The Gathering Cards with different art, editions, and card conditions. This poses a significant technical challenge when trying to build a comprehensive card manager, especially from a mobile perspective.
Unique cards
There are variants of every card - needed to figure out how to differentiate cards that have the exact same names but different releases etc. and how to present that.
Card quality
Beyond different
Dynamic card value
Cards can change their value incredibly quickly, when people are trading there may be some discrepancy in the data.
“quote”
Card specifications
When evaluating cards for deck building users need to be able to see a lot of data quickly: I needed to find a way to show this easy to users on mobile.
“quote”
In addition real-time card value updates and the ability to search large inventories efficiently were key technical considerations. The complexity of tracking these variables while maintaining an intuitive user experience required close collaboration between design and engineering.
How can we help every kind of Magic: The Gathering player?
Building understanding and empathy
Talk about the process Ruben and I went through to define our users
Commander Ned
Ned buys every Commander deck when it comes out. He owns a business so he can only play on “off nights”.
Drafter Mary
Mary prefers to play draft, sealed, or limited. But she’ll play commander with select groups, especially if friends play.
Collector Rudy
Rudy loves to play all types of Magic. But he also loves collecting unique cards and building up his collection.
Problem 1
Players own extensive card libraries, making it difficult to keep track of what’s available for trades, especially in busy environments like conventions. They need quick, reliable ways to share their inventory and access trade inventories to compare trades on the go.
Exploring solutions
How might we empower Erica to complete this calculation on her own?
PROGRESSIVE DISCLOSURE
We will enable Erica to step through her calculation. We can use progressive disclosure to ensure she only has to focus on a single aspect at a time.
CONDITIONAL FIELDS
We want Erica to only see the fields she needs to see. We want to minimize her mental load so she can fill in fields that are meaningful to her.
Problem 2
Players have high-value cards in their trade binders. Monitoring their binders during gameplay creates a barrier for fully enjoying the game. Players want to feel secure that their cards are accounted for without sacrificing their focus.
Exploring solutions
How might we help Erica feel empowered during a stressful time?
EMPOWER WITH INFORMATION
Most calculators require a separate manual to understand the intricacies of calculations. I’ve brought the content into the app behind expandable “Learn More” buttons.
CUSTOMIZATION FOR CLARITY
Instead of Parent 1 and 2 and Child 1 through 10, we will allow Erica to add custom labels to all individuals referenced in the calculation.
Problem 3
Making fair card trades is is a time-intensive process that requires users to look up cards and cross-check factors like condition and edition. Players can spend significant time researching card values and negotiating trades, slowing down the process and creating friction while trading.
Exploring solutions
How might we help Erica feel empowered during a stressful time?
EMPOWER WITH INFORMATION
Most calculators require a separate manual to understand the intricacies of calculations. I’ve brought the content into the app behind expandable “Learn More” buttons.
CUSTOMIZATION FOR CLARITY
Instead of Parent 1 and 2 and Child 1 through 10, we will allow Erica to add custom labels to all individuals referenced in the calculation.