The system consists of a camera running computer vision algorithms to detect players, two projectors, and a Unity engine that executes the game logic. in addition, we initiated the design and implementation of a companion web app, which is used to operate the game independently, so that the system is scalable and applicable to self-service scenarios.

Since we want to expand the game scheme to self-service scenarios, what we would provide users with would just be a QR code by the playfield. Through entering the app, users will follow the tutorial step by step to participate in the game.

The key question then could be parsed into two sub-questions:

By listing out all the actions users are invited to carry out in a sequential order, we are able to derive the corresponding instructions that should appear on each interface. It's worth noting that not only do we have app interface, we could also utilize graphic layout that's projected onto the field to convey additional information.

To validate several design decisions, I led two internal design critiques among group members. The first design critique aimed at solving general user flow issues, and the second critique was targeted at testing more specific visual cues and high-fi prototype.

Key Findings

The diversity of potential users demands a more customizable and flexible system.

80% of users points out that the speed of the ball could be too fast for two wheelchair players that play against each other, while too slow for non-wheelchair players. It will make the game more accessible if the game setting could be modified or even customized.

Visual cues need to be more powerful to foster efficient understanding of game rules.

65% of the users, and specifically 80% from the design team reflect that current visual cues are not efficient enough for users to grasp at a simple glance. The need for more illustrations and less words is implied.

And these insights boil down to...

We defined three key parameters: ball speed, ball size and goal size to be directly related to players' perception of game difficulty, which could be modified in Unity.

Consequently, we packaged these three params, generating three different levels of modes: easy, medium and hard, for the players to choose from.  

If users are not satisfied with the given combination, we also allow them to adjust the parameters individually. Observing that wheelchair players always generate a larger circle than non-wheelchair players, due to the bulk of wheelchair and computer vision detection system, I made the parameter adjustment player-specific, so that the game is more fair.

I replaced the static photos with animations from Unity (that are in sync with the projected graphics on the play field) to reduce the cognitive load of reading game rules and understanding instructions.

Key verbs are highlighted, given humans are intuitively good at capturing 'commands'.

I challenged myself to implement and deploy our finalized design as a web app--first time being a frontend developer. Utilizing ReactJS and Chakra-UI component library, we were able to turn design into reality!

Coding the app from scratch within the React framework also enabled me to understand design systems better. To keep the code structure neat and clean, I created components first and then pieced them together to form different pages (with different props value).

To better mimic real scenarios, we invited external users who didn't have any background knowledge to test the app.

Additionally, we designed feedback questionnaires for each participant to fill in, based on System Usability Scale (SUS), which includes efficiency, intuitiveness, ease and satisfaction.

A total of 10 participants filled out the survey and we were able to derive meaningful conclusions out of the responses. As prepared as I thought I was, yet UX problems still exist within the current system. Luckily, our team will continue exploring the solutions this fall.

Improve game logistics further more

4 out of 10 participants didn't realize that their player circle could be expanded initially. The animations are illustrative, yet there wasn't indication of humans' interaction with the ball.

New games could be explored and system scaled

3 participants expressed the desire to see more games utilizing the projection and AR features empowered by computer vision algorithms.