Thumbnails re-invention
Making diverse thumbnails to increase engagement
The first screen every user saw in the app was a news feed. The challenge was to make it look attractive regardless of the tedious nature of commercial real estate data.
Basic template
The first step was obvious: a simple card with a white background for perfect readability. A single template unified four cards, allowing any combination of information to be shown on it.
Having just four cards wasn't diverse enough. The feed was looking too dull. We had to create more different options.
We discussed with real estate analysts what events we could add and started thinking about their visual representation.
Full-image templates
Cards filled with images looked awesome but had a severe flaw. The contrast between the background and the text could be too low. To avoid this problem, we made two new types of cards:
A map card that used a custom-made low-contrast map
A company card that used a logotype and was filled with color (selected from a predefined set)
We realized that the cards' diversity still wasn't good enough. We had to find a way to place text on photos safely.
We had an idea to put a colored rectangle on top of a photo. It could help with the text contrast problem and improve the visual appearance of poorly made photos.
It was also essential to leave buildings recognizable. So, we used gradients that were intense at the left and almost disappeared at the right side of a card.
After many experiments, we created a set of filters that could be applied to our images.
More templates
The more we worked on cards, the more opportunities we saw. We added cards with lists, image-focused cards, interactive cards, custom-made cards, etc.
Reflections
We need to remember that usability practices aren't laws. They shouldn't automatically restrict a designer. There is always a way to implement an idea and stay user-friendly.
Also, any small task can become a prominent, essential feature. You just need to dig deeper. The possibilities are almost infinite.
