Laivly | SIDD (System Integrated Distributed Dashboard)
Discover the Shape of AI
for Contact Centers
Overview
AI copilot for agile, scalable customer service.
My role
UI design
UX research
Visual design
cross-function partner
Product manager & director
Development lead
Marketing VP
duration
2020 Q1- 2023 Q4
Business impact
assistant
SIDD is an AI-powered automation platform for contact centers
bolt
SIDD improves accuracy and reduces time cost for call & email response.
emoji_events
The award-winning success of SIDD benefits agents, call conters and clients.
Boosting productivity
Positive user feedbacks
problem space
Automating CX workflow with AI-powered teck stack
Our Users: Customer Service Associates/Agents (CSA)
support_agent
Agents answer calls, respond to emails and live chat, and process inquiries.
speed
Agents work in fast-paced, highly pressured routine.
lan
Agents are trained to work in teams with hierarchies.
Agents pain points
psychology_alt
“How do I capture info I need and NOT get overwhlemed?”
follow_the_signs
"How do I navigate through edge cases with best practice?"
groups
"How do I communicate with my team properly?"
I reshaped the old service process with understanding of N8N model
local_fire_department
Agents used to be overwhelmed by info and lost in the communication
local_fire_department
SIDD digests info for agents with checklist and action items.
local_fire_department
AI suggestions help agents generate well-informed and appropriate response.
Old process vs new process
New process based on N8N model
Diverse CX scenarios call for system agnostic solution.
devices
Agent's tech stacks vary depending on their scenarios, from answering calls, responding to emails, and filling out forms.
travel_explore
A good AI-copilot should perform upon, and empower any system/tech stack involved
tech stacks for calls and forms
tech stacks for emails
exploring layouts based on scenarios
Switch between layouts
Process & discovery
My collaborative, reseach-based process
I collect data from users and cross-funtion partners.
format_quote
We collect qualitative insights from interviews and feedback.
analytics
We collect quantitative data from analytics and business metrics.
local_fire_department
We identify client requirements via contracts review and regular touchbase.
Our research methods
Discovering the agent's routine: Work by the playbook while making exceptions
saved_search
Agents will gather info and work by the playbook.
volunteer_activism
Agents make exception in reasonable cases as per customer-first principle.
supervised_user_circle
SIDD automates streamlined process under agents' supervision.
Sample workflow of agent applying return & refund for out-of-warranty order
design
I craft solutions scenario by scenario.
MVP: SIDD Email module
forum
We made site visits to our call centers for shadowing, survey and interviews.
video_chat
We stay connected with users virtually during pandemic.
hearing
"There's no judgement here. We'd like to hear your thoughts."
SIDD email module
SIDD email module (anatomy)
SIDD Email workflow (scroll left to right)
screen_share
demo upon request
Please email me for demo walkthrough
Milestone feature: SIDD Form Support moedul
*established by Emily Campbell
info
SIDD updates "what you need to know" based on lookup results.
assistant_direction
SIDD provides "what you can do next" guidance based on policy & best practice.
precision_manufacturing
SIDD provides automation for long, complicated service precodures.
SIDD Form Support module (connected to Oracle)
#1 Lookup (GIF Demo)
#1 Lookup (diagram)
#2 Managing data conflicts (GIF Demo)
#2 Managing conflicts (diagram)
# 3 Communication (GIF demo)
#3 Communication (diagram)
#4 auto fill (GIF demo)
#4 auto fill (diagram)
I followed the "Shape of AI" patterns for optimized UX with AI.
*Curated by Emily Campbell
map
AI products should give users clues about how to interact with the model.
input
AI products should submit the user's prompt to the AI within its surrounding context.
memory
AI products should ifferentiate the AI from other features and highlight its use case.
Shape of AI principles
design pattern: wayfinder
design pattern: input governor
design pattern: identifier
Delivery
I deliver outcomes with system-thinking
Building block that formed our foundation.
category
I took the heavy-lifting task to produce our design system.
code
I collaborate with Devs to align CSS stylesheets.
edit_document
I documented our patterns, strategies and findings for sustainable growth.
Design component library
SIDD Ball: Design AI's symbol and personality for user trust
add_business
Designing identity for AI is not only for fun, but also a marketing strategy,
3p
Creating a personalized figure distinguish AI's personality and vibe
animation
I created Lottie animated identifier that help us win trust.
SIDD Ball animation
Website illustrations
Marketing email templates
Epilogue
auto_graph
I designed Spectrum as SIDD's analytic tool for its usage and performance.
apps
I compiled email, phone, live chat and platform modules as an integrated platform.
campaign
I developed SIDD's branch edition as per clients' need.
SIDD Spectrum: Dashboard
SIDD Spectrum: Appeasement
SIDD window behaviour
Client-customized edition
👋 Thanks for watching.
I'm Evan, senior B2B SaaS product designer based in 🍁Toronto
I craft products for
clarity, care & scale.
assignment_add
appendix
WIP - More details and outcomes for your reference.
Colors: Action statements
Colors: Policy triggers
