CrosChat
AI Employee

Overview

As the sole designer at CrosChat, I led the UX/UI design for its AI-Powered Employee platform. My work focused on creating seamless web interfaces and chatbot interactions, enhancing user engagement, and optimizing workflow efficiency through AI-powered automation.

Timeline
Fall 2024 - Current
Responsibilities
UX/UI Design
Web Design
Software
Figma

Design Challenge

Define and optimize the interaction model for AI Employees while helping brands effectively present their AI-powered solutions. This involves crafting intuitive layouts that clearly communicate product capabilities, streamline user onboarding, and support seamless updates for future iterations.

Responsibilities

01
Website Design & Design System

Jump to Website Design

Jump to Website Design

02
Chatbot Cross-platform Interaction

02
Chatbot Cross-platform Interaction

Jump to Chatbot Design

Jump to Chatbot Design

Business Background

AI Employees revolutionize business operations by automating tasks, reducing costs, and enhancing efficiency. Unlike traditional employees, they provide scalable, intelligent support with minimal overhead.

Key Advantages
Cost Reduction
Cost Reduction

Eliminates expenses related to hiring, training, and salaries.

Efficiency Boost
Efficiency Boost

Automates repetitive tasks, allowing human employees to focus on high-value work.

24/7 Availability
24/7 Availability

Operates continuously without breaks, ensuring uninterrupted service.

Seamless Integration
Seamless Integration

Works with existing business tools, enhancing workflow automation.

Consistency & Accuracy
Consistency & Accuracy

Delivers reliable and error-free performance based on data-driven insights.

Scalability
Scalability

Adapts to business growth without the need for additional hiring.

Product Positioning

By aligning the core values of AI-powered employee solutions with business needs, we define CrosChat’s product positioning as Smart, Scalable, and Seamless, ensuring efficiency and adaptability.

Smart
Smart
Scalable
Scalable
Seamless
Seamless

Design Goals

01 Clarity & Accessibility

Clear information hierarchy, intuitive navigation, easy-to-understand content

02 Seamless Engagement

Effortless signup, quick access to demos, user-friendly exploration of AI features

Effortless signup, quick access to demos, user-friendly exploration of AI features

03 Visual Presentation

Cohesive visual identity, modern aesthetics, trust-enhancing design

Web Design

In the early stages of this project, the focus was on quickly building a website to showcase product features, pricing, and functionality, helping to reach more early users.

1.1 Brand Attributes

CrosChat embodies a futuristic, intelligent, and approachable identity, designed to make AI interactions feel seamless and natural.

1.2 Website IA map

Our IA map is structured into three key parts: the Product Page, highlighting features and functionalities; the Profession Page, categorizing industries with real-world examples; and the Pricing Page, detailing service plans and options.

1.3 Product Page Design

1.4 Product Page Design

1.5 Style Guide

This ensures visual consistency with a structured layout grid, a cohesive color system, and a clear typography hierarchy, creating a seamless and intuitive user experience.

1.5.1 Layout Grid

1.5.2 Color System

1.5.3 Typography

Aa

Avenir

Header

Page titles

black

56pt

Title 1

Section titles

heavy

48pt

Title 2

Tabs, titles

black

36pt

Aa

Inter

Headline

Info paragraphs headline

Medium

24pt

Body

Station descriptions

Regular

20pt

Caption

Footers, Time stamps

Regular

16pt

@ coco Zhenke Chen 2025

Design Brightly, Live Boldly. 💫

@ coco Zhenke Chen 2025

Design Brightly, Live Boldly. 💫

@ coco Zhenke Chen 2025

Design Brightly, Live Boldly. 💫

@ coco Zhenke Chen 2025

Design Brightly, Live Boldly. 💫

Chatbot Design

Currently focusing on designing the chatbot’s interaction model and user experience. This includes designing the business-facing dashboard for setup and management, as well as the end-user interface where the bot engages with customers on business websites.

2.1 - Onboarding for Seamless Bot Setup

I designed a real-time preview onboarding system for bot setup, placing inputs on the left and the chatbot on the right for an intuitive flow. This ensures users can easily customize their AI bot and see instant updates, making the setup process smooth and engaging.

Step 1 - Set Up Chatbot Basic

Step 2 - Add Knowledge Base

Step 3 - Customize Your Bot Style

Generating Gradient Bot Icons from a Single Theme Color

To keep the setup simple, users select one theme color, which is then adjusted algorithmically to create a smooth gradient for the bot icon. This ensures depth, contrast, and consistency while maintaining the chosen color scheme.

// Adjust Theme Color by shifting Hue -20°
function adjustColor(hex) {
  let hsl = hexToHSL(hex);
  hsl.h = (hsl.h - 20 + 360) % 360; // Shift hue
  return hslToHex(hsl.h, hsl.s, hsl.l);
}

// Example
const themeColor = "#F02F3C";  
const adjustedColor = adjustColor(themeColor); // Result: #EF2F7C

console.log("Theme Color:", themeColor);
console.log("Adjusted Color:", adjustedColor); // #EF2F7C

2.2 Basic Flow

Welcoming + Preset questions

Welcoming + Preset questions

Input a question

Input a question

Generating Answer

Generating Answer

Long Press Answer to

Re-generate / Share / Copy

Long Press Answer to

Re-generate / Share / Copy

Long press question to
Edit / Copy

2.3 Send File

Select location

Uploading

Finish uploading and input text

Finish uploading and input text

Generating Answer (file)

Output a file

2.4 Activate Chatbot

2.5 Chatbot LiveSpeak

Listening…

Thinking…

Speaking…