Card Shuffle Game

The brief

  • A simple iOS game for a data research company.
  • The game was based on a modified version of the Wisconsin Card Sorting Test (M-WCST).
  • Ensure that users fully understood the game before playing (so the client could get more accurate results).
  • Fun and quick to play to keep users attention (as the game itself is actually very basic and can get boring quickly).
  • The game would form part of their existing app, the visual tone and the style needed to match the current design.

My role

  • UI, UX, and motion graphics.
  • Created mockups, interaction designs, and prototypes in After Effects & Principle app for usability testing and development handover.
  • Created visual guideline documentation for development.
Animated onboarding screens of the Card shuffle game app.
Animated onboarding screens of the Card shuffle game app.

Staying focused

Simulate the game with animations

In order to let users understand the mechanics of the game, I created animated onboarding screens to simulate the game. This would not only help the users to understand the rules before playing, but also set the right expectation for them.

Reduce cognitive load

As the client didn't want users to spend too much time on this game, every movement and message had to happen in a fairly short time once the user started playing. In order to make sure users stayed focused, I used animations to lead users' eyes towards messages and well understood colours (e.g. green for correct/red for incorrect) to reduce the user's cognitive load.

Animated prototyping

Because this design had a lot of animations involved, I used Principle and Adobe After Effects to demonstrate and deliver the animation to the developers. I also created several demos throughout the design phase with Principle for the client to test, play and give feedback on.

The animation of the Card shuffle game app.

The result

We managed to deliver the app on time and to the satisfaction of the client, which resulted in them working with us on another related project.

Key learnings

Choosing a prototyping tool based on needs

Every tool has its own strengths. This project gave me a great opportunity to evaluate several tools and choose the right one for the job.

Not only does prototyping help with getting a better feel on how the product functions but also aids the engineering team in getting more accurate settings for animations and transitions.

Use animation tool for handoff

The Bodymovin for After Effects was a really valuable tool for improving the animation delivery process and reducing workload for the engineering team.