Ai Flash Card Game

Roles:

UX Designer, Dad

Tools:

Ai-Coded with Figma Make

Objective:

This is a personal project that was created to help my daughter memorize a subset of periodic table elements for her Chemistry class. The problem was that her hand-made flash cards were limited to the 2-sides of paper when she needed to know 3 criteria of these elements: Atomic Number, Symbol and Name.

Disclaimer: This project is a non-commercial, fan-made design created solely for personal use as a study aid. The character “Jinx” and all related imagery are the property of Riot Games and Netflix, and are used here under fair use for illustrative purposes only. This work is not affiliated with, endorsed by, or sponsored by Riot Games, Netflix, or any of their partners. It is presented exclusively as an example of a Figma Make (AI) design project for portfolio display.

Ai Process:

Define objectives
Ideate with wireframe sketches
Gather color schemes, fonts, image assets
Enter initial prompt to establish structure, styles. Establish device responsiveness needs. Describe desired page layout, functionality, etc.
Refine layouts with follow-up prompts
Publish, test, iterate

The Concept

How it works

Choose which of the 3 data points they want to see.
(Example: See Atomic Number, Guess Symbol and Name. Alternatively, select Mix It Up to vary the starting data.
Choose which elements you want to work with.
You can start with a quick-select option like “All Elements”, “Noble Gases”, or a custom selection chosen and saved by the user.
Choosing start takes you to the quiz page where you type directly into the missing fields of the periodic table element card and submit your answer.
You have options to Skip the question, change up your starting data or your element selection.
Monitor your progress and score. For those that have mastered the elements, there is a timer with rankings so you can level up by doing them faster. Reach “Elemental Elite” ranking by averaging less than 5 seconds per question.

Styles and Assets

Assets

Since this is a project for personal educational use, I pulled images from the internet to use for the background and the character image. Using the character’s hair blue color, I had Figma create a primary color palette.

Form outlines and other various components use this blue color (Atomic Blue) while other components use tints and shades of this color.

For accent colors, neon pink and purple were used. Here I’m showing 2 custom buttons that I created using Google’s Lacquer font and custom letter shapes to indicate their function.

Select Elements Panel

A Custom Request

One of the first iterations of this app was used by the client (my daughter) for a few hours. The feed back I got was that she had X amount of them down and really wanted to focus on the more difficult elements. So for the next iteration, I constructed this panel that allows custom selection and saving of specific element groups. It comes complete with a starter set of Quick-Select pills that can be applied.

Though not shown here, there are 2 other quick-select pills that are auto-generated based on “Frequently Skipped” and “Frequently Missed” questions from the most recent quiz session.

Further Gamification

Adding a Timer

The next major iteration of this game was based on a request to make it more challenging. After some successful study sessions, the memorizing portion was over. My daughter requested some way to make it track time.

This involved creating a timer that could be started when the quiz started. I prompted Figma to show total time, avg.time/question, and fastest time. Then I instructed it to create a ranking and award system. I wanted it based on average time per question. I started with avg.time/question less than or equal to 5 seconds would be top tier “Elemental Elite” and have each additional second be a lower ranking down to “Novice” for 9 seconds per question.

Mockups

Wrapping Up

Challenges

Despite this being a fun personal project, it had its usual share of challenges.

The first iteration had 2 regular form fields to type the answer. After observing a couple people use the app and seeing them both attempt to click directly on the periodic table element component, I adjusted so that users would be able to type directly into that component. No forms at the bottom. This solved the additional problem later on when I created the mobile version as the phone keyboard would have covered forms and/or submit button below the element component.
It was discovered that the user was attempting to access this desktop-only app on their phone on the school bus and in-between classes when they didn’t have access to their laptop. Creating a mobile version had several issues. The intro page was a matter of just wrapping the element accordingly. The quiz page needed a way to have access to the settings, score, timer, skip/submit buttons on an iPhone SE (a mere 320x568 screen size). The solution I came up with was to incorporate a mini-timer inside the the element component itself and tapping the summarized score button would flip the element card over the reveal the full score card on the back. Unfortunately, Jinx had to be sacrificed for the good of the mobile experience.

Next Steps

This was a one off project that accomplished a few goals. Mainly, to help my kid ace her elements quiz—which she did! The other secondary benefits were expanding my knowledge of Figma Make while it is still unlimited trial and to make this fun portfolio piece.

I think given unlimited time/resources, my next step would be to create other mini-apps in the style of the other characters (or my own if I ever wanted this to be publicly available). The other min apps would be a series for things useful to my kids’ school memorization needs. Physics formulas, history facts, or the elements of design. Perhaps it could be broken down by subject. Perhaps it could grow to incorporate key standards for each state. The sky would be limit… given unlimited time and resources.