Desktop application
Design system for Olark's AI chat and chatbot software.
Olark helps teams track leads, drive sales, and deliver great service with real-time visitor context: login, location, purchase history, and cart contents, so every chat feels 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, but its 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. Because agents live in this product all day, at high volume, the redesign had to serve real daily workflows, not a marketing page.
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. Together they carried Olark's chat and chatbot software into its AI era without spending down ten years of customer trust.
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. I 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 to reduce eye strain for agents working long shifts and to align with modern OS-level preferences.