Re-envisioning CoderPad's identity

Re-envisioning CoderPad's identity

Overview of managing an 8 month long cross-functional collaborative project

Why re-branding was necessary?

Marketing to 95% of prospects who are not actively searching for a solution, we needed a memorable brand so that when people start searching they come to us

We operate in a competitive market with sophisticated up-market buyers who generally view all the companies as the same

The vision to bring CodinGame and Coderpad products under the same umbrella also required a brand consolidation.

The team

The project was done in collaboration with the marketing team and involved many cross-team collaborations to cover different aspects of the work.

My role
End-to-end planning and execution

The project was intended to change CoderPad’s entire visual presence which required a new brand architecture, a complete redesign of the marketing sites, ads, and offline materials as well as products’ alignment with the new brand.

In this project, I worked with the company’s CMO to lay down the project plan, governance, communication requirements and executed the plan through launch.

Alignment
Bringing everyone on the same page

This project had a high impact on the business so it was important to engage and include the company’s executive team in the process. I helped the brand designer to meet with the company’s leadership team and conduct two workshops to collectively decide about our new brand archetypes.

characteristics drawn from those archetypes

Disruptive, progressive, confident and assured, bold, competent, wise and unconventional.

Outlaw and Cage were selected because they were inline with our company values.

Following the selection of the archetypes, we worked on the brand color. Marketing to audiences that are not actively searching for a product, we tried to pick a color that aligned with our archetypes and be memorable and make us stand out in the competition.

Brand Elements

We possessed some brand equity. When it came to think about the logo, it was crucial to keep the familiarity from the former one while harmonising it with our new direction.

We felt pretty good about the design but we didn’t leave it to chance. We tested the icon with 40 developers to get their reaction and ensure the adjustments to the </> symbol will not detract from the programming association. Here is what we heard:

Brighter color

It’s bolder

Stands out more and brighter

It looks neater

Very clear

It’s more coherent and clean

More sleek

Long leg not good

Represents web developer icon

I like it more because it has symmetry and it looks more professional

Seems more contained. Logo B just looks like someone typed something out of a keyboard and called it a day. A is “cleaner” and would be easier to use in marketing materials.

Seems bolder and immediately relates to coding

Balancing team dynamics

Working with an external design team, it was important for the internal team to feel they were a part of the process and own the new direction. I kept them informed, collected their feedback, and even had them directly participate in the work. The internal team helped design the product icons. The collaborative process became a fun and team-building exercise and resulted in a new successful set of icons.

Inclusivity in branding

When you have designers with innate creativity, you know that you can get the right result, even if it takes a few rounds of try. In this project, in addition to aligning our illustration styles with the new brand, I ensured we showed diversity in our characters, and inclusivity is baked into our guidelines.

Skin tones

Keep them diverse, Use proportions to make them fun but not silly.
Design mostly with shapes. Use lines to accentuate expressions and add details.

Going beyond the visuals

Having a trained copywriter on the team allowed me to take our branding work beyond just the visuals. We created copywriting guidelines that followed our new brand direction and defined the tone of voice in both marketing materials and products.

Clear

Just as our product is known for being simple and easy-to-use (“It just works” appears many times in our G2 reviews), we aim to keep our communication clear and to the point. We’re not trying to be fancy or overcomplicate things. We use the words our customers would use when talking to colleagues. We’re not dumbing things down but we’re also not using a more complicated word when a simpler one will suffice. 

Just as our product is known for being simple and easy-to-use (“It just works” appears many times in our G2 reviews), we aim to keep our communication clear and to the point. We’re not trying to be fancy or overcomplicate things. We use the words our customers would use when talking to colleagues. We’re not dumbing things down but we’re also not using a more complicated word when a simpler one will suffice. 

Write in the active voice where possible.

Delete words that don’t add anything to your sentence.

Embrace brevity.

But vary sentence length.

Watch out for multi-word phrases that can be replaced with one word, e.g. “gave an assessment” > “assessed”. 

Identify negatives and rephrase them with a positive. For example, “If a candidate is not able to take the test.” > “If a candidate is unable to take the test.”

  • Write in the active voice where possible.

  • Delete words that don’t add anything to your sentence.

  • Embrace brevity.

  • But vary sentence length.

  • Watch out for multi-word phrases that can be replaced with one word, e.g. “gave an assessment” > “assessed”. 

  • Identify negatives and rephrase them with a positive. For example, “If a candidate is not able to take the test.” > “If a candidate is unable to take the test.”

Tips for writing clearly

Tips for writing clearly

Real

Trust and transparency are two of our company values. We are a no-BS company. We will “keep it real” by being honest and authentic. This means we have a human voice and don’t exaggerate. We don’t use marketing fluff. Our product is great and we can explain why without any hyperbole. We don’t need to oversell, just tell it like it is.  We write as you’d speak between colleagues. 

Trust and transparency are two of our company values. We are a no-BS company. We will “keep it real” by being honest and authentic. This means we have a human voice and don’t exaggerate. We don’t use marketing fluff. Our product is great and we can explain why without any hyperbole. We don’t need to oversell, just tell it like it is.  We write as you’d speak between colleagues. 

Be honest about mistakes or limitations.

Use the words we and our audience use everyday at work.

Apologize when necessary.

Use concrete examples.

Avoid using generic or clichéd language

  • Be honest about mistakes or limitations.

  • Use the words we and our audience use everyday at work.

  • Apologize when necessary.

  • Use concrete examples.

  • Avoid using generic or clichéd language

authentic but not contrived

clear but not oversimplified

confident but not arrogant

expert but not condescending/stuffy

engaging but not overwhelming

helpful but not intrusive

informal but not unprofessional

smart but not stuffy

  • Authentic but not contrived

  • Clear but not oversimplified

  • Confident but not arrogant

  • Expert but not condescending/stuffy

  • Engaging but not overwhelming

  • Helpful but not intrusive

  • Informal but not unprofessional

  • Smart but not stuffy

Tips for writing in an authentic voice:

Tips for writing in an authentic voice:

The CoderPad  voice is:

The CoderPad  voice is:

Bold

We take a stand. Our company mission is to create a more inclusive and strong tech community and we are not afraid to challenge our users and the industry to do better. We challenge the status quo. We can be clever but we’re not trying too hard. We’re never pretentious or communicating in a way that could exclude others. We aren’t mean - but we say what we mean and mean what we say.


We use strong and compelling words and phrases. Our language reflects our company value of impact. We communicate with certainty and conviction to have an impact. 

We take a stand. Our company mission is to create a more inclusive and strong tech community and we are not afraid to challenge our users and the industry to do better. We challenge the status quo. We can be clever but we’re not trying too hard. We’re never pretentious or communicating in a way that could exclude others. We aren’t mean - but we say what we mean and mean what we say.


We use strong and compelling words and phrases. Our language reflects our company value of impact. We communicate with certainty and conviction to have an impact. 


Be direct and confident

Avoid hedge words like “maybe,” “possibly,” “potentially,” “can,” etc.

Use strong words (ie. excellent and challenging) instead of relying on weak modifiers (ie. very good and really hard)

Be honest

Be concise

Omit needless words. Don’t say in ten words what you can say in two.


  • Be direct and confident

  • Avoid hedge words like “maybe,” “possibly,” “potentially,” “can,” etc.

  • Use strong words (ie. excellent and challenging) instead of relying on weak modifiers (ie. very good and really hard)

  • Be honest

  • Be concise

  • Omit needless words. Don’t say in ten words what you can say in two.


Long and/or complex words and sentences

Multiple words with the same meaning

Unnecessary modifiers

Clunky common expressions

Talking around concepts or ideas

Tips for writing boldly

Tips for writing boldly

Avoid

Avoid

  • Long and/or complex words and sentences

  • Multiple words with the same meaning

  • Unnecessary modifiers

  • Clunky common expressions

  • Talking around concepts or ideas

Bringing it together in the UI

Updating the UI design required several smaller decisions around typography, visualization, layout, and more. Here are some examples of the final design.

Notes from customers who scaled and standardized their technical hiring and improved the candidate experience too.

Hear directly from people in the know.

4,000+ happy engineering teams

use CoderPad

Login

Sign up for free

Get a demo

For Candidates

Platform

Pricing

Navigation on white

How can we help?

Try searching for lorem ipsum

Popular topics: lorem, ut nesciunt, ut totam et

Login

Sign up for free

Get a demo

For Candidates

Platform

Pricing

Login

Sign up for free

Get a demo

For Candidates

Platform

Pricing

Login

Sign up for free

Get a demo

For Candidates

Platform

Pricing

Discuss technical problems together, then sketch them out on our digital whiteboard.

Evaluate systems design skills

Collaborative IDE

Interviewing Tools

Multi-File Frameworks

Digital Whiteboard

Code Playback

Create interview experiences bound only by your team’s imagination

Amazing, Interactive Technical Interviews

Excepturi in iste consequatur sint maxime a maiores possimus dolorem illo autem.

Request an integration

Looking for something?

Greenhouse

iCIMS

Lever

SmartRecruiters

GoodTime

Google Chrome Calendar ext.

Prelude (Calendly)

Ashby

Integrations

Voluptatum tempora similique

Molestiae doloribus

Et iste quo

Et rerum

Rerum blanditiis eaque

Blanditiis

Voluptatum tempora similique

Molestiae doloribus

Et iste quo

Et rerum

Rerum blanditiis eaque

Possimus

Voluptatum tempora similique

Molestiae doloribus

Et iste quo

Et rerum

Rerum blanditiis eaque

Getting started

All categories

Search topics

preset roles

90+

technical skills

70+

validated questions

4K+

Accurately benchmark skills with our library of questions organized by role and seniority

Tap into an extensive question bank or create your own

Content Layouts

Language agnostic questions

Screen for problem solving not syntax

Second chances

On the off chance they have an off day

Practice test runs

Showcase their talent, not their stress

Realistic, VSCode-based IDE

Code in an environment used every day

Eveniet excepturi aut quibusdam et voluptatem eos quibusdam aperiam est iusto dolores id atque dicta.

Loved

Read the case study

“No other platform that we evaluated came close to CoderPad in providing the overall experience we wanted for both our candidates and interviewers.”

Vignesh Ramesh , Engineering Manager, Yext

Increased the speed of the hiring process and improved the quality of engineers

Fair

CoderPad allows them to conduct 1,500+ interviews per year

Real

Existing solution could not meet the demands of hiring surge

Fast

CoderPad Supports a Post-IPO Hiring Surge at Yext

Submit

Question 3 of 8

00:58 / 12:00

Arguments

Answer

JavaScript quiz -420 pts 10:00

Python quiz -250 pts 10:00

Total points:


Total questions:


Total time:

~1900

~18

48 to 96 min

Medium difficulty

of developers

98%

Better than

6:16

Candidate is outside

of the environment.

23 / 100 pts

Simplified graphics

& data visualization

Release plan

Releasing anything after months of work is a big deal but it’s especially important if has a direct impact on the business performance. 1/3 of our business was coming from self-served customers through the marketing site. I wanted to ensure the changes would not impact any of the metrics negatively. I planned 3 experiments before making the new brand generally accessible.

The numbers in the experiments showed slight improvements, a positive indicator but not statistically significant.

The new brand was made public after 8 months of hard work 🎉 🍾

Besides giving the company a refreshed identity, I was so proud of how I was able to navigate this complex, collaborative task and in the end, the team came out with stronger ties to each other and happy about what they could accomplish together.

Schedule a call

Let’s talk?

About your product and how I can help.