🎮  KINDR

Overview

For my fourth-year capstone project, I worked alongside other students to create a digital product revolving around mental health and well-being. The course was divided into three iterations with concepts in business, UX design, and visual design to produce our final project. The intent was to mimic an agile work development.

 

KINDR (kind-er) is an online web game platform that aims to digitally inspire genuine connection through meaningful conversations with question packs exploring friendships, dating, and family as well as exciting mini-games. KINDR is the new centralized space for friends and loved ones to connect and hang out virtually in an immersive experience.

Course & Duration

GBDA 402: Cross Cultural Business 2

Jan - Apr 2021

Team Members

Ariane Compton

Michelle Lee

Ken Namgung

Vidhi Shah

Role

Iteration 1: Business Analyst

Iteration 2: UX Designer

Iteration 3: Visual Designer

Video editor

Programs

Figma

Miro

Notion

Skills

Agile development, user research & testing, wireframing & prototyping,  UX/UI & visual design, video-editing

Screen Shot 2021-06-10 at 1.11.44 AM.png
BACKGROUND
Screen Shot 2021-04-18 at 4.53.51 PM.png

UN Sustainable Development Goals

For this capstone course, one of the UN sustainability initiatives has been selected as the basis for the project and my instructors selected

"Good Health & Well-Being".

 

The goal is to ensure healthy lives and promote well-being for all at all ages.

Problem

Our team wanted to focus on mental health, specifically looking into isolation in relation to relationships. According to a survey our team conducted, loneliness levels reached an all-time high and many participants felt isolated from others due to the pandemic. Being socially connected to others can ease stress and anxiety, provide comfort and joy, and we wanted to create a product that would help individuals feel connected with games during quarantine.

"How might we foster genuine connection amongst people to improve relationships and overcome isolation and related anxiety and depression?"

Idea

Following our how might we statement, we wanted to create a platform that helps build genuine connections and relations with meaningful conversations. KINDR drew inspiration from the card game "We're Not Really Strangers" where individuals would get to know each other on a deeper and vulnerable level through insightful questions.

Alongside the gameplay with question packs and mini-games, there is an option for video chatting and texting with fun emojis and gifs to create a better experience for users.

Process

build -> measure -> learn

For KINDR, our team followed an agile framework shown over three iterations. We continuously validated our work through user testing in each iteration and grew KINDR from low-fidelity wireframes to a fully functioning prototype with a sustainable business model.

 

Each iteration had three main pillars: Business, UX design, and visual design.

 
ITERATION ONE

In our first iteration, the most important factor was to establish the foundation of our business model and product. At this stage, we focused on gathering research about how individuals were coping with isolation during the pandemic and how the gaming industry has grown because of it. Iteration one outlines the early picture of KINDR showing the foundation of our business model and what we plan to offer. 

Our iteration one report can be found here.

Business

In order to develop our business model, Vidhi and I took the role of the business analysts to gather research to identify industry trends, customer expectations, and competitors. The tools used were the Business Model Canvas, PEST, and Porter's Five Forces.

Screen Shot 2021-06-09 at 9.32.48 PM.png

Business Model Canvas

Screen Shot 2021-06-09 at 9.34.14 PM.png

PEST Analysis

Screen Shot 2021-06-09 at 9.34.06 PM.png

Porter's Five Forces

UX Design

For UX Design, we conducted interviews and surveys to gain insights into how the pandemic has affected relationships. Afterwards, our team began brainstorming concepts, creating wireframes, and doing usability tests.

Screen Shot 2021-06-09 at 9.40.19 PM.png

Brainstorming sketches done by myself

Screen Shot 2021-06-09 at 9.44.05 PM.png

Wireframes

Visual Design

We created an inspiration Pinterest board to explore different styles and themes that would suit KINDR best.

Screen Shot 2021-06-09 at 9.47.53 PM.png

Inspiration

 
ITERATION TWO

In our second iteration, we continued to focus on further developing the business model, building and testing our product, and integrating a style guide to improve the visual aesthetics. We also came up with the name "KINDR" and created our mission statement:

"KINDR's mission is to create a new outlet of connection on the other side of the screen, inducing relief, happiness, and excitement through communication and gaming. We plan to harvest a platform for users to play virtually and enlighten a new concept of socialization with gaming to the public."

Our iteration two report can be found here.

Business

For this iteration, we developed pricing models, developed goals and pathways for said goals in our impact map, and began thinking of the various costs we would incur as a legitimate business in financial statements.

 

Creating an impact map taught up more about what specific business activities we can conduct to target our main actors to successfully accomplish our value proposition, "Build genuine connections and relations with meaningful conversations."

Screen Shot 2021-06-09 at 10.07.42 PM.pn

Impact Map

UX Design

For UX Design, we focused on creating structure and hierarchy with a site map and outlining a list of important product requirements. In addition, we created a scenario map outlining the steps our user (Pokimane) takes when she encounters KINDR and created user stories. Our team also individually created personas focusing on personality, habits, and motivations stirring away from traditional personas that included demographics and continued to build our prototype and did usability tests.

Screen Shot 2021-06-09 at 10.19.39 PM.pn

Product Requirements

Screen Shot 2021-06-09 at 10.26.11 PM.pn
Screen Shot 2021-06-09 at 10.36.04 PM.pn

User Stories - Open-ended questions for user personas

Information Hierarchy

W6 Persona - Celina-01.png

Persona

Visual Design

For visual design, we created a mood board outlining the style we wanted to implement in our product. From there, we developed a style guide with specific fonts and colours to be used throughout KINDR. 

 

Our next visual design goals are focusing on the logo, tone, and brand identity. Additionally, the placeholder images will be replaced with in-house designs to showcase game previews and other assets that feel unique to the platform to let the user know they are on KINDR. We will accomplish this with styled iconography, use of colour, and bold graphics to invite people in.

Screen Shot 2021-06-09 at 10.48.03 PM.pn

Mood board

Screen Shot 2021-06-09 at 10.55.23 PM.pn

Style guide

Screen Shot 2021-06-09 at 10.57.55 PM.pn
Screen Shot 2021-06-09 at 11.03.40 PM.pn
Screen Shot 2021-06-09 at 10.58.26 PM.pn
Screen Shot 2021-06-09 at 10.58.46 PM.pn

Iteration 2 Prototype - Selected screens (left -> right): Profile, Game Library, Game Info, Chatroom

 
ITERATION THREE

KINDR's platform improved dramatically with the feedback from a red-teaming activity and user testing. Our prototype took a shift from light mode to dark mode which created a whole new look for KINDR.

Our final iteration three report can be found here.

Business

For this iteration, we focused heavily on the customer’s buying behaviour, point of view of certain features, and what makes KINDR valuable to pay as a service to our prospective user base as opposed to a different gaming platform.

When considering who our customers could be, we determined two types of users:

1. Wanting a close-knitted personal gaming experience—potentially using mini-games and personalized question packs to create “real talk” conversations for an affordable price

2. Game and personalization bundles for a fun, dynamic, group game by purchasing extra add-ons to enhance the experience

Therefore, our pricing includes bundles and competitive pricing for all games/packs and tiered profile add-ons.

Our final financial statements can be found here.

UX Design

As mentioned, we received key feedback from our red-teaming exercise and implemented any suggestions and changes into our final prototype. Overall, we got positive comments and they were looking forward to our final product.

Screen Shot 2021-06-09 at 11.31.54 PM.pn

Red-teaming highlighted comments

Visual Design

The purpose of KINDR is to have a safe, open, and fun space to genuinely talk with others and play enjoyable games. To further emphasize that and better reflect the vision for the brand as a whole, we started to implement more visual details such as more colour from our style guide, gradients and fun graphics to enhance KINDR’s personality.

 

Our largest leap involved deciding to make KINDR entirely “dark mode”. This changed the entire atmosphere of the platform and made it feel like a cozier and exciting place to be.

Screen Shot 2021-06-09 at 11.37.50 PM.pn
Screen Shot 2021-06-09 at 11.36.27 PM.pn

Iteration 3 Prototype - Selected screens (left -> right): Homepage, Chatroom

 
FINAL

Presentation

Watch and learn KINDR's journey

Prototype

Interact KINDR's prototype

Screen Shot 2021-06-10 at 12.02.43 AM.pn

KINDR is a centralized gaming and video chat platform that provides users with a space to connect with friends and engage in meaningful conversation. 

Screen Shot 2021-06-09 at 11.53.00 PM.pn

Welcome

Welcome to KINDR! Users can browse through our introductory pages learning about KINDR and what we have to offer as well as ways to reach us if needed.

Users can click the "Play" button to sign up and begin playing games with their friends!

Sign up

Through a quick and easy sign-up process, users are able to make their profiles.

Screen Shot 2021-06-09 at 11.53.57 PM.pn
Screen Shot 2021-06-09 at 11.54.04 PM.pn
Screen Shot 2021-06-09 at 11.54.25 PM.pn

Dashboard

Welcome to the dashboard!

 

Here users will be able to find daily announcements and games based on their mood or what their friends are playing.

Profile

From any page, users will be able to access their profile page by clicking their top-right icon.

On the profile page, they will be able to customize their information and view statistics.

Screen Shot 2021-06-09 at 11.54.33 PM.pn
Screen Shot 2021-06-09 at 11.55.03 PM.pn
Screen Shot 2021-06-09 at 11.55.17 PM.pn

Store

Browse and purchase KINDR's free and paid games from the store library. By clicking on a game, users will be able to get further information regarding any add-ons and reviews from other players.

Chatroom

The chatroom is the main aspect of KINDR where users can interact and play games with their friends.

Screen Shot 2021-06-09 at 11.55.46 PM.pn
Screen Shot 2021-06-09 at 11.56.03 PM.pn
Screen Shot 2021-06-09 at 11.56.35 PM.pn

Settings

This page allows users to customize KINDR's settings to their personal needs. 

CONCLUSION

Key Takeaways

If I decided to continue working on KINDR, I would improve the visual elements even more focusing on implementing unique designs and graphics that would add to our brand identity. At the moment, I feel that the game banners and small visual elements can be improved to fit today's current design trends.

This project was part of my last course at the University of Waterloo, therefore it was sad knowing that it was my last project. Through many late-night calls with my group and not being able to work in person once due to the pandemic was tough - especially having to learn all of the material and attend lectures virtually. It certainly wasn't what I'd picture my last university course to be. 

However, I'm thankful to have been a part of a group that was incredibly hardworking and creative. Everybody had their own strengths and we were able to work together to make KINDR a project that we are happy to call ours. I have learned many new methods and will continue to expand my knowledge in business, UX design, and visual design that I will happily apply to my future projects.

Banners.png

[ 2019 ]    Editorial Design

🤙🏻  Check out my other projects!
Banners.png

[ 2020 ]    Mobile UX/UI

Banners2.png

[ 2019 ]    Editorial Design