Designing for the Next Billion Indians

Part 3: Building the Visual Experience

6 min readDec 28, 2021

A style guide is like a product or app’s design bible. It includes the visual elements and their rules of use for that particular product or app so that the relevant teams and departments across an organization can have one common set of product-specific guidelines to inform their visual decisions, in addition to the overarching brand guidelines.

BetterPlace App, which is an app for blue-collar employees and employers to connect and search for jobs, follows a simple yet engaging approach. Our target audience, the blue-collar workers, have varying degrees of digital literacy. Therefore, we have ensured that the visual elements in our style guide are simple, engaging, and have a hint of familiarity.

What visual elements does the Style Guide include?

The style guide includes typeface, font sizes, icons, illustrations, colour pallette, and imagery.

The Typeface: A type of familiarity

Our target audience prefers simplicity. A sans serif font was the obvious choice; we went with “Inter” because it was similar to Proxima Nova and Roboto — both common fonts in social apps — and that resulted in a sense of familiarity with BetterPlace.

However, there are some significant differences between Inter and the other two. Inter is a narrower sans serif font compared to the others on the list. While the uppercase is angular, with straighter lines, the lowercase has a slightly rounder yet streamlined look in its bolder forms, making the overall font type a good mix of approachability, stability, and formality. Additionally, Inter is one of the best choices for a tech start-up that is looking at minimalism in its typeface.

But our audience isn’t solely English-speaking. Keeping in mind that most of our target audience is comfortable with regional languages, we have also included Noto Sans for all other Indian languages.

The Colours: Establishing an environment

The style guide highlights the primary and secondary colours of the brand and their rules of use. The product’s primary colour is blue, which represents trust, loyalty, wisdom, confidence, intelligence, faith and truth. It is also known to have a calming effect on the mind and body.

Secondary colours support the primary ones and are usually utilised when backgrounds are visually heavy with multiple elements or for icons and standalone illustrations. Our secondary colours are yellow, green, light blue, pink, and orange. Internally, we refer to these as Taxi, Chutney, Kaveri, Litchi, and Mausambi respectively.

Primary Colour

Secondary colours

Informational hues include red for incompletion of a task, green for completion or success, and yellow for warnings.

Informational colours

Black and white are colours that may be used in combination with any of the colours mentioned above. Ideal colour pairs are also highlighted in the style guide to enhance colour harmony.

Neutral colours

The Iconography: The app’s road signs

Icons are like road signs. They tell the user exactly where everything is located and what actions may or must be taken. In order for easy adaptation for our users, we have maintained the structure of common icons, in both outlined and filled versions, but have added a small element of our own design style in one way or another. In terms of psychology, we have used icons with rounded corners as round and curvy shapes tend to give an impression of approachability and friendliness as opposed to their geometric counterparts.

The Illustrations: Crafting a story

Our illustrations are supporting visual elements and we have divided them into two categories:

I. Decorative icons

which are colourful and detailed icons that may only use four of the brand colours — yellow, orange, green, and blue — to avoid being a distraction and to prevent visual fatigue. These are bright and stand out, ensuring that the users don’t miss them. Considering that these need to be universally understood, we have avoided the use of abstract representation of elements. Decorative icons, like their system counterparts, also have rounded corners and give a sense of approachability and informality, which supplement the formality of our typeface.

II. Spot illustrations

which are colourful, detailed, and may use any of the brand’s colours. These are used when the user is required to perform only one mandatory action on a screen, like entering an OTP, or to confirm the status of a task. This visual takes up most of the screen so there will not be other elements visible in the background when using spot illustrations. These are a more detailed version of the decorative icons and are often used to represent the brand’s personality.

Imagery: Relatable yet aspirational

This was a somewhat easy choice. We knew we had to use real people to build an emotional connection. We were also aware that the people presented had to be Indian or South Asian since this was, at the end of the day, an Indian app for blue-collar workers in India.

The stars of our visuals are the blue-collar workers in action — in a professional space as well as in a personal one. We felt it essential to highlight that they are more than their jobs — they have lives and loved ones. This helped them relate to the app and its users. What was difficult was balancing the relatability with the aspirational aspect of the image choices.

We solved this by peppering the above images with a few images of people in semi-formal wear. We are extremely mindful of not visually imposing a complete white-collar culture since the blue-collar world has different demands and deliverables. However, many do aspire to start a business and the semi-formal imagery not only makes them aspire to greater things, but also encourages them to follow their dreams.

Component Library

All of the above icons and images are housed in a component library, which is open-source to all within the organization. This library is the single source of truth for all buttons, icons, navigation elements, and so on to ensure consistency across visual deliverables. These are production-ready and customisable code components. It is a dynamic structure that is constantly being updated as per the behavioral and psychological needs and analysis of the target audience. The more the research, the more the enhancements to this source of visual truth.