EMOTION STAR

An interactive game controlled by facial expressions
 
BG_Gradient2.png

Emotion Star

When:     Autumn 2020

Team:     5 students

"Like Singstar but with facial expressions"

 

Emotion Star is a collaborative game controlled by the players' facial expressions. Players try to mimic the emojis on screen at the right timing in order to gain points together. 

My contributions
  • Sketching

  • Wireframes

  • Playtests

  • Interviews

  • Surveys

Tools

Figma

project

brief.

The brief was to produce an interactive digital experience suitable for a digital science center. The exhibition should strive to raise the visitors interest in tech & AI.

 

ideation & evaluation.

After the initial ideation phase where we chose to focus on a facial expression-based game, we used the following methods to evaluate the concept.

 

MoSCoW-method to prioritize different features with regards to the time-frame of the project.

MDA to get a better understanding of the components of the game, using Singstar and Guitar Hero as inspiration.

"like singstar but with facial expressions"

vision.

MoSCoW-method
BG_Gradient2.png

wireframing.

Figma was used for grey-box wireframing to easily make a wide variety of solutions, all using a 6 x 12 grid.

 

The design work from low to higher fidelity also used Figma allowing simultaneous collaboration from multiple team-members.

design sketches.

A few of the design sketches of the gameplay from the different stages of the project.

Early-stage design

Mid-stage design

Final design

user evaluations.

User Evaluations were performed throughout the project in order to test different solutions. An initial survey led to the narrowing of different expressions, from 7 to 5.

 

Play testing and follow-up interviews influenced both the warm-up and the gameplay features.

Feedback was also collected from players at the Idxpo Exhibition to be incorporated in any future iterations.

1/2

how does it work?

2 players enter game area
mimic emojis on screen
IxdProject_HowDoesItWork.png
AI interprets
the face
Get points & feedback

try it yourself!

Logo.png

The game uses your webcam, no data is stored.

The game is developed for chrome on mac,

other browsers are not supported.

final design.

The project resulted in a fully functional 2-person game accessible online. The game uses the built-in webcam and through a pre-trained API, the expressions of the players are interpreted.

The goal for the players is to mimic the emojis as they approach on the screen, the better timing the more points will be awarded. 

The end screen statistics let you compare each emotion to both your co-player and the overall average. 

The Emotion Star game was designed and developed during early fall 2020.

The team consisted of 5 students from the Interaction Design program at Chalmers