Developing a spectator Heads-Up Display focused on creating a more interactive and enjoyable viewing experience for a bluff-based game set in a bar atmosphere.
Developing a spectator Heads-Up Display focused on creating a more interactive and enjoyable viewing experience for a bluff-based game set in a bar atmosphere.
Liar’s Bar
Liar’s Bar
Tools
My Role
Solo UX/UI Designer
Project Overview
Liar’s Bar is a multiplayer bluff game set in a moody bar, featuring animal characters and two modes, Liar’s Dice and Liar’s Deck, where calling a bluff can lead to elimination.
Tools
Tools
My Role
My Role
Solo UX/UI Designer
Solo UX/UI Designer
Project Overview
Liar’s Bar is a multiplayer bluff game set in a moody bar, featuring animal characters and two modes, Liar’s Dice and Liar’s Deck, where calling a bluff can lead to elimination.
Current Spectator View
Current Spectator View
The Problem
Once eliminated, players can only switch camera angles, limiting engagement and transparency while leaving integrity-minded players unable to follow the match fully.
The Problem
Once eliminated, players can only switch camera angles, limiting engagement and transparency while leaving integrity-minded players unable to follow the match fully.
Solution
Designed a host-toggleable spectator HUD that lets viewers see player hands when enabled, keeping friends engaged and supporting competitive strategy learning.
Spectator HUD Added
Why It Works
Keeps spectators involved post-elimination, with a host-toggleable feature that promotes fair play among trusted groups and prevents cheating in others.
Solution
Designed a host-toggleable spectator HUD that lets viewers see player hands when enabled, keeping friends engaged and supporting competitive strategy learning.
Spectator HUD Added
Why It Works
Keeps spectators involved post-elimination, with a host-toggleable feature that promotes fair play among trusted groups and prevents cheating in others.
Final Design
Final Design
3
3
Added a settings button beside the invite option for hosts, featuring a small number indicator that shows how many settings are active for quick visibility.
Added a settings button beside the invite option for hosts, featuring a small number indicator that shows how many settings are active for quick visibility.
Lobby (Host Settings)
Lobby (Host Settings)
Settings
Settings
Host Setting Menu Open
Host Setting Menu Open
• Spectators view hands.
• Let anyone call liar.
• Turn order.
• Number of lives.
• Spectators view hands.
• Let anyone call liar.
• Turn order.
• Number of lives.
Togglable Settings
Togglable Settings
Player Name
Player Name
Turn Indicator
Turn Indicator
Player Avatar
Player Avatar
Attempts left
Attempts left
Current Hand
Current Hand
1/2
1/2
bty26
bty26
Current Bid
Current Bid
Lair’s Dice Spectator View
Lair’s Dice Spectator View
Eliminated Player
Eliminated Player
2/6
2/6
PixelPhantom
PixelPhantom
J
J
J
J
K
K
Q
Q
Q
Q
1/6
1/6
NebulaNomad
NebulaNomad
Lair’s Deck Spectator View
Lair’s Deck Spectator View
Current Round
Current Round
Cards Being Played
Cards Being Played
Non-Host View of Settings
Non-Host View of Settings
Lair’s Deck Left Side view
Lair’s Deck Left Side view
Extra Screens
Extra Screens
Empathize
Empathize
Ideate
Ideate
Understand
Understand
Define
Define
Prototype
Prototype
Empathize with players by understanding the pain points they experience in
the game.
Empathize with players by understanding the pain points they experience in
the game.
Take those users' pain points and needs and clearly outline them.
Take those users' pain points and needs and clearly outline them.
Come up with solutions that meet the players needs and solve ongoing issues.
Come up with solutions that meet the players needs and solve ongoing issues.
Create prototypes based on our design solutions, using wireframes, high-fidelity (hi-fi), and low-fidelity
(lo-fi) prototypes
Create prototypes based on our design solutions, using wireframes, high-fidelity (hi-fi), and low-fidelity
(lo-fi) prototypes
Gather user feedback through testing and refine our design based on that feedback.
Gather user feedback through testing and refine our design based on that feedback.
My Design Process
My Design Process
• Real-Time Spectating: Players want tools to view hands and decisions live for a more engaging experience.
• Host-Controlled Visibility: Spectator features should be toggleable by the host to ensure fairness and transparency.
• Eliminated Player Chat: A dedicated dead chat allows eliminated players to talk without interrupting active gameplay.
• Real-Time Spectating: Players want tools to view hands and decisions live for a more engaging experience.
• Host-Controlled Visibility: Spectator features should be toggleable by the host to ensure fairness and transparency.
• Eliminated Player Chat: A dedicated dead chat allows eliminated players to talk without interrupting active gameplay.
Insights
Insights
Found over 45 community posts across Steam, Discord, and Reddit asking for better spectator tools like camera views, and post-death engagement.
Found over 45 community posts across Steam, Discord, and Reddit asking for better spectator tools like camera views, and post-death engagement.
User Research
User Research
• Shared-Screen Simplicity: Games like Super Mario Party show that clear visuals and simple layouts keep players engaged without complex spectator tools.
• Lack of Spectator Interaction: Adding features like chat or reactions could turn spectators from passive viewers into active participants.
• Value of Clear HUD Layouts: Poker-style designs show that clean, centralized layouts help spectators easily track multiple players in real time.
• Shared-Screen Simplicity: Games like Super Mario Party show that clear visuals and simple layouts keep players engaged without complex spectator tools.
• Lack of Spectator Interaction: Adding features like chat or reactions could turn spectators from passive viewers into active participants.
• Value of Clear HUD Layouts: Poker-style designs show that clean, centralized layouts help spectators easily track multiple players in real time.
Insights
Insights
Competitive Analysis
Competitive
Analysis
Researched games such as Valorant and Super Mario Party to see how different titles design their spectator modes and HUD experiences.
Researched games such as Valorant and Super Mario Party to see how different titles design their spectator modes and HUD experiences.
User Feedback
User Feedback
• Turn Visibility Needs Improvement: Users found it difficult to tell whose turn it was and suggested clearer visual indicators beyond a subtle glow.
• Visual Hierarchy Over Background Elements: Feedback showed that background blocks weren’t necessary; users preferred stronger emphasis on the cards themselves.
• Camera Flexibility Considerations: Participants were curious how the HUD would adapt to alternative camera angles, such as an overhead view, highlighting a need for layout versatility.
• Turn Visibility Needs Improvement: Users found it difficult to tell whose turn it was and suggested clearer visual indicators beyond a subtle glow.
• Visual Hierarchy Over Background Elements: Feedback showed that background blocks weren’t necessary; users preferred stronger emphasis on the cards themselves.
• Camera Flexibility Considerations: Participants were curious how the HUD would adapt to alternative camera angles, such as an overhead view, highlighting a need for layout versatility.
Insights
Insights
I conducted feedback sessions with 15 participants. I showed early design drafts to gather their input, help identify pain points, and refine the spectator HUD through iterative improvements.
I conducted feedback sessions with 15 participants. I showed early design drafts to gather their input, help identify pain points, and refine the spectator HUD through iterative improvements.
Left Side View Smaller HUD
Left Side View Smaller HUD
Right Side View Larger HUD
Right Side View Larger HUD
Quotes Gathered during Feedback:
From Sunni Monday: “I like how each player’s information is clearly spaced out, it’s easy to follow...You should make it clearer whose turn it is right now, the glow can be hard to follow.”
From Sunni Monday: “I like how each player’s information is clearly spaced out, it’s easy to follow...You should make it clearer whose turn it is right now, the glow can be hard to follow.”
From Ian Pagel: “You don’t really need the background blocks since the info is already easy to see. You should make the cards stand out more instead.”
From Ian Pagel: “You don’t really need the background blocks since the info is already easy to see. You should make the cards stand out more instead.”
From Ezequiel Arias: “I’m wondering how the display would look if the camera angle were very different, like from an overhead view.”
From Ezequiel Arias: “I’m wondering how the display would look if the camera angle were very different, like from an overhead view.”
Liar’s Dice UI
Liar’s Dice UI
Second Interation
Second Interation
K
K
Q
Q
Q
Q
Q
Q
A
A
0/6
0/6
PixelPhantom
PixelPhantom
1/2
1/2
PixelPhantom
PixelPhantom
Third Interation
Third Interation
1/2
1/2
PixelPhantom
PixelPhantom
K
K
Q
Q
Q
Q
2/6
2/6
PixelPhantom
PixelPhantom
First Wireframe
First Wireframe
K
K
Q
Q
Q
Q
Q
Q
A
A
0/6
0/6
PixelPhantom
PixelPhantom
PixelPhantom
PixelPhantom
0/2
0/2
First Design Iterations
First Design
Iterations
Used the Liar’s Dice UI as a foundation for early iterations, refining the spectator HUD through familiar patterns to improve clarity and engagement.
Used the Liar’s Dice UI as a foundation for early iterations, refining the spectator HUD through familiar patterns to improve clarity and engagement.
Mapped user feedback into Game Features, Integrity, and Engagement to uncover needs like better camera controls and post-elimination interaction.
Mapped user feedback into Game Features, Integrity, and Engagement to uncover needs like better camera controls and post-elimination interaction.
Affinity Mapping
Affinity Mapping
User Persona
User Persona
• Game Integrity Matters: Maintaining fairness is crucial for players who want to stay engaged and interact after elimination.
• Flexible Host Settings: Customizable options allow hosts to adjust rules and features based on playstyle and trust level.
• Post-Elimination Interaction: Players want more ways to stay active after elimination, such as using sticker emotes or roaming the bar freely.
• Game Integrity Matters: Maintaining fairness is crucial for players who want to stay engaged and interact after elimination.
• Flexible Host Settings: Customizable options allow hosts to adjust rules and features based on playstyle and trust level.
• Post-Elimination Interaction: Players want more ways to stay active after elimination, such as using sticker emotes or roaming the bar freely.
Insights
Insights
“Add spectator view of hands as a toggle.”
“Add spectator view of hands as a toggle.”
“More camera views. In poker, you need an overhead view.”
“More camera views. In poker, you need an overhead view.”
Host Settings
Host Settings
Features
Features
“Players want to stay for the whole match and learn strategies.”
“Players want to stay for the whole match and learn strategies.”
Spectator Engagement
Spectator Engagement
“Playing with 3 friends, it’s annoying not to see what others have after dying.”
“Playing with 3 friends, it’s annoying not to see what others have after dying.”
Follow the Game without interfering
Follow the Game without interfering
Game Integrity
Game Integrity
Available in Private matches
Available in Private matches
“Implementing a separate dead chat would help prevent cheaters.”
“Implementing a separate dead chat would help prevent cheaters.”
“Optional rules for hosts would balance transparency and fairness.”
“Optional rules for hosts would balance transparency and fairness.”
Reflection
Reflection
What I Learned
What I Learned
Learned that Liar’s Bar faces cheating challenges that complicate spectator features, but this HUD offers strong value for trusted friend groups and could expand to public and ranked play once integrity improves.
Learned that Liar’s Bar faces cheating challenges that complicate spectator features, but this HUD offers strong value for trusted friend groups and could expand to public and ranked play once integrity improves.
• Develop HUD animations that react to in-game events (e.g., “Liar” calls, pistol clicks or bangs, Poison consumed).
• Implement a death chat for eliminated players to communicate without affecting active gameplay.
• Experiment with alternative camera angles, such as an overhead view, to explore how the HUD adapts to different perspectives.
• Develop HUD animations that react to in-game events (e.g., “Liar” calls, pistol clicks or bangs, Poison consumed).
• Implement a death chat for eliminated players to communicate without affecting active gameplay.
• Experiment with alternative camera angles, such as an overhead view, to explore how the HUD adapts to different perspectives.
Next Steps
Next Steps
Next Steps
• Develop HUD animations that react to in-game events (e.g., “Liar” calls, pistol clicks or bangs, Poison consumed).
• Implement a death chat for eliminated players to communicate without affecting active gameplay.
• Experiment with alternative camera angles, such as an overhead view, to explore how the HUD adapts to different perspectives.
Empathize
Ideate
Understand
Prototype
Empathize with players by understanding the pain points they experience in
the game.
Take those users' pain points and needs and clearly outline them.
Come up with solutions that meet the players needs and solve on going issues.
Create prototypes based on our design solutions, using wireframes, high-fidelity (hi-fi), and low-fidelity
(lo-fi) prototypes
Gather user feedback through testing and refine our design based on that feedback.
My Design Process
Define