→ A game to see how quickly you can connect two musicians using their related artists 🥁
→ ui/ux design, game design, data visualization, prototyping 👨🏽💻
→ nov 2023 - now 🗓
→ relatle.io 🔗 🌎 ← the game is live! go play!
the best user feedback i’ve ever had
role
I am the sole founding designer of relatle.io, working directly with one developer to build and iterate the site daily. We continue to launch new UI elements, micro animations, and features like custom games, hints, reset, and music previews. The daily puzzle game average 5,000+ active daily users and has seen 200,000+ total users across the US and the world. Relatle has now been played 800,000+ times and growing.
game objective
Players will start at the initial artist and use related artists to reach the target artists in as few moves as possible. Every day the players are met with a new matchup to test their skills and share their scores for the day among friends. Players can also create custom matchups to play themselves and share around.
pre-design process
Before opening a Figma canvas, I begin my design process with user flows which allow me to create a more rigid feature-set list. The user flow must encompass all paths both the ideal and non-ideal users take. Some of these paths include:
- Daily Puzzle Game
- Help Page (first time) → Begin Game → Hint / Song Preview / Reset → Win
- Post-Game
- Win → View Path / View Shortest Path / View Global Results → Share Path or Results
- Custom Game
- Starting Artist → Recommended / Chosen target artist → Play Game / Copy Game Link
- Randomized / Recommended Matchup generated → Play Game / Copy Game Link
- Post-Game
- Win → View Path / View Shortest Path → Share Path or Results / New Custom Game
From these paths, I’m able to finalize a feature set and begin designing. I use these paths to break up the design into bins: gameplay, post-game, and custom game. These bins apply to both the Daily Matchup and Custom Game modes, meaning I have six main page variations to take on.
Using these flows, I outline a feature set and assign them to their corresponding pages.
Gameplay 🕹️
Matchup
Scoreboard
Related Artists
Song Previews*
Hint*
Reset
Help Page
Post-Game 🏆
[Modal]
User path
Shortest path*
Global Results*
Share Path
Share Results
Create Custom Game
Custom Game* 🎨
Starting Artist
Target Artist
Recommended Artists
Possible Artists
Difficult matchup warning
Start Custom Game
Share Custom Game
*features not added in upon initial launch, but currently live
matchup creation
Building the backend of Relatle began by compiling the information of the 1500+ most streamed musicians and calculating the feasibility of each matchup. It was a fine line, generating matchups that were not too easy and not too hard. This was a product issue outside of design but still was vital to gameplay.
Any given matchup can be broken down into three characteristics:
- Length of the minimum path
- Number of unique paths
- Length of unique paths
Daily matchups and recommended custom games live in the safe zone of:
- 0 paths that take 3 steps or fewer
- 7 unique paths with at least 7 degrees of separation
- No single artist bottlenecks
Custom matches allow for more freedom. Players can generate any possible matchup but are given a warning if a matchup is deemed difficult. This warning is shown when:
- Less than 4 paths within 10 degrees of separation
- 0 paths within 7 degrees of separation
These exact values above were finalized through game testing, including plotting hundreds of randomized games. One example plot shows the minimum degrees of separation for randomized matches. This plot was used to decide on the 10-degree separation cutoff to deem a match difficult.
design process
Relatle took on many lives, and testing began even before a visual UI was created. When building a digital product from 0 to 1, the feasibility of development must be taken into account. Immediately handing off high-fidelity designs can cause a shift in focus away from the user experience and more toward the visual design.
Strong visual design needs to go hand in hand with a tested user experience or you’re left with something visually pleasing but lacking function. Below you can see early text-based and web-based prototypes of Relatle.
Bad UX pain points can be identified in the early lo-fi stage. This is efficient as it doesn’t waste developer time on building features that may be removed or heavily altered. For example, some missing yet vital features were quickly apparent:
- Live updating player score: number of guesses and resets
- Showing the player’s current artist
- Indicating if a player has already selected an artist
- Artist profile photos
With initial, glaring UX features added, it was time to enter the realm of visual design to make the interface pleasant and usable.
fixing user pain points
A vital step in designing the player’s experience is creating a sense of delight and seamlessness. Through testing Relatle’s MVP among the team and with users, I was able to organize the players’ pain points and implement features to mitigate friction.
Pain Point | UI/UX Solution |
Too many artists to scroll through | Only show 10 related artists |
Forgetting the target artist and scoreboard counts when scrolling down | A simplified path and score are pinned to the top of the viewport upon scroll |
Getting lost in related artists too far away from the target artist | Reset button: takes the user back to the initial artist without resetting their guess count |
Players’ limited knowledge of the target artist | Hint feature: shows the related artists of the target artist |
Players’ limited knowledge of any given artist | Press and hold for a preview of their top song |
Players creating custom games that are almost impossible to play | Showing recommended target artists based on the chosen initial artist. A warning message is shown when the custom matchup is deemed too difficult. |
Players left discouraged thinking they were performing badly | Implemented global results to show how the player’s results faired against the global minimum and global average* |
*Expanded on in the feature highlight section below
Visual design now took the front seat as I eliminated these pain points and brought Relatle to its current state of design seen below.
feature highlight: global results
As highlighted in the pain points table above, some players were under the impression they were performing badly after seeing their final scores. To mitigate this and keep player morale high, I made the UX decision to put players’ final scores in context.
Initially, I thought of showing where other players won the game or reset through a set of two heat map gradients: yellow for resets and green for wins.
This posed an issue of complexity where simplicity was needed. Communicating data is a matter of clarity, and this seemed too convoluted.
A change in direction then kicked off design iterations for what would later turn into the global results feature. The question then was, which statistics would best contextualize the player’s score? Ideation began with the data we have at hand:
- Average Score
- Minimum Score
- Maximum Score
- Player’s Score
I decided to put these values on a slider-esque UI to allow for flexibility with values that will appear in different orders and locations along the line for any user on any given day. This UI would live update as more players complete the game throughout the day.
A few issues arose with these iterations:
- Showing the maximum score would discourage players who scored too high
- Development difficulties with placing text within and/or below the circle
- If the average was too close to the min or max, the text would overlap
- What if the user scores the same as the minimum or average?
After working alongside engineering on this feature, compromising on both development and design, we’re led to the design live on Relatle today:
To solve the issues stated above, the maximum score was removed, the score values were placed in a fixed location below the results, and a split circle solution was created for overlapping values. After launching this feature, it feels truly intrinsic to the game.
When watching players’ behavior through testing, the first feature visited upon winning is the global results board. It’s such a popular feature that we now face the issue of people screenshotting the results board to send to their friends and accidentally revealing their game path. A good problem to have with a plan already in store to fix it.
conclusion
Relatle continues to grow in 1000s of users with new features continually on the horizon. Working within realistic development parameters and consistently testing players’ pain points has allowed me to grow as a user-driven yet product-focused designer.
Give Relatle a play, share your scores, and tinker around to discover all the hidden micro-interactions and design decisions. Have fun!
