Discord

1 - Determine if there are any confusing areas, sections, or pages.
2 - Observe how users circumnavigate throughout the discord server & channels.
3 - Understand how users go through finding & starting up an watch party.
4 - Conduct competitor analysis of features, as well as user interviews.
‍
I began my initial research by trying to understand my objectives. I then conducted some general research on both discord features & online streaming service watch parties. Next, conduct user interviews with users and compile all of their research results.

Next, I explored Discords potential watch-party competitors by conducting a competitive analysis of all those found. This helped me gain a view of other watch-party providers, how they display & present their information. All this being in relation to Discords already established infrastructure & layouts displayed.

I built out a task flow to help show how potential users would move through Discord to start a group watch party. In turn this allowed me to further see all the possible steps & decisions an user could or would take along the way. It was key to follow along with Discord's established navigation style.

I began the process with sketching out some screens for entry into an established Discord server as well as starting a group watch party with others already inside said channel. Then, I aimed to stay within Discords already established brand style, appearance, layout & even collapsible sidebar sectioning.

I then created my mid-fidelity wireframes based on elements taken from the home page sketches. I also chose to design wireframes that would assist in completion of the following tasks:

- Finding and joining a discord server/group.
- Starting a watch party on the voice channel.

. . .

Constructing a familiar layout to Discords already established infrastructure would aid in the ease of access needed. This being not merely for already established users alone, but new potential users as well.

With the above in mind, I began by adding to the main dashboard’s already established layout, but with my own twist on an CTA button with a visual screen behind it. Joining an activity already underway is as easy as simply clicking its location, within the left sidebar, on the home or landing page.

Having a multitude of ways for entry for any given task is key when considering new users, who have little to knowledge of using Discord prior. Again, this is key to the fact that the application can be a bit overwhelming to new, unfamiliar users.

When in the chat room, one can view other members also actively online. This presents the opportunity of asking others online if they would like to partake in a group activity all together.

Branding
Iconography
UI Designs

In lieu of adding a new feature to an already existing application & brand, branding was not needed for this case study. So in place of this step I viewed Discord style guide & got to work re-create/edit it a bit, but all within its many established boundaries.

All the screens below have been built up from my previous low-fi ones from above, I simply added Discord 's brand colors, typography, graphics & iconography I re-created into vector shapes, all from scratch.

Discords already established infrastructure often requires operation of smallish clickable buttons to advance users throughout the application and all its many features.

Simplified interface requiring only two prompts needed to advance past the pop-up window prompt to start the final entertainment count-down. This aided in a more streamlined interface that guides users through its first time use quite easily.

Interactive Prototype
Usability Testing
Iterations

I created a high-fidelity, & interactive prototype in Figma to conduct usability testing, in person as well as through screen sharing. Four participants from various backgrounds, profiles & ages were chosen for the test. I presented each with two tasks to complete, then observed progression.

INSTRUCTIONS: "Welcome to the Discord's dashboard, please join 'Generic Evil Island' & its game coms."

NOTES: Every user completed this task with ease & in a relative speedy amount of time. Many noted that all the screens appeared to be in line with current Discord application.

INSTRUCTIONS: "Pretend you are going to start a HBO Max watch party with others inside the group server."

NOTES: Task was also easy completed without any hesitation from participants. Everyone positively commented on over all experience being in line with current Discord standards.

I made a list of iterations based on feedback from my testing. This made me reflect upon the importance of testing as a part of the overall design process, as well as how the process is interactive.

With so many areas of information, navigation, clickable buttons and more, oftentimes unfamiliar users find themselves at a loss of how to proceed when lost or confused.

A collapsible control panel adds customization with controls, as well as the information revealed throughout various hover states. All of this adds ease of access for potential users, new and old alike, regardless of their prior depth of knowledge. Eitherway all the above helps unfamiliar individuals find their way through the needed screens to start a watch party.