Styling a Customer Badge with Two Different Ratings Using Different Colors

Question

I'm currently in the process of designing customer badges for my application and have encountered a styling challenge. I've successfully implemented a color-coded badge that reflects the customer's name, with the color determined by a subjective rating provided by the user.

Recently, our client requested the addition of a second rating based on the customer's purchasing volume. Unlike the subjective rating, this new rating allows users to choose from a scale of 1 to 10, each with personalized colors.

Question 1: How can I display these two distinct colors on the badge-customer-component? The current representation is as follows:

Question 2: What colors do you recommend for the first rating (level 1 to 5) and the second rating (max 10, with personalized colors)? Additionally, what color options should I offer users in the selector component for the second rating?

I want to ensure a visually appealing and intuitive design that clearly communicates both ratings. Any suggestions or best practices would be greatly appreciated!

Answer 1

There are a few layers of complexity to work through when trying to implement or introduce colours into new UI components:

• current design system colour palette
• consistent and meaningful colour grading for scale
• any accessibility requirements
• reusability or clash with other parts of the interface (e.g. light/dark mode, hover-over behaviour, etc.)

You to have work through the best practices for at least some or all of these considerations, so there is no simple answer here.