Deckstorm – Mastery Tree Scene

A feature that is popular in games are "skill trees", where a user increases their status by following a branching path of slots which contain boosts to their profiles. For the purposes of this app however, the tree is made up of rewards that the user can earn by assigning Cards to "master" these slots (in this case based on a time value).

Visual cues were key to this UI, as there needed to be very distinct values set for each type of status in the mastery process (locked, unlocked, in progress, receive, and complete) to alert the user what slots were available to be mastered or which are in progress or ready to complete. A countdown timer would supplement the in-progress status.

The top component on screen would be a dynamic text and icon box that would relay information specific to the selected slot.

Task

Implement a "branching tree" UI that would inform the user to its status and what it offered