KIT — UX/UI Design Case Study
Preface
Creative Labs this past winter quarter has been by far one of the most transformative experiences in my pursuits in product design. This organization at UCLA gathers innovative students together who want to start and/or work on impactful, creative projects over the course of 10 weeks. Prior to this project, I had no experience in product design, let alone have made any prototypes worth sharing with my team. I am so grateful that my project lead, Vanessa, decided to take a chance on me, and since then, I have dedicated so much time towards learning more in order to contribute my share to this project.
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
KIT is a mobile app designed to help users maintain long-distance friendships through the gamification of keeping in touch. Time-sensitive prompts and challenges encourage users to share their meaningful experiences and memories with those who care about them the most.
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
Vanessa and Kristie began this project because they wanted to keep in touch with their friends via games since everyone lives far away from each other (some internationally!) during the school year. Thus, KIT (short for keep in touch) was born.
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
Vanessa and Kristie’s concept for KIT was essentially a game where users come across time-sensitive prompts and challenges, encouraging users to share their meaningful experiences and memories with those who care about them the most.
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:
- How might we ensure that KIT cultivates a community-centered environment like social media but with less pressure?
- How might we accommodate individuals that have discrepancies in timezones and/or simply busy schedules?
- How might we make our game design more efficient and develop a greater sense of trust with our users?
User research
In order to further guide the design development of KIT, I found it salient to do some extensive research on these questions. Due to the limited timeframe, I was unable to conduct usability tests but was able to garner a lot of user research from data I found online.
UCLA Loneliness Study
A 2018 study surveyed over 20,000 U.S. adults in America aged 18 years or older and measured loneliness based on the UCLA Loneliness Scale, revealing that
- 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?
If you don’t remember the global phenomenon that was Pokémon Go back in 2018, you must have been living under a rock.
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
With the majority of our target audience being Gen-Z college students trying to remain interconnected, I identified that the most effective user experience comes from finding interactive ways to maintain and nurture strong relationships. Our game must incorporate several elements that can overcome various technical and non-technical issues that deal with user empathy, most notably a special emphasis on teamwork, as shared responsibilities create a sense of belongingness for every individual.
We brainstormed several solutions on how to execute this with our design questions:
- In order for KIT to have a community-centered environment with less pressure, smaller teams are essential in developing greater trust in sharing.
- 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.
- 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
Because most of our progress was done in Figma, we continued to expand on our initial wireframes, so I am unfortunately unable to retrieve the low-fidelity wireframes that we made over the quarter. We decided to continue to complete high-fidelity wireframes instead, adjusting accordingly depending on our timeframe.
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
At my marketing internship last summer at ResortPass, I learned the importance of a visual identity branding system. A visual identity branding system is essentially a graphical culmination of elements that allow individuals to distinguish a company’s identity. It was important to lay some groundwork on how we were going to make our game stand out from others, so I developed a guideline on how we can consolidate our brand.
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.
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
I was in charge of developing the entire onboarding process, ensuring that both new and returning users would encounter virtually no problems when registering or logging into their accounts. Like the previous picture above, users would be greeted with a registration screen immediately when opening KIT. Here, they have the option to create an account, or if they are a returning player, be able to log in.
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)
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
The importance of a seamless user experience in a game is paramount; if the player feels like the game is too difficult to play, or is confused at any point, almost immediately will they quit.
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.
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.
- 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
KIT is currently still in development, but we plan on releasing it to the App Store once Dev has completed their part. I am so happy to have worked with such an amazing team who has supported me all throughout KIT all the way up to my acceptance into Product Space, a dignified club at UCLA focused on building meaningful products for society.
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.
