Quarantine caused by the covid-19 pandemic has caused a lack of connection between friends and classmates. As incoming freshmen to the University of Waterloo, our team wanted to address the challenge of making friends and learning about others in spite of the lack of face to face communication.

Inspired by Would You Rather games, This or That would allow the user to spark meaningful connections, while also having the option to dive into and discuss deeper topics rooted in real-word problems such as mental health, gender equity, and racism.

What it does

The game asks a series of this or that questions to 2 players and calculates the percentage match at the end (Get to Know Me mode).

A bonus feature (Competitive mode) is to have players guess what each other chose. This tests how well close friends know each other and provides them with a chance to gain a deeper understanding of each other.

Specific topics include light and funny ones such as memes and hobbies, which helps spark casual conversation and break the ice, as well as heavier topics such as mental health and gender/sexuality, which allow the users to feel less alone in their experiences. The heavier topics will include online resources and support such as helplines and forums.

How we built it

We built the prototype using Figma:

We started with determining a colour palette and themed icons, and then designing the landing page and then worked out the details of how users will join a game room and choose topics.

We then designed the flow of the game from placing the users in a game room to having users choose their mode and topics, to the set of questions they will be given based on their choices.

For heavy topics, we included a page for researched resources that would give the user a chance to reach out to people who have the ability to help, to find out what other people have done in their situations, and to feel that they are not alone. Next we designed the scoring system which also provides funny and motivating messages as well as buttons to share results and play again.

To ensure that our users will not be disturbed or triggered, we added content warnings before the question sets to the heavy topics.

Lastly, we finalized the design and added links and animations.

We planned to build the web app using React JS, Socket.IO, and Firebase. To do this, we created CSS according to our prototype and began to add all the text and design elements for the pages.

We then attempted to create multiplayer game rooms that would provide both efficiency and privacy.

Challenges we ran into

There is a gap between our plan and our ability to bring it to life through code. It was more difficult and complicated than we first imagined to create multiplayer rooms for users. Creating multiple multiplayer rooms was a challenge in both creating the design and writing the code.

We were not familiar with our tools and had to learn as we coded our project. This is where our developed project management skills helped us reach a solution. We realized that there may not be enough time to complete the more technical aspects of the project and decided to shift focus onto creating a functional prototype on figma. By shifting focus we were able to complete a prototype that we loved and could submit within the time limit of the hackathon.

Accomplishments that we're proud of

As it was many of our group members’ first time using figma, the prototype being successfully built using this design tool, and that we managed to give a detailed demo of our project, was a great accomplishment for our team.

The planned user interface is fairly easy to navigate through. This is an accomplishment as our team wanted as much of our readers to focus as possible on the content of the game. A complicated user interface may take away from that focus. We are able to include a variety of topics for both entertainment purposes and support purposes.

What we learned

As this was the first time attending a hackathon for the majority of our team we developed skills in multiple areas:

Technical Skills: For many of us, this was our first time working with Figma to create a prototype. As well, we learned about Firebase, React JS, and Socket.IO when exploring options on how to bring our idea into reality.

Project Management & Collaboration: To complete our project our team determined ways to help divide work and clearly see what needed to be done in order to stay on track. For example, in the beginning we created an agenda to state our goals and all of the steps needed to accomplish them, making our work organized and easy to collaborate on. In order to successfully build our prototype, our team communicated and assigned roles based on each other’s strengths. Even though we all came from different technical backgrounds, we never hesitated to ask others for help, clarification, or to share ideas. Working in a team and overcoming challenges throughout our project helped us develop our communication, collaboration, and project management skills.

What's next for This or That

Multiplayer - (This or That in a group!)

  • By adding the ability to have more than 2 players, This or That will encourage more people to start conversations and make connections at once, as well as create a more interesting challenge in the competitive mode.

Built-in chat system

  • A built in chat system will allow for users to discuss the topics they’ve chosen in more detail without requiring each other’s contact information first. This option will allow users to branch out their network even further by playing with people they may have just met.

Topics catering to specific groups (such as First Nations)

  • One of the values of the This or That team is to spark deep conversations about and bring awareness to real-life issues. By increasing the amount of topics under the “Experiences” category, we allow for people of different backgrounds a chance to express their feelings on certain topics, receive support and research resources, and spread awareness about many more of the issues facing the world today.

Mobile versions

  • iOS and Android

Built With

Share this project: