Discord
Screen Share Feature for Mobile
How can we translate the desktop screen share feature seamlessly into the mobile version?
Introduction
Background
Discord is a text, voice, and video platform originally designed for gamers to interact with each other online. Since rebranding themselves to expand outside of the gaming community, Discord has transformed into an online space for communication of all purposes, where users can hang out in a private group of close-knit friends or meet strangers with similar interests from across the globe.
Personal Capstone Project
Tasks: User Research & Testing, Prototyping
Timeline: 2 Weeks
Tools: Figma, Procreate
Project Goal
Pinpoint a common issue that Discord users have encountered, and design a feature addressing it that embeds seamlessly into the existing platform.
Research & Synthesis
Market & Competitive Analysis
I first conducted some general research to understand the market and how Discord differed from competitors. Some highlights:
-
The continued growth of smartphone usage is fueling the growth of the mobile VoIP (voice over internet protocol)
-
MS Teams and Slack let people annotate each other’s screens
-
Skype offers a built-in audio and video call recording feature, which Discord lacks
1-on-1 Interviews
I interviewed 3 different participants in their 20s (a large part of Discord's demographic) to understand why and how they use Discord to interact with others online, as well as to uncover any frustrations and pain points they have while using it.
Findings:
-
Accessing the large amount of content on servers/channels from mobile can feel overwhelming and cluttered
-
A common frustration was having to purchase a 3rd party app to screen share from tablet or mobile
-
Most users have had issues with their mic not going through or cutting off at random points
A Second Round
Since a lot of frustrations seemed to stem from using Discord's tablet or mobile version, I conducted a second round of interviews with the same participants, this time focused solely on screen sharing -- a feature that Discord only supported on desktop (as of the time this project was being developed).
Findings:
-
Gaming and art interests greatly overlap, with many participants engaging in both communities on Discord
-
Most of these participants want Windows computers for gaming, yet prefer iPads for drawing
-
This creates a frustrating experience trying to mirror an iPad screen to one’s computer, as Apple only supports direct mirroring to other Apple products
-
-
Desire for mobile screen sharing has increased partly due to the rise in popularity of the game Among Us, which is free to play on mobile but costs money to purchase for the computer
-
The most popular 3rd party app for mirroring one’s screen was AirServer, which is $20
-
But participants like using Discord because the overwhelming majority of its functions are free
-
Persona
I created a persona that reflected the interviewees’ overall reasons and habits with using Discord, with a focus on their pain points with screen sharing on different devices.
Define
Task Flow & Wireframe Sketches
I clicked through the screen sharing function on the Discord desktop app, and wrote down the task flow for it as I went. I also tapped through the navigation for joining the voice chat on mobile, and noted down the UI elements and interactions that were used.
Taking both of these into account, I created wireframe sketches for each of the steps in the task flow, making adjustments to the flow/interaction as necessary to accommodate the smaller screen size. I used red mostly to differentiate parts that were significantly different from the existing Discord interface.
For step 1, I tried out 2 different options for the placement of the screen sharing icon. I went with the 1st, since 6 items in the bottom navigation felt too cluttered.
The circular icon overlaid on the interface is a feature already available for Android users; however, its functions do not yet include screen sharing.
Design
High Fidelity Wireframes
Having planned out the interface structure and flow in the sketches, I jumped right into high fidelity for the wireframes. I couldn’t find assets for Discord UI elements online, so I made do with color picking, copying icons, and using parts of screenshots where it would be too time consuming or complicated to copy an element.
Creating the App Search
When designing the layout for a user to search for a specific app to screen share, I took inspiration from the iPhone's search function, as I felt it would be a structure many users would already be familiar with. Including suggested apps would also allow users to quickly select an app they used recently or screen share with often.
Search Function on iPhone
Mockup for App Search on Discord
Iteration
Testing
I conducted a study with 3 participants, all female and in their 20’s. I chose a first-time user, an infrequent user, and a frequent user to assess how people with varying degrees of familiarity with Discord would be able to navigate the interface. Participants were given a series of tasks to complete with the prototype, and then answered a few questions on any pain points they encountered.
Summary of Findings:
-
Overlay icon was intuitive for all participants
-
Other than minor mistakes with the prototype, participants navigated the interface with relative ease
All participants were able to complete the screen sharing tasks easily, so I wrapped it all up after a few small revisions!
Reflection
Define the Scope
I originally set out with the vague idea of designing any feature that would be helpful to Discord users. But after conducting interviews, I found that information gleaned from interviewees was quite general and lacked insight into specific pain points they were experiencing. It wasn't until I began asking questions targeted at certain aspects or features, that frustrations with the lack of mobile screen sharing came to light.
Back to Top
Next Project
