A product to deliver subtitles based on keyword triggers. You'll never die from not paying attention to callouts ever again!
DEFINING THE PROBLEM
How long you approximately have to react to a callout. (Simulated)
When starting this project, I hypothesized the problem was cognitive overload from paying attention to too many elements.
THE PROBLEM
Defining project constraints
Discord is by far the most used communications platform for gamers. With current market trends, I believe it would be easier to use Discord over developing another application.
RESEARCH + DATA SYNTHESIS
What causes people to lose track of vocal communications?
I interviewed six users to investigate the problem. I validated the primary issue is cognitive overload; the cause stems from players losing track of communications from the high amount of signifiers.
Introduction to signifiers
Users prioritize visual signifiers over audio
To prevent cognitive overload, the average interviewee prioritizes five signifiers to shift between. When users shift their focus to signifiers outside their priority, there's a longer delay. This becomes troublesome because users only prioritize one audio source.
It takes longer to reprioritize and focus on audio signifiers
When information isn't visual, there's a longer delay. Audio cannot guide a user's attention to a specific output to quickly focus on. The user then has to process the auditory information they captured.
Initial product idea
Research revealed that reprioritizing and focusing on visual signifiers is faster. Pings can provide a sense of urgency to reprioritize and refocus their attention to auditory information.
My initial idea was to ping the user with a visual signifier when keywords are spoken by other users.
HYPOTHESIS AND REASONING
It's easier to reprioritize and focus on an audio source by providing a visual ping.
INTERACTION DESIGN IDEATION
What if we ping users when their name is called?
Using my initial product idea, I explored into the idea of using a visual ping when a keyword is called.
Initial explorations involved using the Discord Overlay to deliver pings.
To avoid taking up too much space, I can add the element within this vicinity.
Mapping the experience
An immediate issue I found during ideation - players are called many names: real name, Discord name, nickname, or collective nouns. Knowing this, I mapped how the experience works to detect any possible problems throughout the process.
Triggering the feature
The first design was focused on speed and assuming users rarely adding names. Later, I chose tags to prioritize scannability for errors or forgotten triggers.
Discord Pings
When keywords are spoken, a megaphone appears beside their name to indicate they were called.
I chose a megaphone to convey the idea of sound directed to a user.
Visibility of the Feature
I settled on a megaphone icon with a black stroke and white fill to ensure visibility of pings.
The megaphone is visible during pure black or white backgrounds.
USER TESTING
Oops, I made the experience worse
I performed a test to simulate the concept. Using a screen sharing application, I switched between inactive and active state of the pings while giving out random callouts during a game.
Recreation of the testing to protect identities.
There's a delay in processing the information after the ping
We discovered visual pings demand too much attention - leading to them losing focus of callouts. Users felt a disconnect from the ping and communications due to the weight of visual pings.
Results of Test
After viewing the ping, there was a significant delay in turning focus to vocal callouts. This resulted in users losing out on crucial context.
Testers KNEW there's an enemy but, lose out on context.
Repivoting design direction
I refocused my efforts on delivering voice communications into a visual signifier. Although this solution failed — I carried over learned concepts such as the idea of keywords to trigger a feature.
REFINED PROBLEM ⭐
How can we deliver audio callouts to players in a visual format without a delay in refocusing?
INTERACTION DESIGN IDEATION - AGAIN
What if we make subtitles THE ping?
I looked into subtitles to act as a visual signifier and information delivery. During my previous— whiteboarding, I avoided adding a new UI element to prevent clutter. I chose to reexplore this idea because users are already familiar with subtitles.
Knowing filtering audio signifiers is harder than visuals; subtitles can turn communications into visual signifiers.
Placement based on Human Factors
I chose the center lower thirds to avoid eyestrain and utilize the ample space. Elements underneath subtitles tend to be low priority. A higher placement causes eyestrain and missed information.
NOTE: Outside of games, eyes tend level with the top of our monitor. When playing games, it is the opposite.
Information layout
If a callout involves a threat within a user's immediate vicinity, the info needs to be processed quickly. Initially, I wanted the subtitle layout to show the origin and trigger word. The final iteration allows for quicker reading, processing, and reactions.
I focused on layout first, then typography.
Reiterating typography for readability
My next step involved optimizing the subtitle's readability and visibility. Similar to the old concept, I ensured the subtitles were visible during heavily saturated and desaturated backgrounds.
NOTE: Discord's current font "GG Sans" is closed source. I used their old font to illustrate how I would approach the problem.
Visibility and readability across different games and scenes
FINAL SOLUTION
Introducing: Discord Pingformation
Never miss key information from callouts ever again. Keep your focus on the game and let Discord help with vocal comms.
Keyword setup
Select your personalized keywords to trigger subtitles so you know they're for you!
How it works
Subtitles are triggered when a teammate speaks a trigger word. Their sentence and your keyword will be displayed on your screen to inform you of incoming information.
Subtitles are created with the Discord Overlay function.
CONCLUSION
Thank you for reading! I'm happy with this project because a lot of human factors and interaction design was needed. It helped me develop my skills as a UX Designer!
Failure leads to better solutions
When my initial solution failed in user testing - I took it as an opportunity reiterate FROM the problems I found.
Human Factors is very important
Consideration based on a users' environment and role proved to be crucial in building
a better product.
Applying typography is life changing
Combining typography and human factors proved to be an immense help in creating
the design of the subtitles.
VIEW THE NEXT PROJECT