INTERACTIVE NOTE SHARING💬
INTERACTIVE NOTE SHARING💬
Embedded Files
Discord is a communication platform widely used for gaming, social communities, and collaboration. It enables users to connect via text, voice, and video, fostering dynamic interactions in shared spaces.
Team
Solo
My Role
Product Designer
Tools
Figma/Figjam, Google Forms
Timeline
December 2024 - January 2025
PROJECT OVERVIEW
PROJECT OVERVIEW
Challenge: While Discord offers a status feature, it lacks a system for sharing personal notes with others. This limits opportunities for users to write thoughts, share ideas, or initiate discussions, which could enhance collaboration and engagement within communities.
Task: To design and implement a note-sharing system on Discord that allows users to write, share, and reply to notes. This feature will focus on seamless interaction, fostering more meaningful conversations and providing a space for idea-sharing across communities.
EMPATHIZE🫂
EMPATHIZE🫂
Who is the user? What do they need? What do they want?
Who is the user? What do they need? What do they want?
COMPETITIVE ANALYSIS
COMPETITIVE ANALYSIS
After analyzing competitors’ note-sharing features, I found that simplicity, ease of use, and real-time communication enhance user experience.
USER RESEARCH PLANS + INTERVIEWS
USER RESEARCH PLANS + INTERVIEWS
In my research plan, my main research questions are:
How do users currently utilize text channels or direct messages for sharing personal notes or updates?
What challenges do they face with these methods?
What types of collaborative note-taking and interaction features (e.g., comments, replies, tagging) do users find most helpful?
I conducted interviews with five participants who all use Discord daily to gather insights into their daily interactions, communication habits, and overall experiences using Discord.
KEY INSIGHTS
KEY INSIGHTS
Participants emphasized the need for a quick and easy process when creating and sharing notes.
They highlighted the importance of being able to reply to and comment on notes. They shared that having this feature would encourage more interaction with other users.
They also expressed a desire for real-time notifications when others interact with their notes, emphasizing the importance of staying updated on responses.
Participants emphasized the need for a quick and easy process when creating and sharing notes.
They highlighted the importance of being able to reply to and comment on notes.
There is a desire for real-time notifications when others share their notes.
USER PERSONA
USER PERSONA
After creating a user persona for Discord users, I identified the need for a note-sharing feature from the frustrations of switching between servers and direct messages. These insights guided the design of a streamlined note-sharing feature to enhance collaboration and accessibility.
DEFINE🏗️
DEFINE🏗️
How can we prioritize user needs?
How can we prioritize user needs?
PROJECT GOALS
PROJECT GOALS
I outlined solutions to enhance collaboration, user engagement, and note organization, focusing on user experience, efficiency, and seamless integration.
FEATURE ROADMAP
FEATURE ROADMAP
I prioritized features as “must,” “should,” and “could have” based on user impact. Some of the most important features include quick note creation, replying to notes, and real-time notifications.
IDEATE🤔
IDEATE🤔
What tasks do users need? What features improve flow? What is the best layout?
What tasks do users need? What features improve flow? What is the best layout?
TASK FLOW
TASK FLOW
My task flow outlines the steps a user takes on Discord starting with sharing their own note, then to viewing, then finally replying to a friend's notes.
USER FLOW
USER FLOW
My user flow maps key decisions and motivations, showing how users create and interact with notes.
WIREFRAMING
WIREFRAMING
In my wireframe, I focused on visualizing the feature and its placement on the homepage. I aimed to streamline note creation and establish a clear hierarchy for easy navigation and engagement.
STYLE TILE
STYLE TILE
I designed a style tile that aligns with Discord’s visual identity by incorporating its signature color palette, typography, and playful yet functional aesthetic.
PROTOTYPE🛠️
PROTOTYPE🛠️
REVISIONS + ITERATIONS
REVISIONS + ITERATIONS
My high-fidelity prototype delivered an intuitive and engaging desktop experience for Discord users. It introduced a clean and user-friendly interface for the note-sharing feature, starting with a streamlined homepage, which leads to popups for writing and replying to notes.
To improve this prototype further, I conducted two user testing sessions, which led me to these main revisions:
Revision 1: Pop-ups Vs. Overlay
Problem: Users reported that the pop-up felt intrusive, resembling an unwanted ad, which disrupted their experience.Revision: To resolve this, I implemented a screen overlay, darkening the background to reduce distractions and ensuring the note function remained front and center for a more seamless and focused user experience.
Problem: Users reported that the pop-up felt intrusive, resembling an unwanted ad, which disrupted their experience.Revision: To resolve this, I implemented a screen overlay, darkening the background to reduce distractions and ensuring the note function remained front and center for a more seamless and focused user experience.
Before
After
Revision 2: Thought Bubble Colors
Problem: During user testing, participants found that the color of the thought bubble was too dark, as thought bubbles are usually imageined to be a lighter color, similar to a cloud. Revision: I tested multiple shades of gray from discord's style guideline before settling on the light shade of gray that made the thought bubble pop out without being too dark or too light.
Problem: During user testing, participants found that the color of the thought bubble was too dark, as thought bubbles are usually imageined to be a lighter color, similar to a cloud. Revision: I tested multiple shades of gray from discord's style guideline before settling on the light shade of gray that made the thought bubble pop out without being too dark or too light.
Before
After
Revision 3: Interactive Thought Bubbles
Problem: Users found the 2D thought bubbles static and desired interactive feedback.Revision: To enhance interactivity, I introduced three visual states: a default state, a hover state for dynamic feedback, and a pressed/clicked state to indicate user interaction, creating a more engaging experience.
Problem: Users found the 2D thought bubbles static and desired interactive feedback.Revision: To enhance interactivity, I introduced three visual states: a default state, a hover state for dynamic feedback, and a pressed/clicked state to indicate user interaction, creating a more engaging experience.
FINAL PROTOTYPE🎉
FINAL PROTOTYPE🎉
Viewing Notes
Viewing Notes
Creating/Editing Notes
Creating/Editing Notes
Replying to Notes
Replying to Notes
MAIN SCREENS
MAIN SCREENS
Homepage
Homepage
Writing A Note
Writing A Note
Editing a Note
Editing a Note
Replying To Note
Replying To Note
Replying to Note (cont.)
Replying to Note (cont.)
CONCLUSION & TAKEAWAYS
CONCLUSION & TAKEAWAYS
Conclusion: The new notes feature has successfully improved user engagement by simplifying the creation and sharing process and ensuring a more intuitive and focused experience. By addressing key user pain points and prioritizing clarity and accessibility, the feature now facilitates seamless collaboration and encourages meaningful interactions among users. Future Improvements: This project was completed during the last week of winter break. If I had more time, I would have liked to prototype more advanced features, such as note organization by topic or pinned notes for group channels, to further enhance usability.
Reflection:
Reflection:
- This project reinforced the importance of empathy in user-centered design. By understanding user frustrations with current note-sharing methods, I was able to create a more intuitive solution that aligns with their needs.
- Simplifying the note-sharing process demonstrated that clear, straightforward design choices can significantly improve user experience without compromising functionality.
- Incorporating dynamic states like hover and click animations highlighted the value of interactive feedback, which enhances user engagement and satisfaction.
Thanks for reading <3
Thanks for reading <3
Feel free to reach out for collaborations or just a friendly hello!
✉️vmc54@cornell.edu | 👩🏻💼LinkedIn | 📝Resume
Page updated
Google Sites
Report abuse