Mobile. Social Media. Design Process.
Discord Reminders
Year
2022 (3 Months)
Role
Product Designer
Team
Solo
Table of Contents
Overview
This is a concept project made independently of the company.
Discord is a messaging and social media application with over 300 million registered users and over 150 million of those same users being monthly active users. There's a lot of information a user can miss out on.
Discord is a messaging and social media application with over 300 million registered users and over 150 million of those same users being monthly active users. There's a lot of information a user can miss out on.
Problem Statement
How might we allow a user to keep track of and remind them of important information coming from the channels?
Solution Preview
Prototype
Not interested in the full case study and want to go through the flows yourself? Not a problem! Here's a prototype you can go through, just for you.
Design Process
After figuring out user pain points and preliminary research on competitors, I can go straight into wireframes and high fidelity designs as I have Discord’s design system. It reduces the time spent designing and there's no need to 'reinvent the wheel.'
Understanding the Users
I conducted brief 5-10 minute interviews with 5 Discord users who expressed mild to major frustration with missing messages in Discord. 5 users are enough to cover a fair number of potential issues and describe the target user.
User were aged 18-65, are daily users of Discord, and are at least part of 10 or more Discord servers on their accounts. Each user was asked questions like the following:
User were aged 18-65, are daily users of Discord, and are at least part of 10 or more Discord servers on their accounts. Each user was asked questions like the following:
- "How do you search for information on Discord?"
- "Where do you find notifications from Discord?"
- "If you had to find an answer to a question you're curious about on Discord, what steps would you take?"
- "How do you like being notified about important events?"
How do users currently remember channel information?
What are the user's existing pain points?
- Not wanting to constantly check their phones
- Remembering if they need to do something
- Information can be easily lost within channels
- Users are limited in customizing notifications they want from the app
Research & Ideation
Where to prioritize features and focus?
From user research, I can conclude there's a need and the minimum features required:
- Selecting a message to set a reminder on
- Creating a custom reminder a user can search and recall context on
What do the competitors do?
Slack, Reminder Bot, and RemindMe are competitors with reminder features built in and cited often as "ideal" solutions by users.
Slack has a text approach and a selection approach for reminders.
Reminder Bot has a wide variety of features, but has reminders through text commands.
Remindme can targetroles and names within the discord channel reminders are set.
Simply holding on mobile or right clicking on desktop anywhere in the message area will open a submenu prompt and is built into Discord already.
From the users and competitors comes the design goal
How might we allow a user to keep track of and remind them of important information coming from the channels?
Constrained to Discord's design system and improving on competitors are the biggest challenges
I cannot deviate heavily from Discord’s current design system and constraints. The features requires full adoption with as little change as possible to be.
Here are the steps for a built-in solution against competitors:
Here are the steps for a built-in solution against competitors:
- Adopt Discord design system to limit detracting from the current user experience
- Adapt competitor text command solutions and expand on message select solutions
- Design a reminder which can be set quickly and correctly
My solution expands on current solutions
Preserving familiarity with how current programs and solutions deliver reminders is integral to success. Users demonstrate two ways to accomplish creating reminders and real, feasible solutions show it possible to design it.
Wireframing through component design
Because I'm adopting a design system, I can go straight into mid fidelity for all iterations. I have to, however, recreate all Discord design system components from scratch because they are not publicly available for download. Once done, the time to make screens is drastically reduced.
...Which scales into multiple screens in short time
Moving into High Fidelity
Adopting the design system to my needs
The following style guide is an adoption of the current Discord Branding Guidelines for designing this case study's outputs. I made this because I needed a way to adjust component colors in Figma quickly rather than piece by piece.
User Testing Guidelines
Which users do I need and what assumptions do I have
My prototypes rely on a user’s competence with Discord and assumes the new features won’t detract from the current user experience.
Each iteration test involves 5 different users and does not use the same user twice to reduce bias. The user criteria and background for testing is the same as the user and problem discovery phase. Testing is done through an unmoderated, high fidelity prototyping test including the following tasks:
Each iteration test involves 5 different users and does not use the same user twice to reduce bias. The user criteria and background for testing is the same as the user and problem discovery phase. Testing is done through an unmoderated, high fidelity prototyping test including the following tasks:
- Users are sent a Figma prototype to test with a series of tasks to complete.
- Users confirm at each stage if they completed the tasks successfully.
- Each user is asked to submit any pain points/improvements related to the feature.
Iterations & findings
I’m focusing three criteria to determine each iteration's effectiveness. Time on task confirms solution efficiency while task completion and user satisfaction confirm solution effectiveness objectively and subjectively.
Iteration Testing by Hill-Climbing Algorithm
A different type of approach to design iterations
Design iterations are based on an artificial intelligence (AI) algorithm approach used for mathematical optimization and heuristic searches.
- Each iteration on its own is a valid solution based on criteria the researcher sets.
- Can be done in a reasonable time.
- Finds small, incremental improvements each iteration to get an optimal solution.
The algorithm keeps focus on my model and reduces scope creep. Feedback determines whether or not to iterate and what to change in the next iteration.
A data sheet was all I need for analysis
Results were collected and compiled through a Google Forms questionnaire which generated a Google Sheet I can pull quotes, feedback, and analytics from. Due to the scale of testing, there was no need for more advanced data collection.
The MVP contains the 2 features I needed
The first iteration and prototype lets users set reminders in two distinct ways:
- Feature 1: Set an independent reminder using the message box.
- Feature 2: Select a message in a channel to set a reminder on.
New menu option
The second iteration adds a new menu option users may access to view all reminders they have active in Discord. From this new menu, a user can go to the relevant area the reminder is set at or even delete the reminder if they don't need it anymore.
Adjusting the Notification Center
Notifications on reminders become independent of all Discord servers, can be accessed in one place through the DM history, and removes a significant server dependency.
Reminders become noise when abused too much. My solution mitigates this by making notifications on reminders only on user-made reminders.
Reminders become noise when abused too much. My solution mitigates this by making notifications on reminders only on user-made reminders.
Final Designs
After multiple iterations of testing, I compiled all feedback, made the changes based on that feedback, and redeveloped the prototype to represent the final product and go through both user flows in their entirety.
Method 1: Customize your reminder text
If a user wants to set up a custom message now, such as instructions, they can do so in advance.
Method 2: Set a general reminder for later
Sometimes a user may only want a timed reminder or look at something again later. The process is shortened significantly to accommodate that need.
Product Summary
Prototype
This design was built in Figma and there is a functional prototype of the intended feature and how it works implemented and available for use.
Outcomes & Lessons Learned
Sufficient Solution
A reminder function, while an effective solution, may not be the "optimal" solution. It does solve the user problem, however, and is a valid solution.
Overreliance
Users relying on reminders poses an issue on focus vs availability. Setting a reminder weighs the benefits of offloading cognitive load against distractions and annoyances.
Edge Cases To Consider
- If there's a large amount of reminders stored, a search, sort, and/or filter function may be needed
- If multiple reminders go off throughout a day, an option to mute/silence reminders may be the solution
- A user may want a reminder to target another user in the future, which may mean editing the custom text command to accommodate that.