Let’s create

Let’s createLinkedIn (opens in a new tab)

09Case study / Product

Nomie

A classroom game redesigned to help students and teachers connect: led from research to delivery, and launched live on Nomie’s platform.

Role
Team lead and lead designer
Year
2024
Status
Delivered and launched live on Nomie’s platform
Services
UX/UI Design, App Design, Web Design, UX Research
Value
Optimising Design & Flow in Nomie’s Game “Guess the Answer”
Two phones on a dark marble surface showing the redesigned game: a Classroom Queue of student portraits and a Patiently Waiting screen with the Nomie fish mascot
01

Introduction

“Guess the Answer,” redesigned to help students and teachers connect.

Nomie, a social bonding game company, approached our team of designers to improve the experience and interface of its classroom game, “Guess the Answer.” The goal: an engaging, intuitive interface that resonates with players and fosters meaningful connections.

I led the team as team lead and lead designer, and was Nomie’s primary point of contact, from the audits and research to the high-fidelity design and the brief for Nomie’s developers.

The redesign was delivered and launched live on Nomie’s platform.

3
Kinds of audit: heuristic evaluation, game audit, and accessibility report
8
Usability testers: 4 students and 4 teachers
10
Refinements after testing: 4 for teachers, 6 for students
02

My Role

My role, across the team and the redesign:

  • Team leadNomie’s primary point of contact: decision-making, organisation, and one team voice.
  • Lead designerThe interface, from sketches and wireframes to high-fidelity screens.
  • UX researchHeuristic evaluations, game audits, accessibility reports, personas, and usability tests.
  • Game UXProgress bars, timers, and celebrations that encourage participation.
  • AccessibilityContrast to WCAG 2.0, and a form of Bionic reading.
  • UX writingClearer instructions, labels, and status lines.
  • Developer briefOur team’s brief for Nomie’s developers, interaction by interaction.
03

The Challenge

Problem
“Guess the Answer” wasn’t engaging enough to build social bonds among students and teachers, which held back its impact on the classroom.
Solution
Immersive game mechanics, an intuitive interface, and better accessibility, to foster social bonding and engagement.

The interface lacked clarity, consistency, and responsiveness, which made it hard for players to move through the game smoothly and fully enjoy it.

04

Design Process

Six steps, each one building on the last:

  1. 01

    Research

    Heuristic evaluations, game audits, and accessibility reports, built on the former team’s research.

  2. 02

    Ideate

    Personas and How Might We statements.

  3. 03

    Sketch + wireframe

    Iterative refinement, from sketches to wireframes.

  4. 04

    Accessibility

    Contrast to WCAG 2.0, and Bionic reading built in.

  5. 05

    High fidelity

    Polished visuals and refined interactions.

  6. 06

    Test + refine

    Usability tests, then the final adjustments.

05

Research + Audits

We started from the former team’s competitive and primary research, then audited “Guess the Answer” three ways:

01

Heuristic evaluation

  • System status
  • User control
  • Help

Too little feedback at critical moments, like forming groups and submitting questions; no way to edit a question or answer; and too little help to finish tasks.

02

Game audit

  • Social features
  • Randomness
  • Host control

No reactions like emojis, no input or output randomness, and hosts couldn’t see the questions players submitted.

03

Accessibility report

  • WCAG 2.0 AA

A mix of passes and fails. Adaptable content, a meaningful reading sequence, and resizable text passed; contrast ratios, time adjustment, and error handling fell short.

06

User Personas

From primary and secondary research, we built a persona for each side of the classroom: a student and a teacher. They kept our decisions grounded in real behaviours and motivations.

Baptiste’s photo: a young man in a dark T-shirt with a backpack, holding a door open and looking out into the light

“I want to discover the connections between people of the past, present, and future.”

Age
18
Role
CEGEP Student
Education
Cégep de Sainte-Foy
Location
Quebec, Canada

Student persona

Baptiste

Baptiste is currently a first-year student at cégep majoring in literature. He enjoys ample quiet time reading by himself and leaves minimal time for social engagements. However, he does look forward to meeting new people within his cégep classes who share his passion for the beauty of liberal arts.

Pain points

  • Cégep is a place where everybody is new to everybody, so meeting new people becomes more challenging.
  • Baptiste’s heavy time investment into reading hinders his social life.
  • As an introvert, it is difficult for Baptiste to make friends outside of school.

Goals

  • Wants to connect with colleagues who are also passionate about books and have meaningful discussions with them.
  • Use his time at cégep more efficiently to expand his social circle.

Personality

  • IntrovertExtrovert
  • AnalyticalCreative
  • PassiveActive
  • MessyOrganised
  • IndependentTeam player
Camille’s photo: a young woman writing in a notebook at a dark wooden table by a window, with plants on the sill

“I believe in the power of combining the proven methods of traditional teaching with the innovations that technology brings.”

Age
32
Role
CEGEP Professor
Education
University of Montreal
Location
Quebec, Canada

Teacher persona

Camille

Camille is a new professor at Cégep de Sainte-Foy who wants to bring a fresh perspective to the curriculum. There are many opportunities to better the antiquated education system by incorporating technology and bringing academics up to speed with the world today. Her intentions are to make her class a safe space where students can grow alongside their peers.

Pain points

  • Students do not interact with one another in Camille’s class because they all came from different schools prior.
  • Student enrichment is a big concern for Camille because she recognises that it is important for academic success.

Goals

  • Wants to get to know her students’ personalities and remember them by name.
  • Encourage her students to engage in intellectual discussions and social collaborations.

Personality

  • IntrovertExtrovert
  • AnalyticalCreative
  • PassiveActive
  • MessyOrganised
  • IndependentTeam player
07

How Might We

We framed the research as three questions, each one an actionable prompt for ideas:

  1. 01Students

    How might we

    encourage students to be excited and interested in forming meaningful connections with their peers, through the gaming platform?

  2. 02Students + teachers

    How might we

    enhance social engagement and participation among students and teachers, for a more interactive and collaborative environment?

  3. 03Teachers + students

    How might we

    amplify teacher interaction and strengthen the bonds between teachers and students, for a more interconnected, engaging experience for both?

08

User Flows

Two flows, one for each side of the classroom. Students move from onboarding to gameplay, while teachers get extra tools to manage settings and follow progress.

Student and teacher user flows on a dark ground, built from orange display boxes, green decision diamonds, and purple action circles, with a key for the shapes and line styles
Student and teacher user flows
09

Game UX

Emotional engagement and social interaction were at the heart of the redesign. Game mechanics give players feedback, encourage participation, and make the experience rewarding:

01

Progress bars

Group and class progress, at a glance.

02

Timers

A visible readiness timer, counting down to play.

03

Celebrations

“You’re a Star... Fish!” when a guess is right.

04

Group play

Small groups, and a turn for each student.

Guess right, and the celebration springs up.
10

From Sketch to Screen

Eight hand-drawn sketches of student screens: joining a game, waiting for classmates, writing a question and answer, confirming, finding a group, a start screen, and choosing a question

Sketches first

Sketches laid out the wireframes, and gave the design a visual roadmap.

Wireframes were pivotal: they let us refine the interface for clarity and usability.

Greyscale phone wireframe with a Guess The Answer card asking 'Join game? Class: Art History', a close button and a Join button

Joining a game

Greyscale phone wireframe titled Uh Oh! with an image placeholder, the message 'Uh oh! Your question might be inappropriate... let's make a new one!' and an OK button

An inappropriate question

Then, quick guerrilla tests:

Mixed reactions
Some found the game easy and enjoyable for classrooms.
Confusion
Over game titles, and unclear instructions.
Frustration
With touch delays and after-delays.
Suggestions
Clearer screens, and clearer guidance.

High fidelity brought the wireframes to life, with polished visuals and refined interactions.

High-fidelity Create a Question screen in white and mint green: the fish mascot says 'Time to create your own question!' above filled question and answer fields, a Submit button and Go Back

Wireframe: Greyscale Create Your Question wireframe: the Nomie fish mascot says 'Remember, keep your question and its answer secret!' above empty question and answer fields and a Submit button. Design: High-fidelity Create a Question screen in white and mint green: the fish mascot says 'Time to create your own question!' above filled question and answer fields, a Submit button and Go Back.

Create a Question, from wireframe to high-fidelity design
High-fidelity teacher dashboard: groups of student portraits on the left, and each student's question and answer with Redo Question and Skip Student buttons, above group and class progress bars
The teacher’s game dashboard
High-fidelity Classroom Queue screen: a grid of student portraits with orange check marks and 'Waiting for others... 13/45 Ready'

Classroom Queue

High-fidelity Choose a Question screen for Baptiste's turn: three classmates' questions with their photos, one highlighted, and a Submit button

Choose a Question

11

Accessibility

Accessibility was a key focus. We raised contrast to meet WCAG 2.0 guidelines, and built in a form of Bionic reading, which subtly helps players with ADHD, ADD, and dyslexia read faster, focus better, and retain more. It invites active engagement with the text, for a more inclusive experience.

  • Guess the Answer

    4.52 to 1

    White on Nomie’s deep orange

    Passes AA

    #FFFFFF on #C45506

  • Guess the Answer

    5.57 to 1

    Dark teal on Nomie’s green

    Passes AA

    #0B3742 on #43BF95

The two colour pairs from the case study’s contrast check. WCAG 2.0 AA asks for at least 4.5 to 1.
12

Usability Testing

Four students and four teachers tested the game. Their feedback confirmed the need for clearer navigation cues, clearer instructions, and stronger visuals.

01

What teachers found

  • Task clarity
  • Progress bars
  • The game’s purpose
  • Button labels
  • When to start

Teachers needed clearer tasks, easier progress bars, the game’s purpose explained, simpler labels, and the freedom to start when ready.

02

What students found

  • Onboarding
  • Reward terms
  • Navigation
  • Answer wording
  • Group instructions
  • Text colour

Students needed clearer onboarding and reward terms, smoother navigation, plainer wording for confirming answers, better instructions for forming groups, and more visible text colour.

13

Final Design Adjustments

Testing shaped the final adjustments, screen by screen:

The teacher’s introduction
  1. The teacher's introduction before testing: the Guess The Answer card beside a Teacher To Do card with three short paragraphs and two page dots

    Before testingWhat we found

    1. The game’s purpose

    Teachers struggled to grasp the game’s purpose in the introductory screens.

  2. The teacher's introduction after testing: the same cards, the Teacher To Do card now explaining the Skip Student and Redo Question buttons, with four page dots

    After testingWhat changed

    1. More pages
    2. Skip and redo, explained

    Added pages help teachers understand the game’s purpose and what students are doing, and the skip and redo buttons are now fully explained.

The teacher dashboard
  1. The teacher dashboard before testing: groups one to six listed down the left as cards, beside each student's question and answer with Redo Question and Skip Student buttons, above the class progress bar

    Before testingWhat we found

    1. Groups as tabs

    Group organisation read as tabs, not boxes.

  2. The teacher dashboard after testing: numbered group boxes on the left with a Reinvite button below, and the group's progress bar at 15 percent under the students, above the class progress bar

    After testingWhat changed

    1. Numbered groups
    2. Reinvite
    3. Progress in percent

    Groups are organised as numbered boxes, a Reinvite button re-engages disconnected or absent students, and the group’s progress bar shows a percentage.

How to Play, for students
  1. How To Play before testing: a Next Player card with a cartoon player with yellow hair and round glasses on a yellow square, above purple text saying Nomie picks another player for a remaining question

    Before testingWhat we found

    1. Graphic too youthful
    2. Text colour

    The learning graphic looked too youthful, and the text colour for bionic reading was subpar.

  2. How To Play after testing: the Next Player card with a cartoon of a man in a suit on an orange square, above blue text saying Nomie picks another player for a remaining question

    After testingWhat changed

    1. A more mature graphic
    2. Colour for bionic reading

    An updated graphic for maturity, and a text colour adjusted for optimal bionic reading.

Find Your Group, for students
  1. Find Your Group before testing: the title, four classmates' photos with 2/4 Ready, and an active Ready To Play button

    Before testingWhat we found

    1. Only the title
    2. Ready right away

    Only the title told students to find their group, and they might tap Ready To Play before meeting it.

  2. Find Your Group after testing: the title with 'Get up and introduce yourself to your group!' beneath, four classmates' photos with 2/4 Ready, a greyed-out Ready To Play button, and 'Disabled for 1:00...' in orange

    After testingWhat changed

    1. Body text
    2. Disabled at first
    3. Countdown

    Body text tells students to find their group, and Ready To Play stays inactive until a countdown runs out.

And in the words:

  • Who you’re waiting on

    Beforeis checking the answerAfterFelix is confirming the answer

  • Redundant text

    BeforeFelix is answering question.AfterRemoved

The name is the point. It’s a real-life game, played in groups of friends, so the status line tells everyone exactly who they’re waiting on.

Plus four more changes from testing:

Start when ready
Teachers can start a game at their convenience.
Alphabetised
The queue-up and status screens are in alphabetical order.
Meet the game master
A new screen before rule 1 introduces Nomie as the game master.
Skip the rules?
A screen confirms that a student wants to skip the rules.
14

Delivery

We briefed Nomie’s development team on the essential features and interactions on the student side, so the design would carry seamlessly into the game:

01

The brief

  • Swipe gestures
  • A visible readiness timer
  • Clickable questions
  • Celebratory animations
  • A redo question option
  • Skip rules confirmation

The student side of the game, interaction by interaction.

The redesign received positive feedback from users and from Nomie’s team, for its usability, engagement, and overall appeal. Usability tests confirmed clearer navigation, better visuals, and greater satisfaction with the whole experience.

Delivered, and launched live on Nomie’s platform.

15

Learnings

  1. 01

    Design for the room, not just the screen. It’s a real-life game, played in groups of friends, so the status line names the player everyone is waiting on.

  2. 02

    Design the behaviour you want. A countdown on Ready To Play gives students time to meet their group.

  3. 03

    Test accessibility too. Students found the bionic reading colour hard to see, so we tried a light blue in place of purple.

  4. 04

    Lead with one voice. As Nomie’s primary point of contact, I kept the team speaking with one voice.

16

Conclusion

As team lead, I facilitated decision-making and organisation, served as Nomie’s primary point of contact, and kept the team speaking with one voice throughout the project.

Our collaboration with Nomie shows the power of user-centred design: a game that delights and engages players, built for Nomie’s mission of fostering social bonding through interactive play.

Rebecca has been an invaluable leader and UX/UI expert for our team at Nomie. Her vision and guidance helped shape our app, making it more intuitive and user-friendly.
Sonia HudonFounder, Nomie