How we designed recommendation cards using 5 principles of visual design

We are constantly making decisions throughout our daily lives; it is essential to our living. As choices & options increase, making decisions becomes more and more difficult rather complex. More on this can be read in Part 1 of this article.

With the learnings that we gathered from the Part 1 of the project, we went ahead to build recommendations within our OneAssist App. Recommendations were categorized into 4–5 different aspects like benefits, testimonial, customer story and quick facts.

Any existing user who now comes on our App will be able to see smart recommendations basis his or her past behaviour with the help of AI & ML. These recommendations are also changing with each visit.

In Part 2, I will talk about the visual design aspect of the in-app recommendations.

Visual Design — Recommendation Cards

We wanted to create an immersive and fun experience, which users love. Layouts and illustrations that take advantage of the principles of good visual design can drive engagement and increase usability. Our visuals were based on these 5 principles: Scale, Visual hierarchy, Balance, Contrast and Gestalt.

Scale: The illustrations and text were carefully aligned and sized to signal importance and rank in a composition. In one of the card variation, we wanted our main text to come out rather than the illustration and in the second, vice-versa.

Visual Hierarchy: A good visual hierarchy refers to guiding the eye on a page. We used 2–3 typefaces to indicate which piece of information is more important than others. Visual hierarchy can be achieved with the help of scale, colour, spacing and placement. All of these helped us to define the visual hierarchy. The general rule of thumb suggests to include large, medium and small components in the design. In our case we used large size for the copy, medium size for the illustration/secondary text depending upon the type of card shown and small for only secondary text.

Balance: Elements of our cards were symmetrically distributed relative to the central imaginary axis. Our design elements in cards were carefully juxtaposed so that it creates a symmetrical balance; quiet and calm design.

Contrast: Cards were categorized by our brand colors to show that they belong in different categories. Contrast provided a noticeable difference between 2 cards in order to emphasize that cards belong to a different category. We used a color-contrast checker to ensure that the content was legible to our users. Purple was used for on-demand repairs, blue was used for personal electronics category, green for financial protection and so on.

Gestalt: We further used gestalt’s principle of similarity and proximity to ensure that the designs were usable — Full cards were tappable and Illustrations were organized in such a way that they looked as a whole instead of individual elements.

App Screens

We bifurcated the home screen in our app into 2 parts: Today and Explore. And categorized the recommendation cards so that the user gets to see something new every-time they visit our app home screen. Recommendations were categorized into 4–5 different aspects like benefits, testimonial, customer story and quick facts.

Conclusion

We noticed that number of clicks increased for each recommendation which also helped with discovery of all our offerings hence leading to better step by step conversions.

Design is an iterative process and we keep improving, analyzing funnels, taking feedback from users, and work on the overall experience.