Theta Holiday Match

Introduction

For the annual Christmas celebration, our team was tasked with creating an engaging and festive experience for our clients. Building on the success of last year's quiz game, we decided to design a matching card game to reveal prizes. The game aimed not only to entertain but also to deepen our relationship with our clients.

Objective

The primary objective was to design a matching card game, offering clients a chance to win exciting prizes. The game needed to be intuitive, visually appealing, and in line with our company's branding, all while reflecting the festive spirit of Christmas.

My role

UX/UI designer, front-end developer

Responsibilities

Paper and digital wireframing, paper prototyping, user testing, iterating on designs, UI development

Stakeholder interview

Discussions with the marketing manager, project manager, and developer, along with a review of previous years' projects, provided a clearer understanding of the project’s scope and objectives. Success metrics identified were the number of participants entering the prize draw and positive client feedback, which would indicate effective engagement and satisfaction among our clients.

Lo-fi wireframing

Key path scenarios

• Launch: The user initiates the gameplay experience.

• Matchmaking: User matches cards to uncover hidden prizes.

• Prize Selection: After successful matches, the user selects their desired prize.

• Submission: The user enters their name and contact details to claim their selection.

• Confirmation: The user receives a confirmation message, ensuring their entry has been recorded.

Usability study: findings

I carried out two rounds of usability studies to refine the game's design and improve user interaction:

Round 1 findings

• Prize Card Misunderstanding:
  Users mistakenly believed they had won a prize immediately upon matching the cards, indicating a need for clearer instructions regarding the prize draw process.

• Revelation Clarity:
  There was confusion about the mechanism of matching cards to reveal prizes, suggesting that the game's core concept needed to be more explicitly communicated.

Round 2 findings

• Design Elements:
  Participants found the “?” icon on the prizes election page overly prominent, which detracted from the overall user experience.

• Navigation Feedback:
  Users expressed a desire for a more straightforward method to return to the main game page, highlighting a need for improved navigation.

Initial and Revised Design

Initially, the game page in the wireframe contained only instructions and cards. Following user feedback from our studies, I made several key enhancements to improve clarity and user engagement:

• Clear Heading:
  A distinct heading was added to immediately orient users upon entering the game page.

• Simplified Instructions:
  I streamlined the instructions to better communicate the prize matching process, ensuring users clearly understood how to participate.

• Prize Indicator:
  I added three "?" icons to visually indicate how many prizes were yet to be revealed, enhancing user anticipation and engagement.

Before usability studies

After usability studies

Enhancements to User Interface

Additionally, to further clarify the prize selection flow and enhance user navigation, I made the following changes to the game interface:

• Directive Update:
  The "?" icon was replaced with the directive "keep playing to reveal more prizes." This change provides clear guidance to users on how to proceed with uncovering the prizes.

• Navigation Link:
  I added a direct link that facilitates easy navigation back to the game page, ensuring a smoother and more intuitive user experience.

Before usability studies

After usability studies

Key mock up

This GIF shows the gameplay of the matching card game. When a player matches two cards, the '?' icon changes to a prize icon. An 'Enter Prize Draw' button also appears, and confetti bursts on the screen to celebrate the successful match.

Players have the option to continue playing the game or click 'Enter Prize Draw' to select a prize. However, they can only choose a prize corresponding to the cards they have successfully matched during the game.

When players match the 'Story' cards, a pop-up appears, providing more information about Theta's community involvement and contributions.

When players successfully match all the cards, they unlock the ability to choose from any of the available prizes to enter the draw.

On the prize selection page, players can choose a prize to enter the prize draw. Alternatively, if they wish to continue playing, they can select the 'Play Again' option.

This GIF shows the submission page, where players enter their name, email, and phone number to enter the prize draw. The form includes reCAPTCHA for security verification. After submitting their details, players receive a confirmation message thanking them for their participation.

Technologies Used

Outcomes

• Participant Engagement:
  The matching card game was a significant draw during our annual Christmas celebration, attracting 258 entries. This level of participation underscores the game’s appeal and the effectiveness of the promotional strategies employed.

• Client Feedback:
  Feedback from clients was overwhelmingly positive, with many praising the interactive and fun aspects of the game. Such responses highlight the game's success in delivering an engaging and memorable user experience.

• Engagement Metrics:
  Key performance metrics indicated strong user engagement, with an average engagement time of 1 minute and 54 seconds. This demonstrates that the game was not only effective in attracting users but also in maintaining their interest throughout the gameplay, reflecting its overall success in meeting the festive event’s objectives.

Team

• Serena Kwok: UX/UI designer, front end developer

• Amanda Geier: UI designer

• Marlon Parra: Front end developer

• Matthew Tester: Back end developer

• Isha Sharma: Project manager