Level Up: Gamified Social Media
Bridging Online and Offline Interaction to Build Meaningful Relationships
ROLE
TIMELINE
TOOLS
Product Designer • Researcher
Full Stack Developer
January - April 2026 (12 weeks)
Figma • Figjam • Supabase
Tailwind CSS • Next.js
Problem
Despite being constantly connected online, many young adults report feeling socially disconnected or lonely. How can I design a social media platform that promotes real-world connection, rather than digital engagement?
Constraint
Points, levels, and missions can make genuine moments feel transactional. The challenge was using those mechanics to motivate people without hollowing out the reason they're hanging out in the first place.
Outcome
Designed and built a gamified social mobile app with a tiered mission system, cooperative post flow, and private metrics between friend pairs. Validated through a 20-person survey, a 9-participant co-design workshop, and usability testing with 4 participants.
PROJECT OVERVIEW
Social media has reshaped how young adults relate to each other yet platforms are built around algorithmic feeds, engagement metrics, and visible follower counts which reward visibility over depth. Despite being constantly connected online, many young adults still report feeling socially disconnected. Online presence has become performative, blurring the line between actually connecting with someone and just consuming their content.
TL;DR
For my senior design capstone, I wanted to design a platform that would encourage users to engage with one another actively rather than passively.
RESEARCH
UNDERSTANDING THE PROBLEM SPACE
How might I examine the relationship between social media engagement and perceived social disconnection among young adults?
Before designing anything, I needed to understand why constant digital connection does not consistently translate into meaningful in-person interaction. To understand this disconnect, I conducted the following research methods:
Reviewed academic research on adult friendship formation and maintenance via Google Scholar, including the role of repeated unplanned interaction in sustaining bonds.
Examined platforms like Instagram, BeReal, Partiful, and Pokémon GO to identify how existing apps attempt to facilitate connection and where they fall short.
Distributed a 20-response survey to gather quantitative data on how often people plan time with friends, what stops them, and what apps they currently use.
Translated research findings into a current-state journey map visualizing where social intent breaks down and where opportunities for intervention exist.
Key Research Insights
INSIGHT 01
65% of survey respondents rated feeling socially connected on social media as just 2–3 out of 5, despite 90% spending 2–6+ hours on social media daily. The literature reinforced this as visibility and awareness don't equal relational depth. Across interviews and secondary research, uncertainty was the main cause of abandonment.
Implication: The app needed to push people toward doing things together in person, not just reacting to each other's content.
INSIGHT 02
85% of survey respondents cited busy schedules and 70% cited difficulty coordinating plans as barriers to hanging out, while 65% agreed they wish they spent more time with friends in person. Having something to do can make all the difference between hanging out or not.
Implication: The missions system needed to lower the activation energy for making plans with something concrete to grab onto rather than open-ended pressure to reach out.
INSIGHT 03
The competitive analysis found that progression systems in existing apps are almost always individual, such as streaks, leaderboards, and follower counts, and the literature confirmed that these introduce comparison and hierarchy. 75% of survey respondents preferred cooperative experiences over competitive ones.
Implication: XP and levels had to be private between friend pairs. No public leaderboards, no global rankings with progress visible only to the two people in that friendship.
DESIGN
TRANSLATING RESEARCH INTO DESIGN
How might I translate research insights into a mid-fidelity social RPG experience that encourages meaningful in-person interaction?
Milestone 1 established the gap between social intent and real-world follow-through. Following my research, I translated those findings into the early stages of my design through sketching & wireframing.
The wireframes were then tested in a co-design workshop with 9 participants from the Gen Z target demographic. After reflecting on their own social media habits and game mechanics they found meaningful, participants ideated on features before being shown the wireframes for concept testing.
Core Design Decisions
01 Levels and XP are private between friends
Each friendship has its own XP total visible only to those two people. This came directly from workshop and survey feedback expressing strong concern about public comparison and friendships feeling competitive.
02 Missions are tiered by time and effort
Daily missions (10XP) are low-commitment, such as going on a short walk. Weekly missions (25XP) require more coordination, like cooking a meal together. Monthly missions (100XP) are higher-stakes experiences like going on a hike as a group. After the co-design workshop, color-coded tier accents were added, as well as a Custom tier that lets users create their own missions, capped at 3 per week to prevent overuse.
03 Mission posts are collaborative
The post flow requires every collaborator to upload their own image before the post can be submitted. The submit bar reads "Waiting for Friends to Add Photos" until all participants have contributed, then activates as "Mission Complete!" This ensures the mission isn't logged until everyone who was there has participated.
04 Friend cards show relationship tier, not a follow count
The friends list displays each person's friendship level and a relationship tier label ("Best Friend," "Close Friend," "New Friend," etc.) alongside mission count and an XP progress bar. This framing makes the system feel reflective rather than competitive.
ITERATION
DEVELOPING A HIGH-FIDELITY PROTOTYPE
How might I refine and validate a high-fidelity version of Level Up that feels intuitive, visually cohesive, and ready for real-world use?
Following the co-design workshop, I iterated upon my wireframes and developed a mid-fidelity prototype. This prototype went on to evolve into my high-fidelity prototype showcasing the interactions and user flow between the app's screens.
I went on to conduct usability testing with 4 participants from the Gen Z target demographic using a think-aloud protocol across 6 tasks covering the app's core flows. All 4 participants completed every task with little assistance, confirming that the core navigation and cooperative features are fundamentally intuitive.
Key Findings & Iterations
Star icon not recognized as the activity center.
2 of 4 participants associated it with favorites rather than notifications.
Fix: Replaced with a bell icon to align with established notification conventions.
Post preview carousel not discovered without prompting
2 of 4 participants didn't realize the photo carousel was swipeable.
Fix: Added dot pagination to signal that additional photos are available.
App feels more like logging activity than planning hangouts
One participant noted this directly contradicted the app's core purpose.
Future fix: Would add an invitation prompt screen and group chat screen to bring planning into the app's flow.
Friendship leveling could still feel competitive over time
Despite low-pressure intent, one participant raised concerns about the system feeling obligatory.
Fix: Added a contextual note on the friends page reinforcing that XP is private between the two friends.
For the final part of the project, I wanted to go beyond Figma and into a full-stack implementation to understand both sides of product development using Next.js 14, Supabase, Tailwind CSS, and TypeScript. I approached learning the stack through a combination of YouTube, documentation, and AI assistance using Claude Code and ChatGPT to help scaffold features, work through errors, and understand unfamiliar concepts faster. All generated code was reviewed and adjusted manually to fit the needs of the project.
The result is a working proof-of-concept with core flows like authentication, friend connections, missions, and cooperative posting being functional but not production-ready. Real-time post status updates, full edge case handling, push notifications, and motion design are the most immediate next steps if development were to continue.
RLS Policy Conflicts
Row-Level Security kept rejecting profile creation on signup. Resolved a policy ordering conflict where the trigger was firing before the user's auth session was fully established.
XP Calculation Logic
Moved bond XP calculation to a Supabase function called on mission completion to prevent client-side manipulation and update friendship XP atomically.
Email Confirmation Flow
Default email confirmation blocked profile row creation. Resolved by moving profile creation to a database trigger on auth.users insert.
Batch Profile Fetches
The friends list was firing N+1 queries on load. Refactored to a single batch fetch using Supabase's in() filter.
This project reinforced that digital product design is fundamentally about solving real problems for real people, and that the quality of a solution depends entirely on how well the designer understands the problem. This started as a question about loneliness and social media and ended with a cooperative social RPG built around friendship.
Designing and building the same product surfaced constraints a Figma file alone never would have. The collaborative post flow, the XP ledger, the friend connection system all required decisions that only became clear when the interactions were real rather than simulated.
If development were to continue, the most immediate priority would be building out the end-to-end flow of the app, particularly the planning side. From there, the focus would shift to motion design and micro-interactions, followed by fully fleshing out the technical stack to bring the prototype to life as a shippable product.
DIVE DEEPER
Check out my high-fidelity prototype or my full documentation below!
.png)
