We decided to change our car icons and use colors for cabs so they would be more recognizable.
Snapp has several service types such as Eco, Eco plus, box and etc. Each service is specified by special icons that represents the service type. For eco Snapp, which is a regular type, a white car icon is used and for eco plus Snapp, which is a service type with more options and often higher prices, a black car icon is used. The project was done in 1 month and in cooperation with a product manager, illustration designer and developers.
Discover
More than 50% of cabs in Iran are in white. The Icon we used on map is also white. But there are times that the car is actually in another color and it causes confusion although we write the car’s color in cab’s info.
1- Goal
- Increase awareness
- More recognizable cabs
- Less confusion caused by differentiating the real cab’s color with the app’s Icon
2- Metrics:
- Decrease in support calls that users complain about not matching car color with the car
- Feedbacks on social media
3- benchmark:
between all other ride hailing systems that are known to us there was just Lyft that had colored cars on their map. By studying it I learned that simplifying colors and just representing the colors is enough. We can’t demonstrate the exact color of the cars on app and the user needs to find out that its not white or black or gray!
Define
- I decided to take a mini user survey according to this problem to see if people see what I see as the designer!
For each marked color we prepared a survey and asked from about 40 people to tell us what they perceive.
- For doing this I used a colored skin that I created in figma to try on our car icons so that I didn’t have to put so much effort rendering the cars with colors we wanted.
This way, we accomplished to take several surveys to find best colors.
- Then I collected the data of number of cars with the color labels that are categorized in orange group. It turned out that “Copper” color was the most seen orange between other colors of orange group!
I asked for different models of cars of each color that had ride in last 3 months. So I checked the most popular cars in for example copper color and use that color as the representative color.
So with this process I managed to discover best colors to represent the car icons.
Ideate
The solution I came up with was simplifying the colors and put them in groups and choose best colors to be the representative color of their group. I marked the color labels with vague definitions for more research
- Some of the colors and their definitions are too ambiguous. So I decided to first do a research and then investigate in data we had. Here is one example:
Design
More saturated colors are more obvious in the small screen
Some colors like dark green and dark purple have few cases among other colors so we can eliminate them.