Feature Design - Discord
As part of the Interface Design course at Simon Fraser University, the assignment entailed enhancing an established company's platform, including popular apps like Snapchat, Instagram, or Discord. The project involved the creation of comprehensive wireframes, digitally integrating the proposed features into the existing application, and culminated in a compelling and engaging presentation of the innovative modifications.
My Role
As the co-lead designer for the project, alongside my co-lead named Kelvin, I assumed various responsibilities, including the creation of low to high-fidelity mockups, active involvement in research, sketching, and designing phases, and also contributed to presenting our work to the team.
Problem
The challenge we faced was ensuring seamless accessibility to Discord during intense gameplay sessions and while gaming in full-screen mode, particularly in games like CSGO, where split-second distractions can lead to unfavorable outcomes. Our objective was to find a solution that allowed users to access Discord without the need to switch screens, thereby enhancing the overall gaming experience.
Accessibility
Addressing the seamless access to incoming calls and leaving calls without switching screens was a crucial aspect of our project. I aimed to minimize clicks while retaining the full features of Discord for users. Additionally, ensuring users received notifications when their friends came online and enabling them to call their friends without leaving the current screen or accessing group chat screens were important considerations for enhancing user experience.
User Interface
Incorporating the Discord HUD into gaming screens posed a challenge as it could potentially occupy valuable screen space. Therefore, finding an optimal size that maintains functionality without being intrusive was a critical aspect of our design. Equally important was determining the most suitable location for placing the Discord HUD to ensure it does not distract gamers during intense gameplay sessions.
Goal
Our main objective for this project was to seamlessly integrate Discord's calling features into the full screen experience by introducing overlay features. These overlays would enable users to perform various tasks, including answering or ending calls without disrupting their gaming sessions. Additionally, we aimed to provide real-time notifications when friends come online, allowing gamers to interact with them directly from within the game. The incorporation of overlays would also grant quick access to other essential Discord features, facilitating communication with gaming groups while in the midst of gameplay.
Early Ideation
The sketches on the left showcase the settings page, where users can modify various aspects of the overlay feature, such as its positioning and appearance. On the right, the sketches depict potential designs for the in-call overlay method, providing users with an intuitive and non-intrusive way to interact with Discord while immersed in gameplay.
In the image on the left, we present various designs for the overlay feature, showcasing options for muting and ending calls, as well as incoming call notifications. Each design is carefully crafted to ensure ease of use and minimal distraction during gameplay.
On the right, the image illustrates how the user can seamlessly interact with the group chat while gaming. The overlay allows users to view active members, identify those speaking in the chat, and conveniently engage with the group without disrupting their gaming experience.
Skills & Tools
Skills
Research
Sketching
Personas
Presenting
Graphic Design
Tools
Illustrator
Photoshop
Process
During our project, we observed that while Discord is user-friendly on its platform, making changes during gameplay posed challenges. To address this, we introduced a notification system that allowed players to see who came online while in-game. They could choose to ignore the notification or initiate a video/voice call with the individual without minimizing the game screen, eliminating concerns about potential gameplay interruptions.
We also implemented the ability to respond to calls in-game, following the same concept of avoiding screen switching. Additionally, the overlay displayed the game the user was currently playing, providing contextual information. To accommodate various game layouts, we allowed users to move the overlay around the screen and provided an option to disable notifications in the settings.
Final Designs
As part of the project, I designed and implemented the incoming call notification feature, integrating it into the game "God of War." Taking into account the game's layout, I ensured the notification could be placed at the top corners of the game screen for minimal disruption. Users could easily interact with the notification, with options to answer a voice call, video call, or decline the call directly from the overlay.
As an extension of our project, I designed and implemented the overlay for in-call features. When using this overlay in the game "League of Legends," users have easy access to mute themselves or end the call without the need to navigate away from the game screen. The seamless integration of these functionalities enhances the overall user experience during gameplay.
As part of our effort to improve user accessibility, we introduced a helpful shortcut for users engaged in group calls. By simply pressing SHIFT+B, the user can quickly view the participants in their current call, identify active speakers, and check the online status of other call members in different groups. This feature enhances the user's ability to manage and interact with their contacts efficiently, creating a more seamless communication experience within Discord.
In order to provide users with maximum flexibility, we integrated the notification overlay settings, allowing them to customize its positioning on the screen. Users can easily toggle the overlay on or off based on their preference and place it in various locations to suit their gaming needs. To access these settings, users can navigate to "Settings" and then select "Notifications," where they will find the options to control the notification overlay's behaviour and positioning.
Reflection
After completing the project, I gained valuable insights into the importance of carefully defining the scope of our ideas. While our primary goal was to enhance user accessibility, we inadvertently overemphasized the color scheme. The large overlays during gameplay turned out to be visually distracting and less pleasing for the users, particularly when notifications kept popping up on the screen.
Despite these challenges, our efforts were recognized, and we received a B+ for our work. Given more time, I would have focused on refining the overlay colors to make them more subtle and visually appealing. Interestingly, at the time of our project, Discord did not have an overlay feature for games. However, several months later, Discord implemented an overlay feature for games like League of Legends, utilizing a concept similar to what we had.