FANDUBS
Helping college students find community through fandoms spaces
Overview
FanDubs is an app prototype developed for HCDE 302/303: Foundations of Human-Centered Design. It explores how shared fandom interests, campus events, and gamifying interactions to personalize avatars could help University of Washington students connect and find a community.
As the UX/UI Designer and Illustrator, it was my role to bring this project to life by creating the avatars, designing some of the layouts, and collaborating with my team to make sure each feature addressed our user's needs.
My Role
UX/UI Designer + Illustrator
Team
4 Designers
Timeline
Sept 2025 - March 2026
(22 weeks)
Tools
Figma
THe Problem
College students in fandom spaces may hesitate to approach new people for fear of being judged
As a college student, I have noticed that students who are in fandom spaces, including me, may hesitate to share their interests or approach new people for fear of judgment. Even when we want to make friends, initiating conversations and finding time to meet in person can be difficult. To understand why, my team and I asked:
How might we help apprehensive undergraduates in fandom spaces connect through shared interests and feel more comfortable transitioning from online interactions to in-person friendships?
The solution
Gamifying social interactions to make it more fun and approachable
Our team designed FanDubs as a safe space for UW students in fandom spaces to discover other students with similar interests and find campus events. The prototype features ways to make social interactions easier and more engaging through gamification. Each feature explores a different barrier identified in our research, from initiating conversations to finding opportunities to meet in person.
Discover
Add friends with similar interests and talk with them
Find students with similar interests, collect fan cards, and use suggested prompts to initiate conversations
Meet
Find an event that matches your interests and schedule
Browse suggested events that match users’ interests and availability
Express
Express yourself through your avatar using currency you've earned through interactions
Customize your avatar with currency earned through messaging and attending events
Interact with your avatar and receive words of encouragement
Research
Methods: Interviews, Affinity Diagrams, Persona & Journey Map, Competitive Analysis
Background research
I reviewed research on fandom spaces and learned that concerns about judgment and social stigmas can influence whether fans openly share their interests (Dym, 2020). This research helped guide my team's two research questions:
Research Questions:
What challenges do undergraduate students face when sharing their fandom interests with other students or finding friends?
How do social stigmas make students feel uncomfortable sharing their interests in person?
user interviews
To understand the challenges UW undergraduates face when connecting through shared interests, I conducted four of the 15 semi-structured interviews used to inform our design. My team and I used affinity mapping to identify recurring patterns across the interviews.
Four key findings
Common interests can provide a natural starting point for connection.
02 - Fear of judgment limits self-expression
Social stigma can make students hesitant to share their fandom interests.
03 - Initiating conversations can feel intimidating
Uncertainty about how to approach others can make starting conversations intimidating.
04 - Practical barriers limit opportunities to meet
Scheduling conflicts and limited opportunities for in-person interaction can make it harder to meet new people.
User persona & Journey Map
Understanding target audience and pain points
My team and I synthesized our interviewees’ challenges into a persona and journey map to visualize pain points. Morgan represents a student who wants to connect through shared interests but hesitates to initiate conversations and struggles to find time for campus events. These challenges helped frame our focus on conversation support and event discovery.
Key insight
Shared interests can help students find common ground, but don’t necessarily make initiating conversations or coordinating meetups easier
Our app therefore also needed to explore ways to help students initiate conversations and transition from online to in-person interactions.
Competitive analysis: Bumble bff
Design Opportunity: Build a campus-focused experience that connects students through shared interests and supports initial conversations
Design direction
Methods: Storyboarding, Weighted Matrix
DESIGN concepts + Storyboard
I developed six initial design concepts, the virtual avatar concept was one of the concepts our team selected to pursue. We then weighed my concept in a weighted matrix to see how well it addressed our pain points.
After pitching our concepts and storyboards to three professional product designers, we received feedback to combine ideas and make initiating conversations more approachable through icebreaker prompts.
Sketches of the refined concept I came up with and its storyboard
DESIGN GOALS
Based on our research and feedback from three product designers, my team and I created four design goals to guide our main features:
Help students discover people with shared interests
Help students find campus events that match their interests and availability
Make initiating conversations feel less intimidating
Support self-expression through customizable avatars
Usability Testing & Iteration
Methods: Wireframing, Concept Testing, Information Architecture, Usability Testing
Low-fidelity wireframes
I translated each of our design goals into low-fidelity wireframes to explore the app's structure, navigation, and core interactions before developing the prototype.
CONCEPT TESTING
My team combined our wireframes into an early prototype, and I conducted a concept test with one of the four participants. I then helped create another affinity diagram based on the feedback we got:
Information architecture
Usability testing & Revisions
After creating the mid-fidelity prototype with my team, I conducted usability testing with two participants by timing task completion and calculating metrics from user ratings. After presenting our mid-fidelity design to product designers for further feedback, I independently revised the prototype in three areas:
Simplifying navigation
Problem:
Participants took around two minutes to locate the card collection page
The navigation and currency indicators were difficult to notice
The Explore tab repeated content already available in the feed.
Solution:
Added a card-collection button to the home screen
Increased spacing
Removed the Explore tab and added a View interest button to posts.
Improving readability and layout
Problem:
Participants found event labels and details confusing or cluttered
Solution:
Renamed Calendar to Events
Separated attending events from upcoming events
Reorganized the layouts with larger text, more spacing, and clearer hierarchy.
Making conversations more approachable
Problem:
Messaging felt like cold outreach, and users still needed more support transitioning from online interactions to in-person meetups.
Solution:
Highlighted shared interests
Revised conversation prompts message
Introduced pre-event prompts to help users prepare for in-person interactions.
Results
Final feedback
After revisions, my team and I presented our final prototype to our class. The reception we got was overwhelmingly positive and our peers enjoyed the avatar aspect of our app.
Unresolved challenges
My revisions addressed the issues identified during user testing and our presentation but because I did not conduct another test after revising the prototype, their effectiveness remains to be validated.
Visual and Interface Design
Branding for self-expression
I helped develop FanDubs' playful visual identity with my team. The colors were inspired by the University of Washington's official colors and I designed some of the app's icons.
Exploring avatar personalization
Interviews suggested that personalization mattered to participants, so I explored how avatars could support self-expression in FanDubs. I created multiple avatar illustrations to demonstrate possible customization options, although I wasn't able to implement the full customization system within the project timeline.
Physical device prototype - Pocket dubs
Expanding from online to in-person transitioning
I proposed PocketDubs, a Tamagotchi- and StreetPass-inspired device concept exploring how students with shared interests might notice one another in person. I created a paper prototype and mapped out the interactions with my team. Although we built a 3D-printed model, it did not include electronic functionality and served only to demonstrate the concept.
The Prototype
Conclusion
Summary
From interviews and feedback, I learned that students had difficulty finding events to meet new people and were also nervous about talking to them. Our app was created to provide a safe space for these users to easily find events and other students. Our interviewees told us they were interested in using an app like ours when we presented our prototype, which showed us that our app was desirable.
Learnings and reflection
How To Properly Design Effective Solutions
One challenge was supporting the initiation of conversations without making interactions feel forced. I learned to connect design decisions directly to user feedback and consider how different features could support students at different stages of social interaction, which helped address the challenge.
The Strengths of Collaborative Work
Working with teammates who had different strengths showed me the value of teamwork. Each one of my teammates were able to pick up on an issue that another may have not seen. I learned to communicate design decisions, consider alternative perspectives, and give feedback on my teammate's designs and UIs.
Creating Interactive Components
FanDubs strengthened my Figma prototyping skills, particularly in building reusable components, styles, and variants across more than 15 screens. I also learned to establish consistent formatting early in the design process, as inconsistent formatted components made later revisions more time-consuming and difficult.
What's Next?
If I were to continue working on FanDubs, I would test the revised prototype with more students who are actively involved in fandom spaces and evaluate whether users can easily find event information, and if the use of pre-event prompts helps support initiating interactions in-person. I would also try to test if the layout and the hierarchy of the page actually was successful. Lastly, I would want to develop a functional PocketDubs prototype to explore whether proximity-based interactions could support in-person conversations.
References
Dym, B. (2020, October 19). First rule of fandom: Don’t talk about fandom. CUInfoScience. https://medium.com/cuinfoscience/first-rule-of-fandom-dont-talk-about-fandom-5b8ce84006