how
UX research
UX design
UI design
Usability testing
Graphic design
Naming
Applied netnography
when
2019 - Present
where
Specialization: UNICAMP & Master's Degree: UNICAMP
The work has been mentioned in a podcast and published in HCI International
bithoven
interaction design for deaf gamers
Games are one of the main forms of entertainment, but they often fail to provide good experiences for deaf players. The sound landscape is often the only source of feedback, which can be frustrating for those who are unable to hear.
This project presents the development of an interface aimed at making the gaming universe more accessible for deaf individuals.
research
understanding the Deaf Gamer
To comprehend the user's needs, this project is rooted in an understanding of Deaf culture and user pain points in order to create tools that help alleviate the key issues encountered. The created interface also focuses on centralizing relevant content for deaf gamers, fostering the growth of a strong community.
The gaming market, which is constantly expanding, holds significant importance for deaf individuals, despite the numerous challenges faced, especially in online games.
Translator and interpreter Paloma Bueno was hired and carried out an incredible job. In total, 21 videos were recorded, with 19 of them addressing the survey questions, 1 for the questionnaire introduction, and another one utilized on social media to invite participants to the research.
The research played a crucial role in defining the project's objectives and shaping its new direction. It transformed from being merely a radar into a full-fledged platform.
ux design
fluxogram
To ensure good usability, a flowchart was created to outline the possible user steps, from installation to platform usage. This step was crucial in determining the key screens and ensuring coherence in navigation, although some adjustments were made during the layout construction to enhance the final outcome.
.jpg)
identity
naming
The name holds significant importance for a project as it can create a connection or not with people. Alina Wheeler (2012) emphasizes the need for a good name:
"The right name is timeless, doesn't tire, is easy to remember; it represents something and facilitates brand extensions." (WHEELER, 2012).
The new name was created through a mind map, which led to testing by combining words. For this purpose, several word maps were created to explore combinations that could work together. By branching out from the word "sound," the word "music" emerged, recalling one of the most well-known names in the music world: Ludwig van Beethoven, who, despite not being born deaf, gradually lost his hearing over time.
With this name in hand, a phonetic and written similarity was identified between "BIT" and the beginning of "Beethoven," resulting in the name "Bithoven".
identity
visual Identity
The visual identity of Bithoven needs to establish a connection between the gaming world and Deaf culture. It is through this visual identity that deaf players will identify themselves and feel included in the community. Therefore, it was necessary to plan a visual system that is compatible within a digital environment, where it will be predominantly used.
After the initial concept, a collection of supporting images was gathered for the creation of the symbol. These images included "BIT," the letter "B" in Brazilian sign language (Libras), and a sound representation that is easily recognizable.
The supporting images served as the foundation for creating the construction grid of the symbol. This grid aimed to create equal spaces, enabling the construction of a visual element that evokes an 8-bit image.
The construction of the visual signature was also based on the initial grid, ensuring a harmonious relationship between the symbol and the logo's spacing.
ui design
defining the visual system
typography
To compose the identity system, the Pill Gothic typeface family, created by designer Christian Robertson and distributed by Foundry Betatype, was chosen.
This typeface family was selected due to its ability to create titles and paragraphs using a font with strong visual characteristics without distracting the reader.
colors
The color palette was developed with a Dark UI interface in mind. This type of interface is commonly used in programs related to the gaming world.
visual elements and icons
The interface elements were developed to align with Dark UI standards. The icons and buttons were designed to work effectively in all interaction states.
cursor
A custom cursor was created specifically for when the program is active.
In addition to the aesthetic factor, which better aligns with the visual identity than the default cursor, it was designed to enhance navigation for certain users. The cursor has a denser mass than standard cursors, allowing icons to be placed within it.
digital translation for accessibility in Brazilian sign language (Libras)
The platform needs to be user-friendly for both deaf individuals who are orally proficient and prefer the Portuguese language, as well as those who are more comfortable with Libras. Therefore, a Libras translator will accompany and translate textual elements whenever the user desires.
Hand Talk was chosen to fulfill this function. Hugo, the charismatic virtual translator, would be present throughout the user's experience. While technical feasibility was not extensively explored, it was considered to a reasonable extent.
ui design
main screens
home screen
The main screen of the program will display the user's recently played games, allowing them to access the game's internal screen or quickly access the radar.
display mode
Through the "display mode" functionality, the user can choose the best listing format that suits their navigation style. The examples below show a list-based navigation and a navigation style that displays the internal content of the page.
preferences and accessibility
The user will have access to a preferences window where they can customize settings according to their preferences. For example, they can adjust text size and choose a different color scheme from the platform's default, thereby enhancing accessibility for all users.
translator
The user can also customize the translation to Libras (Brazilian Sign Language). They can choose the position of the character (with three options), disable translation (suitable for orally proficient deaf individuals who prefer reading text), and enable translation only when there is interaction with the cursor and a shortcut key.
interaction between users
Users will also be able to interact on the community page by replying to articles or other comments. To facilitate communication for users who want to use Libras, a "reply with video" button has been added, which is a functionality commonly found in deaf-friendly social media platforms.
mods
Modifications in games are quite common within the community. Even games from well-known studios sometimes lack accessibility features, including proper subtitles.
The Mods page will always feature a highlighted application, showcasing an option to download the mod if the user hasn't installed it yet, along with user reviews. Below, there will be a filter and a functionality to submit a mod.
internal page
The first internal page of a game will display the user's favorite radar, along with the option to create a new one. It will also show the mods the user has installed for that game and a community evaluation of the game, taking into consideration accessibility factors.
interaction design &
sound design
the radar
A significant portion of the sounds created by game designers are intended to provide feedback to the player. Many of these sounds are not visually represented in the game interface.
There are several elements that make up the sound landscape in a game. Huiberts (2010) formulated the IEZA model (acronym for Interface, Effect, Zone, and Affect). This model provides theoretical tools for sound design development.
Interface: Sounds outside of the fiction that communicate game activities.
Effect: Sounds within the fiction that communicate game activities.
Zone: Ambient sounds within the fictional world.
Affect: Sounds that emotionally characterize an environment, not belonging to the fictional world.
radar patterns
The user will have access to four standard sound representation models. Each model can be edited to best suit the chosen game. The "animate radar" option will work with the synesthetic aspect of sound and explore other forms of visualization, utilizing parts of the radar itself to convey the sense of intensity, duration, and distance.
customization
When activating the grid perspective that assists in radar composition, it will change to facilitate visualization in the desired format.
radar in action
Each radar can perform different functionalities depending on how it is personalized. Below is an example of a horizontal radar, which works best in 2D platform-style games.
finalizando
Personally, this work has allowed me to become acquainted with a culture that was once distant to me, and I take responsibility for that.
This situation has led me to reflect on how many times I have been negligent towards a particular group of people during the interface design process.
However, being an antithesis, it has also enabled me to discover ways in which design can solve challenges created by mediums that do not provide accessible means of use. It has been a process of project evolution accompanied by personal growth. Lastly, one of the greatest pleasures I experienced throughout the project was reading the final response from a deaf gamer in the qualitative interview:
“I sincerely thank you for trying to improve the lives of the deaf”
Isn't Bithoven cool? How about checking out how I created an interactive kiosk or a 360 assessment tool?