Joyce Doan / Work / Skalachat Website
AI Customer Service Platform · UI/UX Designer

Skalachat Website

Designed the full website, logo, and design system for Skalachat — a generative AI customer service solution serving retail, hospitality, and financial services businesses.

UI/UX Designer BRANDINGWEB DESIGNWEBFLOWFIGMA
Website
skalachat.com ↗
Focus
Branding · Web Design · IA
Scope
Full Website · Logo · Design System
Platform
Webflow
Verticals
Retail · Hospitality · Financial Services
Year
2024
01 — Context

The Challenge

Skalachat is a generative AI customer service platform that helps businesses respond to customer inquiries automatically — reducing support workload, boosting lead conversion, and driving revenue without additional hiring. The platform serves three distinct industries: retail, hospitality, and financial services, with pricing tiers from $15/month for SMBs up to custom enterprise plans.

The design challenge was twofold. First, the brand needed to be built from scratch — logo, identity, and visual language — for a product that didn’t exist yet in the market. Second, the website needed to convert three very different buyer types (retail operators, hospitality managers, financial services teams) without fragmenting into three entirely separate experiences.

My Role

I owned the full design scope end-to-end: logo design, brand identity, wireframes, design system, and high-fidelity UI across desktop and mobile. This included all solution vertical pages, the pricing page, and the bilingual (English/Vietnamese) site structure delivered in Webflow.

02 — Discovery

Research & Key Insights

AI customer service is a crowded, noisy category. Four patterns shaped how Skalachat needed to be positioned and designed to stand out.

01

Headcount anxiety is the real pain point

SMB owners don't think in terms of "AI automation" — they think in terms of hiring. "Solve up to 70% of your problems, without extra hiring" speaks directly to the anxiety they actually feel, not an abstract technology benefit.

02

Vertical specificity builds credibility

A hospitality buyer doesn't trust a generic AI tool. Seeing their exact problems — multilingual guest support, 24/7 service quality — described specifically signals that the product was built for them, not adapted for them.

03

Pricing transparency accelerates decisions

Most AI platforms hide pricing behind a sales call. Publishing tiers ($15/$25/$35/month) removes a major friction point for SMB buyers who won't book a demo just to find out if the product is in their budget.

04

Demo is the highest-intent action

For a chat-based AI product, the fastest path to conversion is letting the buyer experience the product directly. A demo CTA converts stronger than a signup form because it removes imagination — the user sees the product working before committing.

03 — Design

Key Design Decisions

Decision 01

Anchor the hero on the 70% stat

"Solve up to 70% of your problems, without extra hiring" became the central claim on the homepage — placed prominently above the fold. A concrete number cuts through generic AI marketing immediately and gives a skeptical buyer a specific claim to evaluate rather than a feeling to react to.

Decision 02

Industry verticals as top-level navigation

Solutions were organized by industry (Retail, Hospitality, Financial Services) rather than by feature. This lets buyers self-route immediately — a retail operator clicks Retail and sees order tracking, inventory, and upselling use cases, not a generic feature matrix. Vertical pages have distinct content tailored to each audience's specific language and concerns.

Decision 03

Demo as the primary CTA, pricing as the secondary

The primary conversion action throughout the site is accessing the demo — not signing up. For a conversational AI product, experiencing the product is faster than reading about it. Pricing is surfaced as a secondary CTA for buyers who want to self-qualify on budget before committing to a demo.

Decision 04

Logo built to read as a chat product

The brand mark was designed to reference the chat interface — the product's primary interaction surface — while remaining clean enough to work at small sizes in app UIs, favicons, and social contexts. The name "Skalachat" also needed to connect visually to the Skalaview parent brand without being derivative.

04 — Architecture

Site Architecture

The structure balances broad discovery (Home) with deep vertical specificity (Solutions pages) and supports both high-intent buyers (Demo, Pricing) and research-phase visitors (Resources, About).

Site Map
Home — platform overview and primary CTAs
AI Assistant — core product capabilities
Solutions / Retail — orders, inventory, upsell
Solutions / Hospitality — multilingual guest support
Solutions / Financial Services — automation and compliance
Demo — live product experience
Pricing — tiered plans ($15 / $25 / $35 / Custom)
Resources + About — content and trust layer
Audience Journeys
Retail / Hospitality Owner
Home Solutions Demo
Budget-Conscious Buyer
Home Pricing Sign Up
Research-Phase Visitor
Resources AI Assistant Demo
05 — Foundation

Design System

The design system was built from the ground up alongside the brand identity — logo, color palette, and component library were developed together so the visual language stayed coherent from mark to page.

Figma File Structure
Pages
📄Cover
📄Logo & Brand Identity
📄Design System
📄Wireframes
📄Desktop — Final
📄Mobile — Final
📄Handoff & Specs
Components Built
Navigation + language switcher Solution vertical cards Feature highlight sections Pricing tier table Buttons + CTAs (all states) Chat widget preview UI Footer + contact forms
Foundations
Logo & brand mark Typography hierarchy Color palette + brand tokens Spacing scale + responsive grid
Component States
Default Hover Active Disabled Error & Success
06 — Outcome

Result

Skalachat launched with a brand and website that matched the ambition of the product — clean, credible, and immediately actionable for three distinct buyer types. The vertical solution pages gave each industry audience a tailored experience without fragmenting the overall site structure. Transparent pricing removed a key friction point that most competitors hide behind a sales call.

Building the brand identity and the website in parallel meant the two stayed coherent throughout — the logo, the palette, the UI patterns, and the tone all came from the same creative foundation rather than being reconciled after the fact.

Reflection

The hardest design problem here wasn't any single page — it was serving three industry verticals within one consistent brand without making any of them feel like an afterthought. The solution (dedicated vertical pages within a shared system) worked, but it required discipline to keep the shared components truly flexible rather than just cloning and adjusting. If I were doing this again, I'd define the content model for vertical pages earlier and use it as a constraint during wireframing, rather than fitting vertical content into layouts designed for the generic case.

← Previous Survival Vietnamese Website Next → Mastering Tech Platform
Get in touch

Have a problem worth designing?

Let's talk