Tophatter Rebrand

By Sheng Chu (Senior Visual Designer) and Ali Michel (VP User Experience & Design) at Tophatter.

First Impressions

I first learned about Tophatter in May, 2017 during a job search and to be honest, it wasn’t quite love at first sight. When I looked at the app, I found a dated UI with a quirky logo and muted color scheme. That’s when I knew they could use some help.

When I met the team at Tophatter, I realized that the brand and design didn’t accurately represent the qualities of people who worked there: friendly, smart, reliable, open-minded, and full of energy and excitement. I was amazed at how I had totally changed my perception of the company after speaking with the team in person and realized that others were probably making the same incorrect assumptions about Tophatter, purely based on its design and branding.

The Process

At the time I joined the team, Tophatter was working with a creative agency to help define the “personality” of our core identity. The components of that were brand pillars or attributes, along with a mood board, to tell a consistent story about who, and what Tophatter is. That foundation really helped us to focus our efforts while conceptualizing and refining the logo and color scheme.

Brand Pillars

• Magical: Playful, Thrilling, Lively. NOT relating to magic. Our “secret sauce”.
• Affordable: Accessible, Empowering, Achievable. NOT stylish or high-end.
• Dependable: Reliable, Trustworthy, Approachable. Professional-looking, NOT deceptive, game-like or silly.

Mood Board

The goal of the mood board is to capture the essence of the brand in the form of images and taglines. We used it to inform some of the colors we selected for the color scheme as well as the personality of the logo.

After the team defined the core identity of the brand, the agency proposed a few different logo concepts and had started the process of refining those based on feedback from the team. At the time, I was offered the choice of creating new logo concepts from scratch or proposing variations or refinements to the agency’s designs. This provided me with an interesting opportunity to collaborate and compete with the agency at the same time.

During two weeks of intense brainstorming, I had created and refined dozens of logos. And one of the ones I had created ended up being the team’s favorite. Why was one of my logos picked over the agency’s? I believe the main reason was that I was able to work closely with key internal stakeholders to understand more fully the personality they wanted to convey and iterate more quickly than the agency because I had a faster feedback loop being “on the inside”.

Top Logo

The selection and refinement process of the logo was entirely based on the brand pillars that we wanted to convey:

Magical

The “hidden” exclamation mark. The idea sparked when someone mentioned the thrill of discovery. If you’ve ever shopped in a mall, you’ve probably felt the excitement of finding a deal on something you didn’t realize you wanted until you saw it. The exclamation mark represents that excitement, and it’s somewhat hidden like the treasures one might discover while shopping on Tophatter.

Affordable

The smile. We didn’t want to be stylish or high-end, but more like a friendly and welcoming neighborhood shop where you can always find something within your budget.

Dependable

The typeface. While the hat icon part of the logo is on the playful and fun side, we customized the font to create a sense of reliability and dependability. The typeface itself leans towards the wider side to represent stability, the bold TOP looks strong and reliable, and the lowered crossbar on the H, A, E & R, makes the logo appear ever more steady and firm.

A/B Test

In order to test the impact of the new color scheme and logo, we changed the color scheme and logo on the website only to make sure the new colors and assets didn’t “break” anything. We built an A/B test framework to assign new browser sessions to either the previous design or the new design, and measured the impact to registration rate, bid rate, and payer conversion rate.

Overall, the results for both new and return users was flat, which meant that we could safely move to the new design without worrying that a drastic change in look and feel would tank the business. Which was a great relief, since we didn’t have a backup plan in case people hated the new look.

Key Takeaways

The result of the rebrand was considered a success by all in terms of both accurately conveying our brand as well as bringing together an entire organization in support of a new logo, look & feel. This hadn’t been the case with past rebrands.

Here’s what we did right this time around, according to folks who have been around Tophatter a lot longer than I have:

Define brand pillars.

It is essential for maintaining both focus and alignment throughout the process. At any point during the decision-making process, people can usually agree on whether something matches the brand pillars even if it doesn’t appeal to everyone’s sense of style.

Work with a small team.

It’s helpful to bounce ideas off others but important to have a small group to shorten the decision-making process and not bring too many opinions into the room. We had a very small group of key stakeholders (decision-makers), including the co-founders Ashvin and Chris.

In addition, we formed a slightly larger group of internal team members with whom we shared new concepts and from whom we requested feedback before making a decision. But those team members weren’t involved in making the final decision.

Go for quantity during ideation.

Try out all kinds of options/ideas, and if there’s one idea you think has potential, circle back and don’t necessarily give up on it if it doesn’t get picked in an early round of cuts — it might have great potential.

Go for speed.

The quicker the turnaround on concept creation and feedback, the faster and more successful the selection process.

Communicate frequently.

We were diligent about communicating both with a small teams of reviewers and decision-makers, and with the broader organization. This was perhaps the key reason the logo was well-accepted by the entire company. The brand lead documented the process of selecting the final logo designs, explaining every decision that was made along the way and why, using logic to rationalize what can be seen as a subjective process. By the time a final logo was selected, nobody was surprised or confused by the decision.

Many thanks to everyone on the Tophatter team for their great work. The rebrand would not have been so smooth or successful without your feedback, support and insights. This was a challenging and rewarding process, and I look forward to the next adventure!

About Tophatter

Tophatter Inc was founded by Ashvin Kumar (CEO) and Chris Estreich (CTO), and launched in January 2012. The company has raised $35M to date from Goodwater Capital, CRV, and August Capital. The company has 75 employees globally, and is actively hiring at its offices in Silicon Valley and Shanghai. For more information about Tophatter, please visit: http://www.tophatter.com/about.