INTERACTIVE NOTE SHARING

THE CONTEXT

What is Discord?

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.

ROLE

Product Designer

TEAM

Solo

TIMELINE

December 2024 - Janurary 2025

TOOLS

Figma/Figjam

Google Forms

THE PROBLEM

What if I want to share a note with all my friends?

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.

COMPETITIVE ANALYSIS

Other note-sharing features

After analyzing competitors’ note-sharing features, I found that simplicity, ease of use, and real-time communication enhance user experience.

USER RESEARCH

How are users currently sharing personal updates with everyone?

In my research plan, I focus on understanding how users currently utilize text channels or direct messages for sharing personal notes and updates and the challenges they encounter with these methods. To explore these questions, I conducted interviews with five participants who use Discord daily, gathering insights into their communication habits, daily interactions, and overall experiences with the platform. Through this process, I uncovered key insights into users’ challenges and communication habits.

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.

DEFINE

How can we prioritize user needs?

In analyzing user research, I developed a user persona that captured my target audience’s needs, pain points, and goals, which revealed the frustration of switching between servers and direct messages on Discord. From these insights, I identified the need for a streamlined note-sharing feature designed to enhance collaboration.

As part of my project goals, I outlined solutions to enhance collaboration, user engagement, and note organization, with a focus on user experience, efficiency, and seamless integration.

As part of my feature roadmap, I prioritized features as “must,” “should,” and “could have” based on user impact, highlighting quick note creation, replying to notes, and real-time notifications as the most important.

IDEATE

Emphasizing real-time note sharing and replying

I created a task flow to visualize and clarify the steps a user takes on Discord, starting with sharing their own note, then viewing, and finally replying to a friend’s notes. This helped inform the design of a smoother, more intuitive note-sharing experience.

I also created a user flow map to understand and illustrate users’ key decisions and motivations when creating and interacting with notes. This helped me understand how I could optimize the sequence of actions for an efficient note-sharing experience.

I then designed low-fidelity sketches to explore my feature ideas and identify areas for visual experimentation. After envisioning how these solutions could function on Discord, I translated my concepts into the wireframes. This included both web and mobile wireframes for how my features integrate into the existing application.

REVISIONS + ITERATIONS

Refining the notes experience

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

Users reported that the pop-up felt intrusive, resembling an unwanted ad, which disrupted their experience. 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

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. 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

Users found the 2D thought bubbles static and desired interactive feedback.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 DESIGNS

Viewing Notes

Creating/Editing Notes

Replying to Notes

CONCLUSION & TAKEAWAYS

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. 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:

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

Feel free to reach out for collaborations or just a friendly hello!

✉️vmc54@cornell.edu | 👩🏻‍💼LinkedIn | 📝Resume

Page updated

Google Sites

Report abuse