Mobile Game Prototype: Cafe Village
Game to Facilitate Horizontal Networking
Timeline
6 weeks
Tools/Skills
Figma, Adobe Suite, Multi-media Prototyping, UX Research, game development
Role
UI/UX Designer, UX researcher
My Scope
Responsible for project start to finish along with 4 fellow designers. Pitched and developed idea to gamify the networking process.
Problem
Students want to find networking opportunities for their career development, but face too many barriers to properly do so.
Solution
Gamify the networking experience with a mobile game that helps students approach networking in a more genuine and lighthearted manner.
Introducing...
Cafe Village
Cafe Village is a world-building networking game that connects students with shared career interests through virtual coffee chats. It emphasizes horizontal networking, connecting individuals in similar or adjacent fields to foster meaningful connections.
Focus on Horizontal Networking
We decided to focus on horizontal (peer to peer) networking versus vertical networking because we were aware that there's already an abundance of vertical networking platforms (e.g. LinkedIn). Instead of doing what's already been done, our team wanted to explore the more niche sectors within networking and see what could improve such sectors.
Key Features
Create your Networking Profile and Avatar!
Fill out info to complete your profile:
Name, Age, College, major
Connect your LinkedIn
Career interests and goals
Design an avatar, customized to best express yourself!
Start Coffee Chats in Coffee Lounges!
Explore Coffee Lounges catered to your career path(s)
View other players’ profiles
Initiate coffee chats through chat request (dm) → leave lounge to Video Meeting
Add Shared Characters to Your Village!
Users can view their shared created characters on their homepage.
progress bar at the top of the screen that tracks the points earned from coffee chats
points unlock village customizations
Chat with Multiple People in Group Chats!
Users can also join group discussions with those who share the same interests/lounges!
Reflect and record key moments from coffee chats in your diary
Once they have finished a coffee chat, users can click the “Diary/Reflection” icon on the bottom navigation bar which includes notes and information about the past 1:1 coffee chats they had.
Personalize your Comfort Level with AI
The “Settings” page allows users to disable or enable AI Coffee Chat notes which allows AI to record, transcribe, and create a summary of takeaways from the 1:1 coffee chats.
Defining the Problem
Why and what about networking is so difficult to students, early in their career development?
Research Goals
Learn what factors contribute to stronger, meaningful relationships and the impact of networking in professional development.
Understand specific user needs and frustrations when it comes to informal networking as college students.
Identify gaps and opportunities for improving the networking experience based on existing solutions/competitors.
Survey Insights
We received a total of 22 responses from undergraduate students regarding their experiences and opinions on networking and coffee chats. Our key findings include:
Most common topics for informal networking are career journey, skill-building tips, and goals and aspirations.
Coffee chats are intimidating and awkward for reasons such as anxiety talking to new people, not knowing how to approach people, or lack of good conversation topics.
Some users are reluctant to network and arrange coffee chats on platforms like LinkedIn due to lack of response, feeling intimidated, or not wanting to come across as impersonal
Many expressed a need for conversation aids, scheduling support, “open to coffee chats" indicators, and overall guidance with networking.
"Networking seems difficult and intimidating because I don't really know how to approach it. I've had a couple coffee chats virtually in the past, and they've been extremely helpful, but I also feel that it's hard to find opportunities to actually have coffee chats."
Literature Review
Gaming and collaboration significantly strengthen social ties. Digital gaming creates spaces for interaction, and humans have a fundamental need for meaningful relationships as these affect cognitive behavior (Goncalves et al., 2023).
Networking is also key to landing jobs, with referrals becoming increasingly important (Laborde, 2024). The rise of Online Social Networks (OSNs) further boosts connectivity and collaboration (Wang & Ma, 2014).
These three factors shape how people build social and career connections, and we aim to integrate them into Cafe Village.
Competitive Analysis
Now, why would we need another networking app when LinkedIn already exists? In order for Cafe Village to truly be novel, we conducted a competitive analysis of 7 existing platforms and compared that to our own platform’s features.
Cafe Village addresses LinkedIn's limitations by offering a gamified and student-focused platform that simplifies networking, enabling meaningful connections without the need for premium subscriptions or navigating large, impersonal connection pools.
Animal Crossing
Cafe Village draws inspiration from Animal Crossing’s emphasis on community and customization. Unlike Animal Crossing's slow progression and repetitive tasks, Cafe Village focuses on dynamic, career-oriented interactions that foster meaningful connections and professional growth.
Coffee Pals
Cafe Village takes inspiration from Coffee Pals’ focus on fostering workplace connections over shared interests but tailors the experience for students by gamifying networking. Cafe Village provides structured, goal-oriented features to help students build lasting and purposeful connections.
Our Goal & Role
How Might We...
Make a novel networking experience that is more approachable and helps college students build and maintain meaningful long-term relationships with their peers?
My Role:
I worked in a team of 4 other UI/UX designers. I pitched and developed idea to gamify the networking process, then distributed work evenly in researching, prototyping, and testing to arrive at our final game prototype.
Prototype Sessions
We conducted 2 rounds of in person prototype sessions to imitate the networking experience with our game. In our sessions, we made our classmates complete tasks that they would in the app, but in an altered way to better match the restrictions of a real physical environment.
Prototype 1
How it Worked
Our first prototype was heavily dependent on Figma, where all the steps in our prototype took place (eg: avatar creation, character customization, lounges, villages, reflection cards). We also utilized Knowit, a flashcard deck making app for our networking prompt questions that the players answered during their coffee chats.
1
get character cards
players were given a random character card that acted as the roleplay script
had to take note of personality, career goals, and networking objectives to embody their assigned roles during the prototype
2
create your profile
each player designs a personalized avatar on Figma
players would drag the pre-made components onto their avatar makerspace
3
coffee chat + shared avatar
players head to lounges
use flashcard prompts to guide discussions and build your shared avatar on Figma
hybrid character goes into the players' villages
4
post chat reflection
Reflect on your networking experience by leaving comments in the “Coffee Chat Characters” section of the figma file
Feedback from Prototype 1
Streamline Prototype
simplify the process to focus on the social experience, reducing initial setup steps
“felt like there was a lot of hoops to jump through to get to the actual social experience”
“there’s a lot that users have to do at the start to get things going”
Participation
ensure everyone can fully engage in and understand the prototype experience
“Audience members didn’t really get a chance to experience the prototype, so we didn’t get a full view of what the app experience actually is”
“As a non-volunteer, I felt a little lost as to what my role was – I was not able to hear or understand the activities the volunteers were completing”
Concept
highlight the app’s unique approach but address concerns about its practicality given existing competitors
“this is very unique, I’m just not sure how likely it would be for me to it versus typical networking apps like LinkedIn…”
“I like the gamified experience…however since I think the core of the app is meeting up with someone based on a shared interest…I think I could do that without a game experience’’
Prototype 2
Response to Prototype 1 Feedback
After our experience in week 8, we made some drastic changes for prototype 2.
To start off, we moved our instructions from a doc to our slides and added more visual aids for more clarity.
Simplified customization:
Removed full avatar creation.
Limited options to 3 per feature in Round 1 and 6 in Round 2.
Addressed inclusivity feedback:
Involved the entire class instead of only 5 volunteers.
Removed character cards; participants played as themselves for a more natural coffee chat.
Transitioned to physical setup (for evaluation):
Replaced Figma lounges with physical lounges.
Changed villages from Figma frames to photo albums.
Created paper doll avatars and used Post-it notes for reflection cards
Feedback from Prototype 2
In our second round of prototyping, we observed significantly higher engagement from participants across the class. The feedback we received was overwhelmingly positive. Participants were positively receptive to the concept and indicated that the prototype felt more streamlined and enjoyable.
“I think overall it’s really fun, I would like a structured way to network because I’m quite awkward so if this was an option I would definitely use it."
“It was much more streamlined and less confusing than before"
“I like the idea of incorporating games in a networking experience in order to break the ice and help conversations flow better."
“It was fun! I feel the time constraint made it less deep but overall I had fun”
Suggestions primarily focused on clarifying game features, which we couldn’t explore in depth within the available time. Based on this second round of prototyping, we refined the features of our app and enhanced the digital prototype.
Lo-fi wireframes
We designed lo-fi wireframes to envision the app structure on Figma.
Final Prototype
Inspiration for Game Style
I’m not much of a gamer, but have always loved simple world building games like cat & soup and animal crossing. I took inspiration from these games, utilizing its addictive and gratifying characteristics of being able to grow and develop your own space.
Cats and Soup
Village City
Game components
We created game components, focusing on finding a large variety of character customization pieces. Due to time constraints, we utilized Figma Communities to source our customization pieces, but created all other layout graphics on our own.
What we Learned
Developing Cafe Village revealed key challenges, such as addressing the intimidation users feel when networking, simplifying overly complex prototype processes, and balancing engaging gamified features with practicality. These challenges taught us the importance of streamlining features, providing clear instructions, and thoughtfully integrating gamification to create an approachable and effective networking tool.
Key Takeaways:
Simplify processes to make the experience more user-friendly and accessible.
Provide clear, concise instructions to reduce confusion and setup time.
Use gamification to ease anxiety and encourage meaningful conversations.
meet the team
Team Latte
Lena Pham
Shinhye Park
Kellie Huang
Allison Huang
Irene Joo
