Discord Studio is an add-on designed to enhance the human-computer interaction (HCI) of the popular social platform, Discord. Aimed at improving the user experience, this intervention focuses on creating more immersive and collaborative spaces that go beyond the traditional features of calling, messaging, and screen sharing. By addressing Discord's limitations in telepresence and interaction diversity, Discord Studio introduces an interactive environment that allows users to communicate more effectively through customizable avatars, enhanced visual cues, and more dynamic means of information sharing. I led the art direction and created interactions that bridge the gap between text-based communication and lifelike engagement, enhancing collaboration and personalization.
HCI Research / UI / UX / Artist
Kayla Chen: HCI Research / UI / Artist
Neal Sison: HCI Researcher / HCI
Kirsten Wong: UX / Data Analyst
Figma
Discord
2 months
I designed customizable rooms and characters inspired by real-life spaces, allowing users to drag and drop furniture and widgets. Using Photoshop and Figma, I created room layouts for call channels with text channels on the side. Users can name, hide, caption, and rearrange rooms, and toggle lock or quiet mode for work/study environments. A knocking sound alerts users when someone joins. Locked rooms are for private meetings, while quiet mode warns users to keep noise down when joining a call. Both features are toggle-able from the dropdown menu.
Users can create and customize unique avatars, that will display the user's name, status (e.g., online, idle), and visual cues like sound icons and mouth animations when speaking.
User's sprite highlighted in yellow when away, and a green highlight when speaking.
Discord allows various functions such as built-in screen sharing or allowing users to create bots for more niche purposes like music sharing or playing games. Within our proposed interface, I adapt some of these features through interactive widgets that users will be able to click to interact with. Widgets are sprite assets that can be placed, customized, and interacted with by the user sprite. The widgets will be designed to mimic a real-life object that relates to the feature. For example, a computer-like widget would allow users to share their screens with other people in the room.
In developing interactive widgets for our Discord extension, I applied Mary Hegarty's principles on visual-spatial displays. By designing highlighted sprites and interactive objects that "pop out," users can easily distinguish and engage with unique elements, enhancing usability. Additionally, I utilized Gestalt principles, such as proximity and common fate, to create intuitive visual cues that guide user interactions. This approach ensures that our digital add-on integrates seamlessly with Discord, providing an intuitive and engaging user experience.
We plan to introduce personalized spaces, like private cubicles, where users can decorate with stickers and figurines. Additionally, we are exploring how server room changes should be updated—whether they appear live or require user confirmation.
This experience taught me the importance of Human-Computer Interaction (HCI) in designing intuitive products that balance usability and simplicity. HCI focuses on creating user-friendly interfaces that enhance interactions between users and digital systems, ensuring accessibility and efficiency. When developing a digital add-on for platforms like Discord, applying HCI principles is crucial to seamlessly integrating new features without disrupting the existing user experience.
Finally, communication and collaboration with my team, professor, and peers were essential in keeping the project on track. Regular meetings helped us meet weekly deadlines, stay aligned with user needs, and ensure technical feasibility.