Desktop application
Design system for Olark's AI chat and chatbot software.
Olark helps teams track leads, drive sales, increase conversions, and deliver great service with real-time visitor context: login, location, purchase history, cart contents, so every chat can feel personal.
- Lead Product Designer
- React, Typescript, Figma, ProtoPie
- UI design & Design system
- Information Architecture
Drea
dreaorvile@skn.co
◍ New York, USA
utm_source=facebook
Overview
A decade-old product, redesigned from the system up.
Olark had been around for nearly a decade; the customer-facing UI hadn't kept pace. I worked embedded with Olark's product and engineering group as lead product designer, starting not with screens, but with the system underneath them.
Olark helps teams track leads, drive sales, increase conversions, and deliver great service with real-time visitor context, so the redesign had to serve daily, high-volume workflows, not a marketing page.
Foundations
The language behind every conversation.
Colour, type, radius, and shadow: each token carries an accessibility contract and a clear job, so the product stays legible and consistent from the inbox to a transfer modal.
Primary palette
Storm carries body text in chat cards and messages, Cobalt drives primary actions, headings and identifiers, and White holds contrast against light neutrals.
Secondary palette
Purple, red, yellow, green, and blue: each chosen to give users meaningful, at-a-glance feedback across the product.
Light neutrals
Subtle backgrounds for interactive states: hover, disabled, or gentle secondary attention, used across buttons, fields, tags, and dividers. They keep a white layout warm and clean.
Expressions
Derived from the primary and secondary palettes for small pieces of information: tags, channel indicators, blank avatars, and badges. Pair with Storm text for the highest contrast.
Typography
We use Noto Sans for all product typography: versatile, legible, and friendly. Keeping to logical weight hierarchies makes the UI easy to scan.
Aa
Regular 400
Use for
- •Body text
- •Secondary buttons
- •Selected conversations
- •Time indicator
- •Secondary identifier
Aa
Medium 500
Use for
- •Sub headings
- •Unread conversations
- •Tags
Aa
Semi-Bold 600
Use for
- •Headings
- •Primary buttons
- •Primary identifier
Border Radius
Kept to three sizes. 4px softens small items, 8px gives larger elements structure, and 12px is reserved for elements at least 40px tall.
12px
- •Chat text container
- •Search box
- •Text input (message container)
8px
- •Badges
- •Modal Dialog
- •Flags
4px
- •Secondary buttons
- •Text Inputs
- •Drop Down container
- •Tool Tips
- •Hover states (shortcuts, drop downs, visitor history & info)
Drop Shadows
Every shadow is a percentage of Cobalt (#3D3683). Blur, X and Y flex with the element’s size — smaller elements get darker, tighter shadows.
Message container
box-shadow: 0px 0px 10px 0px rgba(61,54,131,.15)
Drop Down
box-shadow: 0px 3px 10px 0px rgba(61,54,131,.15)
Button
box-shadow: 0px 2px 10px 0px rgba(61,54,131,.25)
The system
Tokens, components, and an AI-ready chat surface.
Color, type, and spacing tokens set the language; a React component library made it real. The new system carried Olark's chat and chatbot software into its AI era without losing ten years of customer trust.
Foundations, applied
The tokens, composed into the product.
Every component is built from the same colour, type, radius, and shadow tokens — from the status bar and conversation cards to alerts, modals, and the keyboard-shortcut cheatsheet.
Status header
Contact header
Conversation cards
Chat bubbles
Alerts — bold
Hey, did you know…
This alert needs your attention, but it's not super important.
Good news, everyone
Nothing to worry about, everything is going great!
Good news, everyone
Pay attention to me, things are not going according to plan.
Uh oh!
You need to take action, something has gone terribly wrong!
Alerts — light
Title
Title and actions are optional. Toggle their visibility as needed.
Title
Title and actions are optional. Toggle their visibility as needed.
Title
Title and actions are optional. Toggle their visibility as needed.
Title
Title and actions are optional. Toggle their visibility as needed.
Timeline & channel breaks
Modals
Keyboard shortcuts
Message
Navigation
View
The screens
Design System & Feature Explorations
Design System Foundations
A shared visual language built in Figma covering color, typography, containers, and chat primitives, the building blocks engineers translated into production CSS.
Empty States
Designing for the moments when nothing is happening yet. Each state guides the agent toward action, whether they're offline or waiting with no active conversations.
Shortcuts
Canned responses and quick actions that save agents time during high-volume chats. Explored expanded, filled, and dialogue states to keep the interaction fast without losing context.
Agent Transfer
Handing a conversation to another agent without losing context. The flow supports active transfers, internal notes, and annotated handoffs so the next agent picks up seamlessly.
Dark Mode
A full dark theme exploration to reduce eye strain for agents working long shifts and to align with modern OS-level preferences.