Features

Web-view App

The game consists of two parts which are the web-view app and dashboard. The app works as a character generator which let the attendees to self-evaluate their skills through the set of questions and transform the results into a playful character which will be visualized as the animation on the dashboard.

Dashboard

The dashboard digitally connect all characters together and the spaces around it physically gather all attendees together.

the dashboard physically gather people

Our Process

This project included many stakeholders, which are designers, developers, business people, and event organizers, to be responsible for the app, dashboard, marketing, and prepare the space on the event site. Therefore we worked together to finalize the user flow as soon as possible to clearly identify tasks for each team. Also, the design system was created by the collaboration of all teams to make the project identity consistent and reduce miscommunications between design and development team.

user flow diagram makes the tasks clear and easy to allocate

design system keeps consistency and reduces miscommunication between design and development team

Technical Development

We separate development tasks into three main parts, which are the web-view app, dashboard, and character component, to make it easier to allocate and simultaneously work on each part. Becuse of the limited time, the ready-to-use product like Firebase is used as the realtime database to connect the app and dashboard together.

Web-View app - Built by ReactJS which is the library that the team is most comfortable with.
Dashboard- Because of a tons of animation and interaction, we decided to use HTML canvas for better performance and smoother animation. PixiJS library is used as the tools to create those animation and logic.
Character component - The animation of each character is created by PixiJS and wrapped by React component to make it reuseable in other react apps.