← Back

HotKey Group - Brand Identity & Website

Building a visual foundation and a sales-driven website for a fast-growing B2B SaaS company

Visual Identity UX/UI B2B SaaS Brand Design Product Website CJM

Project Goal

HotKey Group is an official Meta partner building communication tools for businesses - WhatsApp Business API, chatbots, and messaging automation.

When I joined as the sole designer, the company was at an inflection point: growing team and first big clients, shifting from MVP to a mature product.

old-design

But the visual identity still looked like a startup side project, and the website didn't support the sales process at all.

My job was to build both from scratch - a brand that reflects who HotKey actually is now, and a website that turns visitors into clients.

Part 1: Visual Identity

The Challenge

The old branding didn't communicate anything about what HotKey does or how they think.

As the product matured and the client base grew, the gap between how the company operated and how it presented itself became a real problem - especially in B2B, where trust and credibility are built before the first call.

old-logo

The Approach

I started with what defines HotKey at its core and identified three conceptual pillars

Logo approach

These three layers shaped the logo concept, which I developed through multiple iterations until the final mark captured all three ideas in a single, clean symbol

Logo concept 1 Logo concept 2

Funny concepts

The Result

The new identity positions HotKey as what they are - a solutions company. The logo and visual system are built on directness, logic, and technical clarity.

Logo result
Logo visual dark Logo visual light

I defined the full visual language: logo usage, color palette, and typography - creating a foundation that every future touchpoint would build on.

Color palette

Color palette

Typography

Typography

Part 2: Website

The Challenge

HotKey's old website was essentially a placeholder. For a B2B SaaS company where the website is the primary sales tool, this meant lost leads at every stage. The site needed to do real work: explain a complex product clearly, build credibility, and guide potential clients toward a conversation.

The challenge

My Role

Sole designer. I owned the full process end to end - from analytics and CJM mapping through prototyping, UI design, and development coordination to responsive adaptation.

I mapped out the customer journey and structured the site around how B2B buyers actually make decisions:

Main

value proposition, positioning, key differentiators

Customer Journey

how the product fits into a client's workflow

Product Features

what HotKey actually does, in concrete terms

Social Proof & Offers

trust signals, client results

Contact

conversion point with minimal friction

Key Decisions

CJM Demo Live examples Smart automation Official Meta partner
Demo video

The site is structured as a funnel - each section answers the question a B2B buyer has at that stage of the decision process.

Show before tell. The very first thing a visitor sees on the main page is a motion design demo video - the product in action before a single word is read.

The site opens with the customer journey loop. Before showing any product UI, we demonstrate the value: how WhatsApp helps businesses save resources, find new revenue, and build loyalty - mapped across real client touchpoints. This is what makes a potential client care enough to keep scrolling.

Demonstrate the value

Below that, the customer journey loop unfolds as an interactive slider: each stage of the client lifecycle - from awareness to re-activation is paired with a real WhatsApp conversation showing how the platform works at that touchpoint

Awareness Lead generation Sales funnel Sale Post-sale Re-activation

A second slider goes deeper, presenting specific use cases - triggered messages, chatbot flows, NPS surveys, product galleries, CRM data collection - so the visitor sees not just the concept, but the actual mechanics.

Features grouped by workflow. The desktop platform section is split into meaningful blocks - messenger, bulk messaging, chatbots - each shown in context rather than as an abstract feature grid. This mirrors how managers actually use the product daily.

Messenger interface Mass mailing Chatbots

Trust is layered. Security, access control, analytics, cost management, and the personal manager option come when the buyer is already interested and needs reassurance on operations. Client testimonials follow, providing social proof right before the final step.

Testimonials Everything is under control

Every page leads to one action. The entire site funnels toward booking a meeting. The contact form is the natural destination after every argument has been made.

Footer

The Result

The full website - desktop and mobile, from first screen to contact form.

Website screen 1 Website screen 2
Website screen 3 Website screen 4
Impact

Impact

I joined HotKey when it was a team of 5 with 20 clients. During my time as the sole designer - building the brand, the website, the app, and all marketing materials - the company grew to 12 people and 100+ clients.

The brand identity and website were the foundation that made that scaling possible: a credible, professional presence for a product that was ready for it.

HotKey Cinema

Thanks for watching