Mobile. Social Media. Design Process.
Discord Reminders
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 messages and information to go through with a massive community like this.
I wanted to create a new feature for Discord as it is one of my most used applications today, which I've used since its alpha in 2015, and one of the leading social media applications in the world.
Billions of users go through social media platforms once a day, if not multiple days, to see what is happening in their communities and across the world. It’s a lot of information to take in at once and there are concerns about over-exposure to digital media on mental and emotional well-being. Overall, what users want is pertinent information.
The problem: How can I avoid missing critical information?
Notifications, emails, alerts, and similar methods of bringing up potentially missed information are all current solutions. The user, however, may not have control over how often and when these notifications show up–and eventually too many unprompted notifications become noise and go ignored. If I were to design a notification a user specifically wanted, then that leaves one good path to start working on.
The solution: Create a way to set reminders on messages.
Though this feature is not a live product, I got results from the final iteration I can share here.
The objective is to figure out pain points of users before delving heavily into potential solutions for the users.
Once the research is done, I can go straight into wireframes and high fidelity designs as I have Discord’s media kit and design system. Because I have an existing design system to follow, it reduces the time spent immensely and there's no need to create a new design system or 'reinvent the wheel.'
I conducted brief 5-10 minute interviews with 5 Discord users, focused mainly on who expressed mild to major frustration with being unable to keep up with messages and threads in Discord.
Short interviews at the start allow us a first impression look at our users, help set up personas and user flows, and can be done rapidly across a wide userbase.
From the user tests, there were plenty of issues present and given from users, such as lowering mental space to not have to constantly check their phones and Discord as well as figuring out a way to remember past information.
Personas were opted over for only user stories because I'm setting up a generalization of the users. Discord has a massive amount of information on their users currently, so personas used in this scenario are an alignment tool for my design needs.
Considering the user feedback about missing information and knowing when to act, I settled on the following solution: Create a built-in reminder function for Discord.
From our validation and initial interviews with users, even though bots are already doing reminders on Discord for users, there is a desire for a built-in feature rather than using bots and other external tools a user goes through multiple steps to setup and implement.
The current solutions are limited to only the server they are authorized and set up on. There is no cross-server solution currently available at the writing of this case study.
To accommodate Jakob’s law, preserving familiarity with how current programs and solutions deliver reminders is key to the solution. Users have two primary tasks and ways to accomplish creating reminders to consider.
Discord's primary competitor is Slack, but additional direct competitors are bots and programs integrated with Discord already with reminder functions, such as Apollo and Remindme.
How I design the reminder feature should, at a minimum, meet or exceed similar impacts compared to these competitors. Additionally, I also identify the strengths and weaknesses relative to Discord so I can better refine my feature I'm designing and use the competition as a springboard for my own designs.
Slack also has an option to select a message in a current thread or channel which opens a prompt to then set a reminder on. This idea may be transferable to Discord as well.
Slack has a help center link (Slack Reminders) detailing their reminder process in detail and below is an example from the Slack website on how their reminder function is implemented.
Using built-in functions means adhering to the current syntax and rules Discord implemented for them, such as the examples below.
The following screens in this section are not ones I recreated, but borrowed from Discord's application to showcase here.
Every time text is used to enter a command, a forward slash precedes the command first, then provides categories for you to fill in related to that command. Selecting a message by holding it on mobile or right clicking on desktop or browser to set a potential reminder opens a menu prompt you need to follow, like the one below. No solution may deviate heavily from Discord’s current design system.
Designing a new feature for Discord, or anything with an existing design system, has its benefits. I can adopt all system rules and push out wireframes and designs quickly.
That bypass is why I opted out of low fidelity and went straight into mid fidelity for all iterations. I can edit the components and information needed once the necessary recreation is complete.
To easily convert from mid fidelity into high fidelity, I created multiple components and recreated a style guide from Discord’s media guidelines. Any changes I make through iterations can be solved in minutes rather than hours doing this method.
The following is an adaptation of the current Discord Branding Guidelines mentioned on their website and press kit used for designing this case study's outputs.
I had to made something like this myself because I needed a way to adjust component colors and typography within the design program quickly rather than manually adjust piece by piece.
There is a vast array of components to recreate ranging from chat boxes to status windows and side bars. Here is an example of starting with components to make the final product.
With the reminder feature, I’m focusing on improving and capitalizing on three criteria to determine my product effectiveness.
For every iteration, testing is done with 4-6 people in an unmoderated, guerilla setting, through a high fidelity Figma prototype.
The tests involved users creating reminders and accessing reminders, as well as how they felt throughout the prototype and any pain points/improvements to see and/or remedy.
My product prototype heavily relies on a user’s competence with Discord during these tests and also assumes the new features are seamlessly added into Discord’s current framework and won’t detract from their experience.
With the user tests defined across iterations, now I can simulate as many times as desired with the defined testing model.
Iteration-by-iteration testing lets me examine the results at each instance and decide whether or not more redesigning is needed or if the solution is sufficient.
Rather than a typical design-centric approach, I based my design iterations around an artificial intelligence (AI) algorithm approach.
This algorithm is known as the "Hill Climbing Algorithm" is considered in the class of mathematical optimization and designed for heuristic searches, and has precedence in marketing, logistics, as well as the common traveling salesman problem.
There are several great things about following this particular algorithm as a basis for design, even if not originally meant for it.
The first iteration and prototype lets users set reminders in two distinct ways:
When a reminder was set, users receive a notification in the channel they set the reminder in. The text displayed is based on if a user selected a message to set a reminder on or made their own reminder.
/remind and /remindme are intended to be interchangeable commands if the feature gets launched.
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.
The final design iteration improves on the second iteration by redirecting notifications. Clyde now directly messages you about your reminder text, the time you set the reminder, and a cached message link you may click to find the context of the reminder provided you still have access to where it was set.
Through this change, notifications on your reminders become independent of all Discord servers, can be accessed in one place through your DM history, and removes a significant server dependency.
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.
The first picture is how many screens are involved across the entire process while the second picture is a summary screen highlighting key features and offerings of the reminder system.
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.
There are plenty of changes to apply in future versions. You can allocate reminders to specific dates on calendars rather than specifying a later time for a reminder, is one feature mentioned in feedback and comes to mind.
The following are the primary lessons learned from designing these features.
