KIT — UX/UI Design Case Study

Preface

The KIT Team! (from top L to bottom R) Evan, Kristie, Lucy, me, Natalia, Bianca, and Vanessa

Since I began this project, I have set aside, at the very minimum, 12 hours a week to watching YouTube tutorials on how to use Figma/Sketch, finding inspiration from design websites like Dribbble, and reading many Medium articles about user accessibility to ensure that I carry my weight. I improved drastically each week with every new version of my prototypes, and now essentially done with the app, we are working closely with Dev to finalize our designs and our product.

Overview

I was part of the product design team for KIT, working alongside Vanessa, my project lead, and Lucy, another product designer. Our development team comprised of five developers, all managed under Kristie (who also taught me some front-end development during the home stretch of our product day!).

Design challenge

Since this was merely an idea, our design team had to devise a game plan for KIT. Our team as a whole is a huge proponent of mental health advocacy, and we knew that the curated facades that people put up on social media — despite it being able to better connect us with our friends — could be a destructive environment for some users. We wanted to be inclusive of those who struggle with loneliness.

Despite this, however, people tend to feel more comfortable with familiarity, and in creating an app that is heavily reliant on interpersonal connections, some aspects of social media and games should play a role in the framework of KIT. I came up with a design question to further guide the design process throughout the 10 weeks: how can we create an inclusive, gamified user experience that people would feel second-nature using?

Preliminary analysis

I read this article from a Facebook product design intern unpacking how generating questions to problem statements can spark ideation and solve our design challenge in an insightful way. Some questions I came up with after this research into my design question were:

  1. How might we ensure that KIT cultivates a community-centered environment like social media but with less pressure?
  2. How might we accommodate individuals that have discrepancies in timezones and/or simply busy schedules?
  3. How might we make our game design more efficient and develop a greater sense of trust with our users?

User research

UCLA Loneliness Study

  • Nearly half of Americans report sometimes or always feeling alone (46 percent) or left out (47 percent).
  • Two in five Americans sometimes or always feel that their relationships are not meaningful (43 percent) and that they are isolated from others (43 percent).
  • Generation Z (adults ages 18–22) is the loneliest generation and claims to be in worse health than older generations.

Social media users tend to have a higher loneliness score than those who don’t use it, but regardless, a commonality amongst both groups is that they both struggle profoundly with loneliness.

Pokémon Go?

Gamers and non-gamers alike were scrambling to find Pokestops and traveling all around the world to find rare Pokémon, and the mobile app actually grossed $2 billion in revenue and has been downloaded over 800 million times. To date, it is still one of the most successful mobile apps of all time.

Niantic, Pokémon Go’s developer, had a mission of “exploration, exercise, and social interaction” in creating this app, and it was part of their goal in building “experiences that bring together people, technology, and the real world in innovative ways.”

Data found that a lot of users maintained healthy, constructive habits that engaged them in behaviors that fostered more social interactions, reinforcing interpersonal connections and even making new ones.

Research insights

We brainstormed several solutions on how to execute this with our design questions:

  1. In order for KIT to have a community-centered environment with less pressure, smaller teams are essential in developing greater trust in sharing.
  2. Our timer must be universal amongst all timezones, and we can do this by establishing a CTA button that begins the challenge and notifies every team member.
  3. Each prompt that we incorporate must contain familiar language and have the intent to engage users to interact more with their surroundings and teammates.

User interface

High-fidelity designs

Every individual in our design team each had a shared responsibility in designing all components of KIT, but Lucy and I were assigned different sections of the app when developing high-fidelity wireframes. I worked on designing the initial UI framework for KIT, designing the onboarding user experience as well as the challenges section.

Visual identity branding system

Visual identity branding system for the initial prototypes of KIT

Like most collaborative groups, our design team had to agree with one uniform choice, so we decided on using a geometric sans-serif font, Poligon, as our only font along with the color schemes I chose.

The early versions of the onboarding screens for KIT

In addition, in our early versions of KIT, we used the app name as an acronym but decided to scrap it later on. Our icon was also changed to look less like a dating app (we had decided that the heart was too friendly) and more of like a fox, as a literal kit is a baby fox.

User experience

Onboarding flow

Within the registration flow, I included a feature of password strength, which followed the first principle of Jakob Nielsen’s 10 Heuristics for User Interface Design, as users were able to see whether or not their password was strong or weak depending on the progress bar. Within the login flow, I included a remember me feature that was able to circumvent the registration screen process the next time the user opens the app. In both registration and login flows, I took into account all errors that may occur with their respective accounts, which includes:

  • Registration errors (no username/username taken, no email/email taken, no passwords/passwords do not match)
  • Login errors (wrong username/password to ensure greater security)
  • Forgot password? (sends a password reset email to the user)
  • Reset password (upon opening the password reset email, and I also accounted for the error in a mismatched password on the reset screen)
The entire onboarding process of KIT

In addition, Vanessa also designed some tutorial cards that would show the user what KIT is about that would be displayed the first time the user opens the app.

Challenges

Therefore, designing the Challenges tab would be the most crucial part of our app, as it is the actual game component itself. Vanessa, Lucy, and I all created several versions of Challenges and drew components from each of our ideas, specifically:

  • A skeuomorphic, flat card system where we can input meaningful prompts/challenges for our players
  • A CTA that begins the timer and notifies other players in a team that the challenge has begun
  • A progress bar that would keep track of the total submissions from each team member
  • A universal timer that counts down the hours right next to each challenge
  • A max team of five to ensure greater trust in sharing

Our initial version of challenges included all of the features above and even answered all of our design questions regarding inclusivity. Still, this version failed to provide a good user experience, despite our attempts in accounting for various potential errors.

The initial, final draft of KIT’s Challenges tab

This was partly due to the lack of a low-fidelity prototype (which really goes on to show the importance of having one!), but nevertheless, we had to find ways to make all facets our high-fidelity user interface and user experience better.

Now it was not an issue of inclusivity, but rather making this gamified experience feel less of a chore and more like a game. I made several adjustments to our design team’s version of Challenges, all of which are intended to consolidate information better to make it more digestible for the user.

The final version of KIT’s Challenges
  • Challenges were no longer organized by ones you need to do by those submitted by others but rather organized by if you submitted them or not.
  • CTA buttons were implemented not only for easy access for individuals to join or start a team, but also to submit challenges, as there was no way to do so before.
  • A universal timer is visible at all times until the challenge is completed and becomes replaced with another challenge that must be completed the soonest. This gamifies the experience by making it seem more like a challenge.
  • Following a skeuomorphic, flat card design, I removed the numbers on the top righthand corner and instead opted for a stacked card look.
  • Upon opening at least one challenge, the Current/To Do challenge section will always be visible to let users know that they have challenges to do.
  • Friendlier copy (e.g. “LET’S GO”) and the use of animal icons encourage users of KIT to take a more personal approach in sharing their challenges.

On the whole, a redesign of Challenges was essential in solving our design question in making KIT an inclusive game that would be able to connect people with their friends. KIT’s gamification is the key to reinforcing interpersonal connections.

Final words

This experience has given me so many opportunities to learn more about UX/UI design. I started with virtually no knowledge to now being able to complete this case study with confidence. Balancing 23 units and Creative Labs this past quarter has been an arduous struggle, but I realized that the only way to grow is to put 110% into learning. Practice makes perfect.

A special thank you again to Vanessa for putting me under her wing – I owe you big time.

full-time student, full-time designer @ ucla