Lean Branding and Design system exercise for Startups

Perfection is the enemy of good. That’s true for startups at least, isn’t it? This article is about creating an MVP Branding and Design System for small teams in a time and effort conscious manner.

Do startups need a branding exercise?

“Every interaction, in any form, is branding.” — Seth Godin

A branding exercise aims at two target groups- the customers and the internal teams.

For customers, brand communication is like an elevator pitch. For establishing the right communication with the right audience, it is essential to define a consistent pitch across digital products, social media, marketing, and sales channels. A good starting point can be defining the brand values, logo, tagline, color palette, typography, photography, and tone since these act as guidelines across various media.

For internal teams, branding instills a sense of direction and purpose. It defines the story, positioning, personality, aspirations and the value proposition for teams to work upon. Once defined, the marketing team promotes the brand and the product team brings it to life by creating a great product.

At Credit Saison India, a Fintech company with new-age lending products, we followed the undermentioned process:

Step 1 — Introspection as a team

“When your values are clear to you, making decisions becomes easier.” — Roy E. Disney

We started by conducting a survey with our mid and top management in order to establish the pillars of the organization — the company vision, mission, business goals, culture, etc. It showed that we want to-

1. Establish ourselves as a long term trusted partner in the Indian ecosystem.
2. Cater to underserved consumers and MSMEs with access to easy credit.
3. Be technology and innovation-driven.

Step 2 — Finding a Niche

“If you don’t give the market the story to talk about, they’ll define your brand’s story for you” — David Brier

With the goals defined, we moved on to the next step ie. conducting user, market and competitor studies. It helped us answer questions like:

1. Who are our customers and what are they looking for? How do we gain their trust?
2. What is our brand currently perceived as and is there a need to change it?
3. What are they saying about our competitors?
4. What are the constraints and opportunities in the current landscape?

The research revealed that with 330+ startups in the 350 Mn$ Fintech Lending space and large tech companies moving into the lending sector, the industry is at an inflection point. While start-ups started entering into this industry 2013 onwards largely to capture the untapped credit market, large tech companies seem to have recently targeted this segment owing to their access to customer data which can be used to create credible credit scores.

With a market so vast, for research purposes, we had to streamline. We selected 20 products with the biggest customer base and then mapped them in a Loan Product type Vs. Income Segment graph. From this graph we selected 3 products that are closest to us in terms of offerings and further studied them in detail — their story, social media content, company blogs, google play store feedback, etc. The study helped us ascertain and map their brand promise and value while gauging user aspirations from lending products in the Indian landscape.

After mapping the competitor traits and user aspirations, we conducted a brainstorming session to assess these against the pillars of the organization. At the end of the session, we summarized our Brand Values as follows:

1. Staying true to our ethics and value system
2. Harboring a culture of ownership and innovation within our teams
3. Customer-centricity being sacrosanct in everything we do.

Step 3 — Creating Brand Guidelines

Next, we started creating a visual representation of the brand- a logo, visiting card, letterhead and style guide.

A. Defining Design Principles

Before delving into design, we set some ground rules for creating a better and more consistent experience for the users:

PC: Ouch!

1. Empowering — Doing as much work for the user as we can. Intelligently anticipating user needs, optimizing workflows and helping people work better, smarter and faster.
2. Clear and Transparent — Providing utmost clarity in our processes day in and day out, thereby building users’ confidence.
3. Delightful — Avoiding users from feeling overwhelmed by financial data and calculations. Instead, making their experience relaxed and fun.
4. Reassuring — Reinforcing user actions at every step to give them reassurance about their actions.
5. Conversational -Ensuring that the system is easily understood by the user.

Once the team aligned on the principles, we started creating mood and color boards. These evolved into a style guide with layouts, colors — brand, primary, secondary, background, text and typography- formats, sizes.

B. Creating a Design System

What is a Design System and how is it different from a style guide?

A Design System is an ever-evolving ready set of components that can be used across digital products. It is a derivative of a style guide which talks about the color palette, typography, iconography, illustrations, layouts, etc.

To simplify, I have tried to analogize Brad Frost’s Atomic Design principles, with a Subway sandwich. Here the “page” is the meal/order ( say, Sandwich and crisps), the sandwich a “template”, the cheese toasted bread an “organism”, the bread a “molecule” and the wheat in the bread an “atom”.

Brad Frost’s Atomic Design Principles applied to Instagram

Making of a Subway Sandwich, PC — Chicago Tribune

One can create different sandwiches by combining different ready to go slices of bread, meat, and vegetables. Likewise, when the different components are ready, designers and developers can create different but consistent prototypes for various applications.

It helps in the following ways:

1. Ensures consistency across screens, products, and devices. The same components are used everywhere. (Think ½ inch thick tomato slices).
2. Saves on development time, allows for quick prototyping and provides scalability. (Like in an assembly line)
3. Ensures alignment within the design and development team. (Not letting too many cooks spoil the broth)
4. One time effort to ingrain branding in the very soul of the product and ensure quality standards (fixing the menu and core ingredients)
5. Making changes becomes easy since everything is built as a module. (No pickles? No problem.)
6. You get to focus on the bigger picture without worrying about the details. (Think Pre-seasoned meat)

To create the first version of the Design System we studied our current screens and segregated all of their common elements like fields, navigation bars, notifications, pop-ups, tables, etc. For these components, we started creating the “atoms” (buttons, text fields, icons, etc) as per the style guide and created a library of how they would transition in various states (active, default, hover, pressed, disabled, etc.)

The first set of Components for our Design System Kanso

The components with the new branding were then tested on screens. We had to ensure that they work cohesively as a design, each page conveys our values and meets accessibility standards across devices and resolutions.

The beauty of this exercise is that it gets designers and developers to define the soul of the product collectively. We took ownership, obsessed over details and chased the common goal from the beginning. After this, the designers did not need to push pixels or worry about responsiveness. The developers did not need to spend hours tweaking custom CSS.

To Conclude:

Stand for something.

Teamwork is dream work.

It’s all about the people.