Everfi has been moving over their design system to React to promote a more scalable and efficient design and engineering process. This change gave us an opportunity to improve old components and make them more enjoyable and versatile for our future courses.
The old card stack game lacked in interactivity, component flexibility, and also mobile responsiveness. Because of these challenges, it made it difficult to carry over to the new react components
The solution was a new design that was more intuitive, versatile, and mobile friendly. All of this was done while still making sure the new design was backwards compatible.
To get to the final solution I started by gathering and analyzing inspiration for how other companies were using this component.
While gathering inspiration I also conducted feedback from the internal team regarding what they felt did not work well and what they hoped to see as we refined the old card stack game.
After I gathered feedback and inspiration I began the ideation process. Through exploring multiple design paths I was able to narrow down on the options that worked best for our needs.
Once the ideation phase had ended I began to refine the designs and design out all of the states.