Asana - A Color System Revamp
Chosen Productivity app/tool: I chose the productivity tool Asana, a work management platform designed to help teams organize, track, and manage their work. It offers features such as project planning, task management, and goal setting to increase productivity and ensure company-wide alignment.
Goal: Revamp the color system of Asana.
Research Methodology:
- Interactive interview with my roommate and a friend.
- Competitor analysis
Research Analysis: After conducting research, and comparing the color system to competitors of Asana, it was evident that the colors were perceived as dull or uninspiring. interview candidate 1 said, and i quote "you know, they say they want to "bring ease, focus and flow to you, your team, and your work", but that dull green and dark grey doesn't exactly scream flow and ease to me." and candidate 2 said, and i quote "looks a bit harsh, doesn't it? Basecamp looks more exciting. I would want to try out that first."
The competitors who also shared some colors such as green used a brighter and exciting shade of it, for example: Basecamp, with a brighter green for it's primary color and Smartsheet with its shade of blue.
Design Decisions: The Green color was brightened to make it more lively. the color was extracted from a photo of a yogi performing asanas out in the nature to stay on theme. it evokes a sense of calmness, and longevity. The dark grey was switched out to purple to evoke a friendlier, creative tone, as opposed to the "harsher" look the dark grey coupled with the sharp corners conveyed. and lastly, a darker shade of sky blue was used for the tertiary colors, signaling stability, vastness, and professionalism.
Summary: Green was chosen as the primary color to stick to Asana's primary color, but tweaked to look livelier and evoke the feeling of calm and longevity, Purple was chosen as the secondary color to indicate playfulness, but more importantly, creativity, and lastly, Sky blue was chosen as the tertiary color to evoke a felling of stability, vastness like that of the sky, and professionalism.
Thank you :)
Reviews
4 reviews
I appreciated that you incorporated a well-known brand while developing your own color palette. Your explanations for each color choice are clear, straightforward, and informative, effectively conveying the brand's values and what each color represents. It's great that you included system colors along with your brand and accent colors. However, I would have liked a more detailed explanation of the WCAG guidelines and perhaps the inclusion of RGB, HEX, and HSL values as well.
I appreciated your approach to presenting the revamped color system. The detailed explanations, competitors' overview, and consideration of WCAG guidelines were particularly impressive.
However, I noticed that both the primary color and the success color are shades of green. Using similar colors for these different purposes might lead to user confusion. Typically, distinct colors for different types of actions help users quickly understand what each action does without needing to read the text. For example, distinguishing between colors like green for success and blue for primary actions could enhance usability by preventing misinterpretation, especially in situations requiring quick decisions.
Other than that, great work!
Thanks you Parth for your work. I like the explanation of your design process and decision making. New colors are definitely better then previous ones. I also like that you showed the UI interface with new colors. However on the UI they don't complement each other and design looks a bit childish. I would suggest to stick with 2 colors or revamp the UI differently.
Best, Fedir)
The revamped color system is well-structured and follows UI best practices, but a few refinements can improve clarity and accessibility. The system success green is very similar to the primary greens, which may cause confusion between general UI elements and success indicators.
-Adjusting the success green to a more yellow-toned hue or darkening the primary green would help differentiate them.
Contrast in dark mode is another concern, as your light green and light blue may be too faint against light or dark backgrounds.
-Increasing their saturation or adjusting their brightness can improve readability.
These small adjustments will make the system clearer, more accessible, and visually distinct.
You might also like
Sojo NFT Marketplace
From Idea to Full-Stack Web App
Docto
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
Fundraising Website
NEWFASHON™ - Landing page
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
