Codi
Designing Home Depot’s Conversational User Interface
ROLE
DURATION
Led user research, conversational design
Played a key role in UI/UX design, storyboarding, concept design
8 weeks | Fall 2023
TEAM
Figma
After Effects
Premiere Pro
Albert Zhang
Jo Jiang
Revati Naniwedekar
Riley Ren
TOOLS
How can we make Home Depot’s vast repository of home improvement resources more easily accessible to customers, particularly DIY’ers?
01 | OBJECTIVE
02 | OUTCOME
Meet Codi,
Home Depot’s reliable home helper.
Codi is a conversational AI assistant that offers seamless, personalized support with home improvement projects.
03 | CODI’S MOTION STATES
Idle
Wake Up
Listening
Processing
Speaking
Error
Success
Notification
How Codi improves the Home Depot experience
04 | KEY FEATURES
Codi’s key features address common customer pain points during the pre-shopping, in-store, and post-shopping experiences.
Pre-Shopping | Mobile App
Real-time problem diagnosis
Personalized repair options
In-Store | Mobile App
AR navigation and product location
Locate and call relevant associates
Post-Shopping | Mobile & Tablet App
AR room scanning and measurement
Step-by-step tutorials
05 | RESEARCH
As the world’s largest home retailer, we saw an opportunity to augment Home Depot’s existing resource ecosystem with conversational AI technology.
Why Home Depot?
We conducted thorough, exploratory research at Home Depot to familiarize ourselves with product offerings, the customer experience, and potential pain points.
4 employee interviews
4 user interviews
3 site visits
User task flow
Customers find value in Home Depot’s abundant product offering but struggle to find resources seamlessly.
What We Heard
Imagining how a CUI could address customer needs
Based on customer pain points, we created a comprehensive journey map outlining useful CUI features and modalities for the pre-shopping, shopping and post-shopping stages.
06 | IDEATION
Visualizing Interactions with Codi Through Storyboarding
To better understand how a CUI could enhance the customer experience, we created three storyboards, each outlining a specific customer scenario and relevant CUI features. We identified three scenarios where customers need additional support:
1) Diagnosing problems
2) Locating products and associates in-store
3) Completing DIY projects.
1) Pre-Shopping: Problem Diagnosis
2) In-Store: Product Location
3) Post-Shopping: Step-by-Step Project Assistance
07 | DESIGNING CODI
Defining Codi’s Personality
We wanted Codi to accurately represent Home Depot’s brand values of trust, honor, and integrity. As an extension of the Home Depot experience, Codi serves as a partner in customers' DIY projects.
We identified four key attributes of Codi’s personality.
Approachable
Reassuring
Knowledgeable
Empowering
Codi’s shape was inspired by the hex nut.
Defining Codi’s Motion States
We curated Codi’s motion states and mapped them on a calm-exciting and proactive-reactive matrix to ensure they aligned to designated personality traits.
Defining Codi’s Visual Identity
Drawing inspiration from Home Depot's existing visual identity, we crafted Codi's visual identity accordingly.
Home Depot’s Current Visual Identity
Codi’s Visual Identity
To appeal to new and younger DIY enthusiasts, we rejuvenated Home Depot’s current visual identity, incorporating brighter colors, contrasting hues, and gradients, as well as enlarging the corner radius of the icons.
Color Palette
Iconography
Components
Typography
Codi Variations
08 | CODI UI DESIGN
Mobile UI
Pre-Shopping
In-Store
Online Shopping
