Slack Redesign: Enhancing Communication and Simplicity
I chose to redesign Slack, a popular messaging app, as my design project.
As I used Slack more frequently for both school and work, I started to notice some areas of the user interface that could be improved. For example, certain icons were confusing, and it was difficult to quickly navigate to the specific channels I needed. Additionally, the color scheme and font choice felt outdated and didn’t fully reflect the app’s modern functionality. I wanted to create a new visual style that would enhance the communication and simplicity of the app while also making it more visually appealing and enjoyable to use.
Redesigning Slack Screens in Figma
To begin the process, I copied several screens from the existing app into Figma, a popular design tool. From there, I redesigned every icon and component of the screen in Figma. While this took more time, it allowed me to gain a deeper understanding of Figma’s functionalities. My copies were almost identical to the original app, which I'm proud of.
Heuristic Analysis
After the copies, I conducted a heuristic analysis to gain more insights into the app’s user experience.
One key finding was that there were too many icons before the channels, which caused confusion for new users. Another finding was that the icons before actions were all the same, which made it difficult to quickly find the specific channel you wanted to reach.
Competitive Analysis & Retro Branding
To further understand the competitive landscape, I conducted a visual competitive analysis with three direct competitors: Microsoft Teams, Zoom, and Discord. I noted that all three competitors used similar color schemes with shades of blue or purple. To differentiate Slack from these competitors, I wanted to use more colors. So I created a mood board with a retro style and different illustrations to guide my design decisions. The brand attributes I wanted to convey were playful, retro, calming, minimalistic, and professional.
Color and Font Choices
For my color scheme, I selected a primary color called Fuel Yellow. This color is a combination of yellow and orange, which inspires and encourages communication—an important factor for an app that is primarily used for communication. For my secondary color, I chose a complementary color called pastel blue, which has a supporting effect.
I chose a font called Noto Sans, which covers all the alphabets and characters from various languages while maintaining a harmonious design across hundreds of different font families. This was an important consideration for a messaging app used in over 150 different countries.
Designing High-Fidelity Prototype with Iterative Improvements
When designing the high-fidelity prototype, I aimed to create a sense of calmness and order with color differentiation. I made the buttons pop with a light drop shadow, which created a slight offset in contrast to the background color of the button.
During the design process, I received valuable feedback that helped me make iterative improvements.
For example, I learned that holding back on title sizes can be beneficial and that being moderate is recommended. Additionally, I discovered the importance of understanding the distinct differences between iOS and Android design. I have to dive into the Material Design Guidelines for Android and the Human Interface Guidelines for iOS.
Ultimately, I learned that design is iterative and that it’s okay to be unsure of your choices. The key is to stick with it, be open to feedback, and iterate.
Conclusion
In conclusion, the Slack redesign project allowed me to use different design implementations to create a new visual style, color scheme, and font choice. By conducting a heuristic analysis and a competitive analysis, I was able to identify the weaknesses of the existing design and improve upon them.
The new Slack design provides a fresh and modern look that enhances communication and simplicity.
Thank you for reading. Please leave a comment or reach out to me.
