Designing a Game for Seniors
(with GenAI)

Abhishek Kushwaha
WisdomCircle Product
11 min readDec 22, 2023

WisdomCircle is a global platform that connects retired professionals to relevant, meaningful work opportunities. These retired professionals, typically above 50, have accumulated wisdom & skills over a lifetime of experience. Us folks at WisdomCircle call them the “Wisdom Generation”, or “WisGen”.

Designing for a target audience whose average age is in the range of 51–60 years is much different than designing for the masses. Accessibility is the first thing that comes to mind when you are thinking of “seniors” as a designer. But how does one encourage accessibility while maintaining aesthetics? We learnt that as we made a psychometric game for our users.

About Psychometric Games

A psychometric game is a type of game that assesses and measures various psychological traits. These games are designed to provide insights into an individual’s psychological characteristics and can be used for assessment, training, or entertainment purposes.

The game we made would assess a WisGen’s core “values”. These values refer to the fundamental beliefs, principles, and ideals that are important to an individual. They reflect what WisGens hold dear and consider meaningful in their lives. Assessing a WisGen’s core values in our game means evaluating their personal priorities, ethics, and what matters most to them, which can be beneficial for understanding their preferences, decision-making, and overall well-being.

To bring this game to life, we partnered with AryaPlay, a leading psychometric assessment company specializing in game-based assessments. AryaPlay provided the foundational framework for our game, although the intricate details of this framework are beyond the scope of this article. Instead, we’ll focus on how a WisGen would engage with and play this game.

The values game primarily employs picture cards, each featuring two written value traits accompanied by illustrations that provide a visual representation of the values.

A list of cards featuring two values and illustrations on each of them. Provided by AryaPlay.
Image cards provided by AryaPlay

Here’s a simple walkthrough of the values game:

  1. A WisGen is presented with a set of value cards. From this set, they choose the card that resonates most with their values.
  2. Following the initial selection, the WisGen is then tasked with selecting the card that resonates the least with their values from the remaining options. This completes one round of the game.
  3. The game comprises several rounds, each featuring different sets of value cards.
  4. After a certain number of rounds, based on the cards selected as most resonant, the game assigns a personality type to the WisGen. The values they resonate with the least contribute to evaluating the legitimacy of their choices.

Designing the game

Design process is supposed to be iterative. We had numerous exchanges between WisdomCircle and AryaPlay, with multiple rounds of feedback from different stakeholders. But let’s skip the nitty-gritty details.

Early decisions

Based on the mobile wireframes, we settled on 4 cards per round. This choice allowed us to size the cards in a way that wouldn’t make them too small for WisGen to understand, nor too big, necessitating scrolling to view all the cards in a round. AryaPlay gave us a table of all the values for the game. We needed to test the WisGen for 32 values, which meant there would be 8 rounds.

Contextualizing with AI

We aimed to ensure that the imagery on the cards would connect with our demographic. The most important and lengthy phase of designing the values game was generating the images. We wanted the images on the cards to display something which our target audience of 50 years and older could relate to, without compromising a consistent style. Consequently, we opted to leverage GenAI to generate these images. Based on the research, we determined MidJourney to be the most suitable option, primarily because we wanted to generate photo-realistic human figures. This was a difficult task for most Image GenAI like Stable Diffusion, Dall-E, Leonardo.ai, Adobe Firefly, and Blue Willow, at least as of August 2023.

A brief summary of our image generation process would be:

  1. Think of a scene which would describe a senior Indian professional depicting the values X and Y. Alternatively, generate such a scene with chatGPT.
  2. Edit and summarize this scene using chatGPT and our own wits.
  3. Feed the summary into a chatGPT profile which would describe the MidJourney prompt. This profile was prompt engineered such that it would generate a prompt for MidJourney. Using this prompt, MidJourney would then generate a photo-realistic image of a senior professional exhibiting the values X and Y.
  4. Experiment with variations in images and the base prompt till we reach a satisfactory image.

Designing the value cards

We began by creating a digital version of the physical cards of the values game. With ongoing feedback, improvements were made until we reached the final design.

v1.0

Feedback (from user)

“Initially, I believed the words on the cards were opposites due to their placement on opposite sides.”

We checked with AryaPlay to ensure that adjusting how the words were positioned on the card wouldn’t affect a person’s psychometric assessment.

v1.1 — Cards with values on same side

Feedback (from AryaPlay)

“These designs are good. Furthermore, the game flow has been slightly changed. Now, a player chooses the most and least resonated values from the same set, one after the other.”

To clarify AryaPlay’s feedback, till this point, the player had to only select the most resonated value in a round. So the cards only had two states: selected and not selected.

v2.0 — introduced a new state for hover, which would signify the context as per the round

Feedback (from devs):

“It’s rather straightforward and not very enjoyable. We can enhance the visual appeal even further.”

Our product team prides itself on having developers who push the designers for a more creative choice.

v3.0 — A modern design with micro-interactions on hover

The game screen

Once we established that there would be 4 cards displayed per screen and a WisGen would choose the most and least resonated value cards in a single round, we needed to determine how to represent these cards.

We aimed to recreate the real-life gaming experience in a digital format, and this idea influenced most of the design choices. This involved creating designs for:

  1. The area where the cards are available for selection.
  2. The area where the most resonated and least resonated value cards are collected.

To mimic the way cards are stacked in a physical card game, the collected cards were always stacked on top of each other with some negative spacing between them.

v1.0

Feedback (from user):

“I overlooked the section where you collect the cards because it was getting cropped on my screen.”

v2.0

Feedback (from devs):

“It’s rather straightforward and not very enjoyable. We can enhance the visual appeal even further.”

v3.0

Feedback (from user):

“I’m not a fan of this animation. It doesn’t feel natural. The earlier stacking method was better and it felt the same card that I selected is being stacked.”

v4.0

Adding delight and increasing usability

Here are some of those little-big decisions which were made with the intent to add delight and increase usability for the WisGen:

  • The whole gameplay is designed based on the primary principle of building a habit: repetition. The ‘game’ is a repetition of ‘rounds’. A ‘round’ is the repetition of a similar action of ‘choosing’ a most and least resonated value. This allows WisGen to develop a habit as they proceed through the game. They don’t need to read instructions for each round. They simply know what action they have to take.
  • Certain design elements are aiding in this ‘building of a habit’ flow. Coloured gradients and thumbs up or down symbols inform the WisGen the category of their choice. Translating instructions from the written medium to the visual medium reduces their cognitive load.
  • The animations around the cards were designed to replicate real-world actions. In versions 1 & 2, the cards appeared in their designated area as if they were being dealt by a dealer. Once selected, they were stacked just like you would stack cards in a game of solitaire. Additionally, I introduced a somewhat disorganized way of stacking the cards to mimic the natural, less precise approach in version 3. However, I received feedback that this animation created confusion about where the selected cards were going. As a result, I reverted to the previous orderly stacking method but also incorporated a 3D appearance to save vertical space.
Card stack design comparison
  • During internal testing, I noticed that once a value card is selected, not a lot of people change their decisions. Based on this observation I decided to restrict the game flow to a linear fashion. This may sound counterintuitive but by doing this I reduced 2 clicks in each round or 16 clicks in the whole game. That is a total of 16 times a WisGen could have been frustrated because they need to click something obvious.
  • In order to build a habit, it is crucial for a WisGen to read the instruction in the first round, even though the same instructions are repeated in the next rounds. To match the importance of the instruction in the first round, I decided to display it as a full screen instruction. Subtle animations would ensure the position of the instructions is also embedded in a WisGen’s subconscious.
Full-screen Instruction
  • The values game is long. Going through all the rounds takes time. And to prevent a WisGen from losing motivation, I added cues to let them know how much progress they have made. For example, a progress bar, messaging screens, etc.
A motivational message after 5th round

User testing and feedback implementation

We conducted user testing of the game with a prototype with different users. There was diversity in gender and age. This included users below 40 years and between 50–60 years old.

  1. The first person (below 40 years old) found it difficult to read the instructions completely and felt that the animations should be slower. They found the images used in the “Freedom-Autonomy” card to be unrelated to the values. They also did not remember the cards they had selected till the time they reached the end.
  2. The second person (below 40 years old) was frustrated about how much time the instruction screen takes. They also suggested a change in the image for “Freedom-Autonomy” and requested a more senior profile to be included for the value cards of “Optimism-Positivity” and “Sense of belonging”.
  3. The third person (51–60 years old) said that they found the duration of instruction screens to be perfect. They read and understood all the instructions with ease. Additionally, they expressed that there should be at least one value card with a female WisGen character in each round.

Based on the feedback from the user testing, we made the following modifications:

  • The report at the end of the game informing a WisGen about their value type would include their selected value cards for most and least resonated values.
  • All 32 cards were scrutinized. Changes were made to ensure that all characters appear to be WisGen, diverse in gender, and depict the values associated with the cards.
  • The full-screen instruction duration was left unchanged. But if a WisGen has read the instruction, they could proceed by clicking anywhere on the screen.

When we deployed the game on our testing platform, we encountered an issue with Windows 11 14” laptops. These systems had a default zoom setting of 150%, which was 25% larger than their counterparts on Windows 11 15.6” and Windows 10 14” laptops, and 50% more than MacBooks. This discrepancy caused some users to be unable to view both rows of value cards without scrolling, potentially leading to certain WisGen missing out on half of the cards.

Folks who reported this issue also mentioned experiencing similar challenges on other websites. However, I was committed to ensuring that users of all screen sizes could enjoy the game equally. To prevent any layout confusion, we introduced a skeleton layout on the full-screen instruction screen. This provided users with a preview of what the value card layout would look like.

First instruction screen with skeletons of the cards

Usage so far

We collected qualitative feedback soon after the launch. Here’s what some WisGen had to say about the values game:

“On a scale of 1–5, I would rate the overall experience of the game as 4. I found the generated report in the end to be accurate and informative. Most of the analysis resonated with me. Sometimes it was tricky to only select a single option from the four presented values.”

- She is a 51 year old WisGen working as a Global Marketing Product Manager.

“Overall I liked the game, I would rate it 4 out of 5. I wasn’t stuck anywhere but I think you can add some tips based on people’s background. The generated report in the end was somewhat accurate in representing my values.”

- He is a 63 year old WisGen working as a General Manager.

“I was impressed by the game. I would give it an overall rating of 4.5/5. I really wanted to select more than one option at times. I would say the report in the end was 75% accurate in representing my values. The whole game was easy to understand and play. Even the navigation was simple to use.”

- He is a 57 year old WisGen working in the Human Resources domain.

These reviews were gathered 1–2 weeks after the game’s launch. Out of the 10 participants in this qualitative survey, we received an average rating of 4 out of 5 for the overall game experience.

Today, 3 months later, more than 350 WisGen have played it. We’ve consistently received positive feedback from various WisGen about the game. While there has been some negative feedback, it’s primarily related to the mechanics of the game rather than the overall experience and interface.

The Wisdom We Gained

(Yes, I love making puns.)

Over the duration of this project, we’ve gained some valuable lessons:

Contextualizing matters

While it might have been easier to use the images we had on hand, taking the time to contextualize them to align with WisGen’s preferences added a layer of care to our product, making a meaningful impact.

Using MidJourney is not as easy as it looks

Working with MidJourney was an adventure. From figuring out phrases or scenarios so that we could avoid certain demographic biases to practising advanced prompting techniques. For those delving into MidJourney, the official Discord server guides and FAQs are invaluable resources.

Use motion not just for fun but for enhanced usability

We strategically incorporated motion throughout the game to not only make it more enjoyable but also to cater to the specific needs of our senior audience.

Great ideas come from anywhere

Working at a startup has its perks. One of them, for a designer, is the ease of getting feedback from people with a diverse set of values. All our folks think for the betterment of WisGen in their own way, which leads to the generation of some great ideas.

Give it a try

Now that you’ve read how we designed the values game, how about experiencing it yourself? Give it a shot by clicking here!

--

--

Abhishek Kushwaha
WisdomCircle Product

Product Designer @ WisdomCircle. Loves to talk about design, photography and anime.