Friendly Feud
Duration:
Tools:
Project:
Role:
January ~ March 2023
Figma
UCSD / Group Project
Lead Designer
During my senior year at UC San Diego, I had the privilege of taking COGS 123: Social Computing - a class that explored the intersection between social behavior and computational systems. For the class project, we were tasked with designing a distinctive social experience. My group decided to merge the best parts of HQTrivia and BeReal to create a social experience that encouraged friendly competition between friends and family.
Finished Artifacts
Style Guide
Notification
At a random time everyday, the user is notified when the daily trivia event has begun. The user may tap the notification to enter the app and may start the quiz whenever they choose.
Log-in/Sign-in
According to our research, 90% of users exclusively use Google or Apple login. We decided to implement that as our primary login method.
The Trivia Game
Our game flow consists of three trivia questions, all timed. Tapping an answer choice reveals the answer and awards points based on how quickly the user was able to answer the question - the faster you are, the more points you get! Between each question the user is given a brief 30 second window to chat with any of their friends in any pre-existing group chat.
Step 1: Question
Step 2: Answer
Step 3: Groupchat Selection
Step 4: Chatroom
Step 5: Typing Capabilities
Step 6: Emoji Selection
Step 7: No Groupchats
'Game' Tab
The game tab does two things; If the user has not completed the daily quiz, they are given the option to either begin the quiz themselves or check which the status of their friends. However, if the user has completed the quiz for the day, they are shown the recap of their results.
Step 1: Incomplete Quiz
Step 2: Completed tab (with streaks!)
Step 3: Quiz Recap
'Friends' Tab
The user may chat with their friend groups whenever, wherever. Tapping a group chat opens the chat, and group member's scores are announced upon completion. Users may also view the settings of their group chat to add or remove members.
​
The user may also create a group chat any time, with any member on their list of friends. Users may leave group chats at any point, or delete them altogether.
Step 1: Group Chats
Step 2: Chat Room
Step 3: Group Chat Settings
Step 4: Group Chat Creation
Step 5: Adding Members to Group
Global Leaderboard
Although our app is tailored towards friends and family, we decided that no trivia app is complete without a global leaderboard.
'Profile' Tab
The user's profile tab keeps track of their streaks and records, along with the capabilities to change their username, profile picture, and ability to add friends through both usernames and QR codes. Users may also delete their account.
Step 1: Profile Landing Page
Step 2: Add Friends!
Step 3: Record Book
“Comparison is the thief of joy”
- Theodore Roosevelt
We initially were looking to create a social media experience, similar to Instagram or Facebook. However, our research indicated that many individuals - particularly students - found social media to be a detriment to their mental health, with many students citing depression and loneliness.
Why is this the case? Melissa G. Hunt, a clinical psychologist at the University of Pennsylvania, states that “when you look at other people’s lives, particularly on Instagram, it’s easy to conclude that everyone else’s life is cooler or better than yours”.
​
As a result, we decided that addressing mental health - and to a further extent, addiction - within social media platforms was our top priority.
This leads us to our problem statement: Users need a way to create and maintain connections with their friends and family, all while avoiding the negative effects of social media platforms, such as comparison and addiction.
Initial Research
At the start of this project in March, BeReal was gaining some extreme traction as the next big social media platform. We noticed that BeReal did a great job at addressing some major social media issues; the one-post-a-day feature greatly discouraged addiction, and the random timing of the app reduces comparison within users by giving a more accurate, authentic life experience.
This made us ask the question: Is there a way we can we gamify the BeReal format, all while retaining the core aspects of social media platforms?
So, to get a better understanding of how users interacted with mobile games, BeReal and social media as a whole, we decided to conduct both surveys (80 participants) and user interviews (3 participants). ​
The insights were as follows:
-
BeReal and mobile games were quite popular among both survey respondents and interviewees.
-
BeReal was often used to keep tabs on friends and family
-
There was no common appeal within mobile games, with some stating that they played for a quick distraction, or because of convenience.
-
​However, many interviewees emphasized the importance of competition in mobile games.
-
-
Late option to participate was necessary, otherwise many stated how they would lose interest in participating at all.
-
Many felt commitment to participating in a potential game daily if their friends and family were also committed.
-
Competing with the same people every day and a ranking system were important.
With these insights, we decided to draw out some sketches.
Initial Views:
Trivia Game Flow:
Profiles:
Leaderboards:
Lo-Fi Prototype
How does it work?
Similar to BeReal's once-a-day feature, Friendly Feud will notify the user at a random point in the day when the daily trivia drops. The user then answers three trivia questions in quick succession. Each question is followed by a brief chatting period, where users can chat with anyone who is also currently playing the game. Users can also tap the emojis at the bottom to quickly send an emoji reaction instead. Following the game, the users can either view the leaderboards or chat with their friends.
Trivia Question:
Chatrooms:
Leaderboard:
Post-Quiz Chat:
Following the creation of our lo-fi prototype, we had the privilege to be one of two teams to present and user-test our prototype with the entire 120+ student class. After conducting a post-game survey and leading a class discussion, we received tons of feedback, leading us to the changes emphasized in our second iteration.
Second Iteration
Our changes (based on feedback given) included:
-
New Sign-in Flow and Friend Group Lobbies encourages synchronous gameplay within pre-existing friend groups.
-
New Emoji System: Reacting with an emoji now tallies the emoji at the top of the interface, reducing chat clutter.
-
You can see which questions you got right and wrong in the Post-Quiz Recap.
Sign-in Flow:
Friend Group Lobby:
New Emoji System:
Post-Quiz Recap:
Two weeks later, we had the opportunity for another live presentation and user-testing session with the entire class. The feedback we received this time around was much more visual and bug oriented. However, we did get some feedback indicating that our app was still missing that key interaction between friends and family:​
"A list of friends when we are on the chat screen."
"Any incentive would work, even just beating my friends."​
​"Another thing that would motivate me is simply beating my friends."​
​​"The ability to be able to add friends."
The Final Design
To address the concerns discussed during the prototyping sessions and more, in our final prototype we decided to refine our product in the following ways:
-
A new home page and account system
-
New user profiles with detailed records
-
Friend-adding and removing capabilities
-
Detailed chat view of friend groups
Friendly Feud App Demo
Concluding Thoughts
We wanted to create a unique and authentic experience that brought friends and family together without comparison and addiction, two common symptoms of social media. We believe that our commitment to BeReal's once-a-day feature in junction with the competitive but fun nature of trivia accomplishes this goal.
As the lead designer working with a software developer, this project felt very professional - particularly the hand-off process. My responsibilities as the lead designer consisted of user research, analyzing the data, sketches, leading the visual direction, all three versions of the wireframes and the final prototype. My design work was assisted by Bobby Baylon, whose fantastic ideas and fresh perspectives proving to be extremely useful. It was super exciting designing an app from scratch and this experience boosted my confidence not only as a designer, but a leader as well.
In terms of things I could improve on, I definitely think the user interface could have used a little polishing. Trying to give users tons of functionality while keeping the interface as clean as possible proved to be pretty difficult. I would also love to conduct a final round of usability testing, just to gauge how users felt about the user flow.