Skip to content

Freshworks: Evolutionary branding

Freshworks is a cloud-based customer service software company that provides cloud-based tools for customer relationship management (CRM) and IT service management (ITSM). It has a customer base of over 52,000 clients in more than 100 countries.

My key contributions to the rebranding

Grid system | Components | Design guidelines | Templates

  • Design system (tokens)

  • Marketing collateral

  • Presentation master deck

  • Social media designs

  • Google Display ads (GDN)

  • Website UI/UX

1. Background

The brand is not connecting with the target audience

We observed after several years in the market that our brand identity was not engaging with the audience we were targeting and that we needed to rebrand in order to remain relevant and competitive. Instead of creating a family brand effect, our existing branding created individual branding impact among the target audience.

Brand
Freshworks
Brand
family or
products
Freshworks product brands, each with its own logo

Freshdesk (omnichannel customer support helpdesk), Freshservice (ITSM tool), Freshsales (sales CRM software), Freshcaller (modern phone system), Freshteam (applicant tracking software), Freshchat (customer messaging software), Freshsuccess (customer success management software) and Freshrelease (agile project management software).

1.1 – Qualitative research

Hello, have you heard of this product/company?

Freshworks
  • It sounds like a brand replica of Freshdesk and Freshservice.
  • I have never heard of Freshworks before. What is it?
  • I’m not familiar with Freshworks, but I’m curious to know how it compares to other software products.
Freshdesk
  • I’ve heard of Freshdesk, but I haven’t personally used it yet.
  • I love how customizable Freshdesk is and how it can be tailored to meet the unique needs of our business.
  • Yes, I have used Freshdesk in the past and it’s a fantastic customer support tool.

Most common outcomes from customers’ and the general public’s collective opinion.

1.2 – Got the answer to “Why?”

Why did our existing branding fail to make an impact as a family brand?

  • Freshdesk Inc. rebrands to Freshworks Inc.

  • Each product following different brand guidelines.

  • Huge customer base count difference between products.

2. Problem

Rebranding without making an impact on churn rate

The primary challenge we encountered was rebranding our product without compromising the brand recognition and customer loyalty that we had developed over time. Since we were approaching an IPO on Nasdaq during the initial phase, we needed to evolve our brand identity in a way that would align with our current market position and values, while still retaining our existing customers and attracting new ones.

Hand-drawn line chart: two zigzag lines trend upward from April to June, past a red dashed trend line for churn and a green dashed customer churn line
1.51.5CustomersAprMayJun
  • Trend line for churn
  • Customer churn

Note:
Chart is for graphic representation purposes only.

2.1 – Break down the silo

The secondary challenge we encountered was to make the brand approach more cohesive and consistent; we must break the scattered design team strategy across products and work as a centralized design team.

Sketch of people scaling a rising bar chart in different ways: climbing a ladder, pulling up onto a bar, climbing a rope and hang-gliding above

2.2 – Change in leadership thoughts

Since we are a rocket-ship company, we experienced frequent changes in leadership and their thoughts during the early stages of rebranding. As a design team in charge of the rebranding project, we must adapt to changing trends and market conditions, as well as operate under new leadership and their vision.

  • Once again!
    Start with a fresh vision and look.

  • Subtle and monochromatic.

  • Let’s go with
    colorful photographs.

  • We are on the correct path. Keep up the good work!

  • ServiceNow got a better strategy. Can we do something like that?

3. Solution

Brand evolution, not revolution

Brand evolution refers to slow, incremental improvements made to a brand over time to keep it current and relevant to its target audience. It involves building on the existing brand identity and values while making changes to the brand’s messaging, visual identity, products or services, and overall market positioning.

Brand revolution, on the other hand, involves an extensive and sudden transformation in the brand’s identity and values. It requires a complete rebranding, a sudden shift in the brand’s messaging or values, or a significant departure from the brand’s current product or service offerings.

Yellow illustration of a square that evolves step by step into a glowing light bulb along a rising arrow

We decided to take an evolutionary approach to rebranding, which involved making subtle changes to our brand identity over time. Here’s how we approached it:

3.1 – Research and analysis

We conducted thorough research and analysis of our brand, our target audience, and our competition to identify areas for improvement. We looked at our brand values, messaging, visual identity, and user experience to determine what was working and what needed to be changed.

Pen sketch of hands working over a clipboard of pie and bar charts and notes, among a tablet, phone, glasses, USB stick, coffee cups and a notebook

Steps involved

  • Market research
  • Brand audit
  • Competitor analysis
  • User research
  • Cultural analysis
  • Stakeholder analysis
  • Surveys
  • Interviews

As a result of research and analysis, we got a better understanding of our brand’s current state and areas for improvement. Then we laid a strong foundation for developing a strategy for growth and success.

3.2 – Brand strategy

We created a new brand strategy that focused on our core values of collaboration, creativity, and simplicity. We wanted our new brand identity to represent these ideals and appeal to our audience.

Brand family transformation

Freshworks brand architecture

The Freshworks brand on top, the Delight customers and Delight employees solutions, the product families Freshdesk, Freshsales, Freshmarketer, Freshchat, Freshservice and Freshteam, and the Freshworks Neo platform beneath.

  1. Company
  2. Solutions
  3. Product
    families
  4. Unified
    platform

Brand archetype

Brand archetype is a representation of our brand as a persona based on human drivers and values. It helps our brand build a narrative and emotional connections with our audiences.

Two brand archetype cards joined by a plus: The Everyman (belonging, “You’re just like me and I’m just like you”, brands like Levi’s, Target and Amazon) and The Hero (mastery, “Where there’s a will there’s a way”, brands like Adidas, Nike and BMW)

3.3 – Visual identity

We updated our visual identity by making subtle changes to our logo, design system, marketing collateral, websites and social creatives.

3.3.1 Design system

A comprehensive and centralized approach to design that ensures consistency, scalability, and efficiency in the creation of design assets. It includes a variety of components, such as typography, color palettes, icons, imagery, layout grids, and user interface (UI) components. It also includes design principles, such as accessibility, usability, and brand identity, which guide the creation of new design elements.

Freshworks design system overview

The Figma component, text-style and color-style library, the “Colors got their Colorful Names” cover, color-name swatches, primary, secondary and extended palettes, bar and line chart specimens, typography pages, character illustrations and photography guidelines.

Logo

We kept our logo recognizable but modernized it to make it more visually appealing and aligned with our new brand values. Created a logo usage guide for the company and products.

Original Freshworks logo: the multicolored leaf mark beside a light gray lowercase wordmark
Modernized Freshworks logo: the same leaf mark beside a darker, crisper wordmark
Original product logos with lowercase names: freshdesk, freshservice, freshsales, freshcaller, freshrelease, freshconnect, freshteam, freshchat, freshmarketer, freshsuccess, freshping and freshstatus
Modernized product logo lockups with bold capitalized names and rounded icons: Freshdesk, Freshchat, Freshservice, Freshsales and Freshmarketer
Typography

The Freshworks font stack consists of a primary font for headlines, a secondary font for paragraphs and body copy, and a special font for captions.

Freshworks font stack: Neue Haas Grotesk Display Pro for headlines (25 Thin to 75 Bold), Neue Haas Grotesk Text Pro for paragraphs, Rubik for captions, with sample headline, body copy and dark-background cards
Type specimens
Type specimen with tabs for type sets 01 to 04, labeling the caption, hero intro, paragraph and H1 styles, then the same title and paragraph shown on light and dark backgrounds
Type guide
Neue Haas Grotesk type guide covering optical sizes for display and text, stylistic alternates, case-sensitive numerals and punctuation, fractions, superiors and inferiors, and support for up to 82 languages
Color

Our color palette expands on Freshworks’ unique aesthetic and represents the brand – communicating the reliability of our product and the authenticity of our teams’ values.

Freshworks color palette: primary colors Rhetus #0b1320, Monarch #fe6933 and Parnassius #f7f7f7 with contrast ratings, seven secondary colors, neutrals, usage notes and an extended palette of numbered tints and shades
Definitive naming convention
“Colors got their Colorful Names” booklet: each brand color is named after a butterfly, such as Rhetus, Monarch, Vindula, Brimstone and Morpho, with its photo, scientific name, region and HEX, RGB, CMYK and Pantone values
Icon

Icon usage across different brand touchpoints from marketing to website to product.

Icon guidelines: 67px icons with a 1.5px stroke and 36px icons with a 1px stroke, both #0b1320 with a transparent fill, above three sheets from the line-icon library
Illustration

Branding requires storytelling, and illustrations play a major role in telling a story. As part of rebranding, we decided to redo our illustrations to help us tell better stories efficiently. Tech websites have limited space for visual exploration. Wormhole Syndrome was conceptualized keeping this restriction in mind.

Pages from the Freshworks illustration handbook

Color, hair and skin-tone palettes, the “Design to communicate” introduction, Wormhole storytelling examples, the Group A and Group B character lineups and finished scenes on white, yellow and dark backgrounds.

3.3.2 Brand and product websites

Atomic design methodology – for designing and building user interfaces by breaking down the design into its fundamental building blocks, or atoms, and gradually combining them into more complex components and templates. It’s a powerful methodology for designing and building user interfaces that are consistent, scalable, flexible, collaborative, and accessible.

Process

The checklist below shows the process carried out during the website revamp.

  • Research and discovery
  • User persona development
  • User journey mapping
  • Information architecture
  • Wireframing
  • Prototyping
  • CMS build
  • User testing
  • Iteration and refinement

NDA: To respect Freshworks InfoSec policies, I am limited in the display and discussion of this work publicly and can only write about non-proprietary project and product details.

Layout grid

12-column grid in a 1440px-wide layout – Desktop | 4 columns in a 414px-wide layout – Mobile

Layout grid spec sheets for the Crownpeak CMS: 12 desktop columns (80px wide, 32px gutters), 4 mobile columns (78px wide, 10px gutters) and a spacing scale in multiples of 4 and 8
Atoms and molecules

Atoms represent the smallest entity in UI elements and they can’t be broken down any further. Think of them as Lego blocks. They serve as the foundational building blocks of your interface. Some examples are colors, fonts, animations and single images.

Molecules are groups of atoms bonded together that take on distinct new properties. They form relatively simple UI elements functioning together as a unit. Some examples are a form label, search input, and buttons.

Design system spec pages: the Buttons - Web atom (primary button colors, sizes, specifications and states) and the Accordion molecule for desktop and mobile, above the full set of atom and molecule pages
Organisms, templates and pages

Organisms are relatively complex UI components composed of groups of molecules and/or atoms.

Templates are pages without real content and articulate the design’s underlying content structure. Essentially, they combine organisms into a proper website layout.

Pages are specific instances of templates that demonstrate what the final UI looks like with real representative content in place.

The global navigation organism with the Resources mega menu open on desktop and mobile, above an overview of the website’s full-page templates

3.3.3 Marketing collateral

In our project, marketing assets are the area where a designer can play with his creative thinking within a boundary.

  • Initial assessment
  • Rebranding strategy development
  • Creative development
  • Review and approval
  • Guidelines
  • Rollout and implementation
  • Feedback and iteration

NDA: To respect Freshworks InfoSec policies, I am limited in the display and discussion of this work publicly and can only write about non-proprietary project and product details.

Grid system and components

Grid systems were created for most use-case dimensions like A4, A5, US Letter, 16:9 (portrait and landscape). By downloading the InDesign template, a designer can design fast and efficiently. It also ensures consistency and sticking with brand visual language.

Components were created as text styles and paragraph styles; also, we created a component InDesign file for the designers who are new to the design tool.

Adobe InDesign with the A4 grid-system template open, above four pages of the typography component guide: hierarchy, body, special and highlight text
Brand collateral guidelines

We framed relaxed guidelines for collateral design that can help to ensure consistency in branding, messaging, and design across all marketing collateral, saving time and costs, improving brand recognition, maintaining quality control, and ultimately leading to improved marketing results.

Brand collateral guideline pages for document layout, downloadable grid templates and the primary typeface, with a brochure stand and an open booklet mock-up

3.3.4 Presentation deck

We did a great job on creating a presentation template using Google Slides that is user-friendly for non-designers!

  • Simple and intuitive
  • Clear guidelines
  • Usage of consistent design elements
  • Placeholder text and images
  • Help and support
  • Template test run
  • Feedback and iteration

NDA: To respect Freshworks InfoSec policies, I am limited in the display and discussion of this work publicly and can only write about non-proprietary project and product details.

Freshworks Google Slides template: angled sample slides, an “Instruction to use this deck” slide and a slide marking the safe area for custom content

3.3.5 Social media creative

Social media creative template and guideline that reflects the new branding guidelines of the company and helps to maintain consistency in their social media marketing materials.

This helps the company to communicate effectively with their target audience and build a strong brand identity.

  • Research and analyze
  • Branding guidelines
  • Social media templates
  • Social platform guide
  • Test and review
  • 3 tools template

NDA: To respect Freshworks InfoSec policies, I am limited in the display and discussion of this work publicly and can only write about non-proprietary project and product details.

Freshworks social media creatives: Instagram posts, a webinar post in three colorways and story templates, above a board of template variations in every size
Social platform guide

Not all social media strategies and behaviors are the same. A good Instagram technique does not have to be applicable to LinkedIn. To effectively communicate with their target audience, platform design and strategy must evolve. We simplified the process of instructing designers by creating a social platform guide which has guidelines for LinkedIn, Facebook, YouTube, Twitter, and Instagram.

Pages of the social platform guide: size quick guide, LinkedIn, Instagram, Twitter and YouTube sections, video, carousels, the 20% text rule and do’s and don’ts

3.3.6 Google Display Network (GDN) ads

We produced a Google Display Network (GDN) ads template and guideline by following the steps below, which reflects the company’s new branding demands and helps to maintain consistency in their advertising materials.

  • Research and analyze
  • Branding guidelines
  • GDN ads template
  • Guideline document
  • Test and review
  • Implement the GDN ads
  • Monitor and analyze results
  • 3 tools template

NDA: To respect Freshworks InfoSec policies, I am limited in the display and discussion of this work publicly and can only write about non-proprietary project and product details.

Freshworks Google Display Network ads: Freshdesk and Freshworks banners in every standard size, ad don’ts, the most common display ad sizes, safe margins and CTA buttons

4. User experience

User testing informed UI improvements and website updates

We used user testing to discover areas where we could improve our user experience.
To better convey our new brand identity and story, we made improvements to our website and marketing collateral.

Our process of user testing is as follows:

  • Define the goals and objectives
  • Decide participants
  • Customized test plan
  • Human insight test
  • Collect and analyze data
  • Website heatmap
  • Refine the product
  • Repeat the testing
Before – (2018)
Freshworks homepage in 2018, headed “A fresh approach to customer engagement”, with six product cards, a blue “Freshworks Promise” banner, customer logos and testimonials
After – (2023)
Freshworks homepage in 2023, headed “Hello business impact. Goodbye software bloat.” on a dark hero, with product screenshots, product cards, customer stories and analyst awards

5. Results

Evolutionary approach boosts customer satisfaction and onboarding

Our progressive rebranding strategy turned out a success. We were able to enhance our brand identity without losing current customers.

In fact, the modifications we made to our user experience boosted our customer satisfaction. As our updated brand identity and messaging connected with our target audience, we saw an increase in new customer acquisition.

It’s a
win-win

6. Other highlights

Significant achievements of the project

Note: The numbers below are based on the particular phase of the evolutionary branding.

Design system

Elements organized into design system
350+
Full-width layout components
160+
Grid design system
8pt

Company and product websites

Templates built into the CMS
100+
Pre-built landing page templates
24
Division guides for motion design
5

Marketing collateral

Document layout template
4
Typeface manual guide
3
4 columns, 16 grid fields
4/16

Presentation deck

Presentation deck components
50+
Versions – pitching, marketing purpose
2
Slide templates
85

Social media creative

Platform guide to educate designers
5
Common use-case design templates
30+
Versions designed to match branding
10+

Google Display Network (GDN) ads

Different design tool templates
3
Extensive guide to drive results
1
Variations to match WIP brand guide
6