Make or Break
What is your relationship deal-breaker?
Inspired by the design of JackboxTV, Make or Break brings friends together—whether near or far—to navigate the highs and lows of relationships, all without the emotional rollercoaster. It's a hilarious and insightful experience as you watch your friends tackle various relationship scenarios that could either strengthen or destroy their connection.
Make or Break is a spin-off of another card game currently in development, Swipe Right, which explores the deal-breakers in modern dating. In today’s dating landscape filled with heartbreak, frustration, and loneliness, Make or Break offers a chance to reflect on what truly matters in relationships—and sometimes, to cut your losses and move on to something healthier.
Here’s how it works: In the game, you’re randomly paired with another player in your group to form a “couple.” Together, you’ll navigate five key stages of a relationship: Dating, Relationship, Moving In, Engagement, and Marriage. At each stage, you’ll face different scenarios related to money, trust, family, and love, and decide if you and your partner can work through them—or if it’s time to call it quits. By the final stages, your friends can even vote on whether a relationship is too toxic to continue.
For groups with an odd number of players, one person takes on the role of the “single.” The single player navigates dating scenarios, determining if certain red flags would prevent them from pursuing a relationship. If a couple breaks up mid-game, the single player is randomly paired with one of the newly single players, adding an unexpected twist to the game’s dynamics. In the end, players will decide if staying together is healthy or if it’s time to end things before they get too toxic.
Will your relationship survive Make or Break?
Will your relationship survive Make or Break?
To begin, one player generates a game code using the web or mobile app, which opens a virtual game room for others to join. Each player is then randomly paired with another player, and the game assigns a random turn order. When it’s your turn, you’ll draw a relationship scenario involving your partner and decide whether to “Make-up” or “Break-up.” During the discussion phase, your partner will plead their case for why the relationship should continue, while you argue whether it's time to move on. If things get too heated or toxic, the other players can unanimously vote to end the relationship in the engagement and marriage stage.
User story and experience during gameplay
Once a “couple” breaks up, both players become “single.” If a player remains single in subsequent rounds, they’ll treat each new scenario as part of their dating experience. The single player earns a relationship point if they decide that a scenario contains no deal-breakers. If another “couple” breaks up, the “single” players get randomly paired.
During the initial playtests, players expressed confusion about the relevance of certain questions, as their significance changed at different stages of the relationship. To resolve this, I added different relationship stages to the game, which adjusts the importance of scenarios as players move through different relationship phases.
Each round represents the different stages in the relationship
"It was so much fun to play"
"The scenarios are so funny when put together"
"Some of the scenarios doesn't make sense for both the dating stage and the marriage stage"
"The "Single" player doesn't contribute much towards gameplay"
"What if people break up over this?"
"It was so much fun to play" "The scenarios are so funny when put together" "Some of the scenarios doesn't make sense for both the dating stage and the marriage stage" "The "Single" player doesn't contribute much towards gameplay" "What if people break up over this?"
User Feedback
During playtest rounds, even though the majority expressed positive feelings towards the game, there were some concerns raised that could influence the enjoyment of the game. I addressed these concerns with these additions to improve GamePlay
Allow Single Players an opportunity to win through fewer points/Stages (4)
Separate the scenarios and identify which would make logical sense at different relationship stages
Provide randomized couple selection so that the player doesn’t start out dating their partners.
Website + Mobile Platform
UI Design
Low-Fidelity Prototype
Make or Break operates through two key components: a web-based platform and a mobile app. Together, these platforms create an interactive experience where players can engage in relationship scenarios, vote on outcomes, and track progress. Each platform plays a unique role in facilitating the game.
High-Fidelity Mockups
The web-based platform is designed for projection onto a shared viewing space, like a TV or projector, or for live-streaming to remote players. Throughout the game, players can see who they’re paired with, review conflict scenarios, and follow the voting distributions to decide whether couples should stay together or break up. Instructions and settings are available throughout to guide players through each stage of the game.
The mobile app provides a personalized and interactive experience, allowing players to engage directly with the game using their devices. Players can review and respond to relationship scenarios, make decisions to "make up" or "break up," and vote on the outcomes for their own and other couples. The app dynamically adjusts scenarios based on each player’s relationship status and stage in the game, guided by prompts from the web-based platform. This adds a more interactive component to the gameplay compared to the web-based platform, enhancing the overall experience.
In future iterations, I plan to add more animations, particularly during transitions between different relationship stages, to create a more seamless and intuitive design.
FAQs
What is the most challenging aspect of this project?
The most challenging aspect of the UI design is figuring out how to make the frames transition smoothly into each other. I often use "Smart Animate" to create the transitions, but it doesn't always produce the expected results. Additionally, integrating both mobile and web development has been challenging, as maintaining parallel transitions between the two platforms while balancing simplicity and functionality in the designs can be quite complex.
Why convert Make or Break into a web-based game?
The randomization and point-tracking features are essential to the game's overall enjoyment. Randomization helps pair up couples seamlessly, avoiding the social friction of "picking teams" during the initial phase. Meanwhile, point-tracking ensures that players can easily follow their progress. During playtesting, some players found it challenging to keep track of their points—whether for Singles or Couples. A web-based platform can solve this by using algorithms to automatically calculate and display points in the background, giving players a clear understanding of their standing throughout the game.
What are some changes you’re planning to incorporate?
I wanted to create personalized animations to help users visualize the gameplay more effectively. There are some "key hacks" in Figma, such as autoscrolling, that I plan to incorporate into the relationship components at the bottom of the frame. Additionally, I want to include animations that visually represent progressing through relationship stages. As I gain more experience, I plan to fully integrate these features into Make or Break
Why did you choose this project to showcase UI/UX?
Game nights with my friends are some of my fondest memories. I’ve always admired how JackboxTV creates a versatile experience by seamlessly combining mobile and web platforms. Whether played locally or online, these games bring people together in an engaging and accessible way. I was inspired to develop the online UI/UX of Make or Break to allow players the ability to connect in unique ways. Through its mobile and web features, the game can be projected across different platforms and encourage people to bond on a personal level. This is the experience I aimed to capture in the game's prototype.
Thank you for Checking out Make or Break
Please reach out for additional clarifications or concerns
