Discord Mobile Application

“From Frustration to Satisfaction: How Colour Selection Options Increased User Engagement for Profile Banners!”

Photo by Alexander Shatov on Unsplash

👀 Overview:

Discord is a popular communication platform that allows users to chat, voice call, and share content with others. One of the key features of Discord is the ability to customize user profiles with banners and other visual elements. However, I found issues with the colour selection process for the profile banner, including difficulties previewing colours and limited options for customization. To address these issues and improve the user experience, I decided to explore solutions for improving colour selection on the Discord mobile app.

🛠️ Problem Statement:

On The Discord mobile app, there are some issues with the colour selection process for profile banners, including difficulties previewing colours and limited options for customization. These issues can cause frustration and reduce efficiency for users, especially those who frequently update their profile banners.

Problems identified through heuristics 🔍

1: Visibility of system status

To adhere to the heuristic principle of Visibility of System Status, the system should provide a clear indication of the current status of the banner colour selection when users click on the “Edit profile banner” icon. However, the current implementation lacks such an indication, leaving users uncertain of which colour will be displayed on the banner as they adjust it using the slider or colour picker. Furthermore, the system does not allow for a preview of the colour before saving it, causing difficulty for users in selecting the desired colour for their profile banner.

2. Flexibility and efficiency of use

Users don’t have the flexibility to quickly and easily choose colours with minimal effort or steps, and waste time repeatedly adjusting the colour to achieve the desired outcome.

💡 Ideation:

In order to address the issues I identified, I set out to improve the colour selection feature for the profile banner. During my exploration, I came up with two potential solutions to enhance the user experience.

Solution:

1. Live Preview of Color Changes: To provide users with a clear indication of the current status of the banner colour selection as they adjust it using the slider or colour picker, I decided to apply a live preview of the colour changes. This would allow users to see the effects of their adjustments in real time and make decisions more efficiently.
2. Auto-generated Color Option: To provide users with more creative options and enhance the platform’s visual appeal, I thought of adding an auto-generated colour option that matches their profile photo. This would allow users to quickly and easily choose a colour that complements their existing profile photo, without the need for manual adjustments or custom colour selection.

Low fidelity designs

After narrowing down my ideas, I decided to first explore the low-fidelity solution. I started by sketching out rough wireframes and iterating on the design until I felt it would meet the needs of users.

Lo-Fi Screens

High fidelity designs

Once I was satisfied with the direction of the low-fidelity solution, I moved on to creating a high-fidelity prototype. I refined the layout and incorporated more details, such as a live preview of the selected colour on the profile banner. This allowed me to create a more polished and realistic representation of the final design.

Hi-Fi Screens

Benefits

1. From the solution of Live Preview of Color Changes:

For users: It saves users time and eliminates the need for back-and-forth previewing of colours. To clearly make the user see the change in the colours that result in the user seeing “Visibility of system status”.

For business: It reduces frustration, and users may be more likely to continue using the platform and recommend it to others, leading to increased user retention and growth.

2. From the solution of Auto-generated Color Option:

For users: Providing more creative options for users by quickly selecting the colour palette.

For business: It can enhance the platform’s visual appeal, making it more attractive to new users and potentially increasing engagement.

After the Hi-Fi designs, I conducted usability testing with the high-fidelity prototype to gather feedback and make any necessary adjustments before moving on to the implementation phase.

🧶 Usability testing:

To ensure that the improved colour selection feature is truly user-friendly and effective, I conducted usability testing. I created a set of tasks to complete using the new feature and asked to provide feedback on the experience. As I observed the interactions and noted down the comments and suggestions for improvement. These observations were then used to refine the feature further and ensure that it is meeting the needs and expectations of users.

Task for the user

• Choose a colour from a pre-defined set of options and apply it to your profile banner.
• Preview the colour on your profile banner before saving it to ensure it looks as expected.
• Undo and redo changes made to the colour selection feature.
• Compare the new colour selection feature with the previous version and provide feedback on the improvements made.

Things I want to observe

• Does the user experience confusion when navigating back and forth between the colour selection process?
• Is the auto-generated colour selection feature effectively meeting the needs of users?
• To what extent are users making decisions about colour selection based on the live preview of the colour on their profile banner?

Observation from the test user

• The user discovered a more realistic way to select colours for their profile banner.
• The user was able to quickly choose desired colours from the provided templates/palettes.
• The user expressed a desire to see their previously used colours to make the colour selection process even more efficient.

🎯 Implementation:

After analyzing the feedback from users and gathering their requirements, I moved to the implementation phase i.e., the final UI design phase.

Prototype

After the final UI design, I proceeded with prototyping. I created interactive prototypes to test the colour selection feature with real-time colour updates.

Prototype

🎰 Result:

• The live preview of colour changes allowed users to make decisions more efficiently and with less frustration.
• The auto-generated colour option provided a convenient and customizable option for users.
• The improvements to the colour selection process may contribute to increased user retention and growth for the business.

🎲 Conclusion:

• Prioritized heuristic principles of Visibility of System Status and Flexibility and Efficiency of Use
• Addressed user concerns and improved the colour selection process for profile banners on Discord mobile app
• Provided users with more creative options and streamlined selection process
• Enhanced user experience and contributed to business success

Thank you for taking the time to read this case study. I hope that my approach to addressing user concerns and improving the user experience for profile banner colour selection on the Discord mobile app has been informative and engaging. If you have any questions or would like to discuss this case study further, please feel free to reach out to me. Thank you again for your time and interest!