Leapbox AI Platform
UX&UI Design

Dashboard Dashboard

“Leapbox是一家面向全球用户的AI实用工具
无需代码,帮助构建团队及个人的私人AI助理。”

前期调研

我对产研团队、市场团队、CEO 进行了多次客户访谈,了解他们对 Leapbox 平台未来的期待。

从不同角色的视角出发,我们梳理了品牌定位、产品形态与用户使用场景,为后续的产品体验与界面设计奠定方向。

01

“CEO:我们希望在 AI 训练工具中处于领先地位,树立全新的品牌形象,降低用户使用人工智能门槛,快速占领市场。”

02

“产品研发团队:让用户更容易构建私人 GPT,无需代码,一键上传知识库训练 AI,在操作过程中有清晰的反馈感知,并具备强大的数据处理能力。”

03

“市场团队:我们面向国际市场的团队,全球化是我们的目标,北美市场是我们的起点。服务个人、团队和企业用户,支持多语言使用。”

Branding
品牌升级

“需要加强品牌形象,强化工具属性,与通用型 AI 大模型形成差异化记忆。”

Platform
无代码 AI 工具平台

“让用户操作变得简单直观,操作中能获得即时反馈,对 AI 训练过程有清晰的掌控感。”

User Scenarios
用户场景

“提供个人知识库管理、团队知识共享、智能客服等多种场景,贴合北美等市场的用户行为习惯。”

核心诉求
LEAPBOX.AI

构建企业知识库私有化 GPT,无需代码。

在个人和团队的知识管理方面取得飞跃,随时随地获得即时回复。

品牌升级 北美用户的使用习惯 清晰的用户使用反馈 快速的占领市场 定制的高级 AI 智能助手 助力垂直行业的 AI 调研工具
Professionalism
专业性
Usability
易用性
Efficient
高效的
Customer
用户感知
设计思路

UX Strategy

用户体验策略

EFFICIENT

Users Can Efficiently And Effortlessly Complete Tasks.

用户可以高效的、轻松的完成任务。

User Flow

梳理用户流程

用户创建项目、订阅、知识库上传与管理、训练 AI、集成是用户的核心流程。

Create/Manage
Project
创建/管理项目
Subscription
订阅
Knowledge base
知识库
Training/Preview
AI
训练/预览 AI
Integration
集成

Primary Flow

登录验证·项目管理·订阅·知识库管理·训练/预览AI

Primary Flow Diagram

The user enter for the first time

用户第一次进入 - 注册登录·新建项目

Secondary Flow Diagram

Secondary Flow

次要流程 - 首页 · 邀请用户 · 集成 · 个人中心

First Time Flow Diagram

Interaction

页面交互

三列的布局—左侧方便创建项目·中间区域管理·右侧实时预览

Interaction Diagram

Projects Manage

次要流程 - 邀请用户 · 集成 · 个人中心

Projects Manage Diagram Projects Manage Diagram 2

Subscripiton

订阅交互

Subscription Diagram

Knowledge Base

用户知识库上传与管理

Knowledge Base Diagram

Message/Integrations

生成式聊天·集成

Message/Integrations Diagram

Personal Center

全局项目管理·个人中心

Personal Center Diagram 1 Personal Center Diagram 2

UI Design

页面UI设计

Grid System · UI · Font · Color · Icon

网格系统 · 字体选择 · 颜色 · UI · Icon

Grid System

网格系统

可横向滑动 →

Grid Default
Grid Variant 2
Grid Variant 3
Grid Variant 4
Grid Variant 5
Grid Variant 6

Dashboard UI

后台首页

Dashboard UI
Knowledge Base

Knowledge Base

知识库管理页面

Message

用户对话页面

Knowledge Base
Knowledge Base

Integrations

集成页面

Settings

项目配置页面

Knowledge Base
Knowledge Base

Users

用户管理页面

Manage Account

账号管理

Knowledge Base
Knowledge Base

Subscription

订阅页面

Users

用户管理页面

Knowledge Base
Knowledge Base

Manage Account

管理账号

New Project

新建项目

Knowledge Base
Lightmode
Darkmode
Font

Montserrat

Montserrat Light
Montserrat Regular
Montserrat Midium

选用Montserrat 作为与品牌相匹配的视觉字体

Montserrat具有简洁、时尚的特点

无论字号大小如何变化,都易于用于标题和正文文本

而中文字体选择跟随windows/mac系统字体

Primary Color
Hex: #00DE5A
RGB: R0 G222 B90
Pantone: Pantone 7480C
CMYK: C69 M0 Y74 K0
Secondery color
Hex: #00DE5A
RGB: R0 G222 B90
Pantone: Pantone 7480C
CMYK: C69 M0 Y74 K0
Primary Color
Secondery color
Primary Color
Secondery color
Primary Color
Secondery color

ICON Guideline

平滑的圆角图标,更自然

Icon Guideline

LEAPBOX.AI PLATFORM UX/UI DESIGN

从 0 到 1 全流程设计

Jul. 2023 — Aug. 2023

Client

leapbox.ai

DK CREATIVE

Research / LiuYinKui

User Flow / LiuYinKui

UX/UI Designer / LiuYinKui

Client PM / Galina

Client Developer / Henry, Roger