This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.
Lowe’s In-House Chat UI Design System
Designing an in-house chat system that brings consistency, scalability, and human-centered UX to conversational support at Lowe’s.
Company
Lowe’s
Role
Senior UX Designer
Duration
6 months
About Lowe’s Chat Project
Lowe’s Chat experience was previously powered by a third-party vendor, LivePerson, to support both live agent chat and chatbot interactions. While functionally reliable, the platform imposed significant limitations on the front-end experience, resulting in inconsistent UI patterns, limited customization, and fragmented experiences across platforms.
This project focused on designing an in-house Chat UI framework and design system that would enable Lowe’s to deliver a consistent, scalable, and brand-aligned conversational experience across desktop web, mobile web, and native mobile apps—while supporting live agents, chatbot interactions, and future product-driven use cases.
Problem
The existing chat experience suffered from several core issues:
Inconsistent experiences across platforms
- Desktop and mobile web used a chat window
- Mobile app relied on SMS-based chat
- The experience felt disconnected rather than unified
Vendor-driven UI constraints
- Chat UI components were dictated by LivePerson’s platform
- Visual patterns did not align with Lowe’s Backyard design system
- Limited ability to evolve interaction patterns or introduce new capabilities
Lack of system ownership
- UX, Product, and Engineering had limited control over how chat evolved
- Introducing features like product recommendations or contextual assistance was difficult
To address these issues, the Chat team proposed building an internally managed chat platform supported by a dedicated Chat UI design system that could scale across channels and interaction types.
Chat screens across mobile web and Mobile App (SMS based chat interface)
Team
Product Manager, Senior UX Designer, UX Researcher, Content Writer, 2 Developers
I led the UX design effort, collaborating closely with product, research, content, and engineering to define interaction patterns, UI components, and design guidelines for the new chat system.
Tools used
Figma, UserTesting.com
Heuristic Review and UI Audit
The project began with a heuristic evaluation of the existing LivePerson-powered chat experience to identify usability issues, inconsistencies, and gaps across platforms.
In parallel, I conducted a UI component audit to document:
- Existing chat elements
- Interaction patterns
- Visual inconsistencies
- Deviations from Lowe’s Backyard design system
This helped clarify which issues were experience-related versus platform-driven constraints.
Process
Aligning with the Backyard Design System
Rather than creating a standalone chat UI, the goal was to extend Lowe’s Backyard design system to support conversational experiences.
Steps included:
- Reviewing existing Backyard components and interaction patterns
- Identifying gaps where chat-specific components did not exist
- Conducting a gap analysis between Backyard components and chat UI needs
Based on this analysis, I designed new chat-specific components that adhered to Backyard’s visual, accessibility, and interaction guidelines—ensuring consistency across
Lowe’s digital ecosystem.
Competitive & Industry Analysis
To ground decisions in best practices, I reviewed:
- Competitor chat experiences
- Industry-standard chat UI patterns
- Common approaches to chatbot + live agent hybrid models
This helped inform decisions around:
- Message hierarchy
- Chat entry points
- Use of carousels for product suggestions
- Transitions between automated and human interactions
Gap analysis for chat components for mobile with Lowe’s Backyard design system
Early Design Concepts and Wireframes
The outcome was a modular Chat UI design system that supports:
- Chat entry and invitation patterns across platforms
- A unified chat window experience for desktop, mobile web, and mobile app
- Chatbot and live-agent message types with clear visual distinction
- Product suggestion cards presented as part of the conversation flow
- Scalable components that can evolve with future features
Rather than focusing on individual screens, the system was designed around conversation states, message types, and interaction patterns—allowing flexibility without sacrificing consistency.
Early Concepts and Wireframes
User Testing and Iteration
Usability testing covered the full chat journey
- Chat invite and entry points
- Chat window interactions
- Message flows
- Product card carousel interactions
- Testing was conducted across desktop, mobile web, and mobile app contexts.
Feedback from users directly informed refinements to
- Component layout and hierarchy
- Interaction clarity
- Visual affordances for actions and responses
Designs were iterated in Figma and finalized through close collaboration with Product and Engineering to ensure feasibility and alignment with the MVP scope.
Hurdles & Technical Constraints
Several challenges influenced design decisions:
- Session persistence Ensuring chat sessions remained active for the duration of a browser session, allowing users to navigate freely while continuing conversations.
- Context awareness The long-term vision included using page context to surface relevant suggestions and answers. While LivePerson supported this, the in-house platform could not initially support full context tracking for the MVP—requiring thoughtful fallback designs.
These constraints reinforced the importance of designing a system that could gracefully evolve over time.
Chat entry and exit flows tested
Outcome and Key Learnings
Outcome
- Established a foundation for Lowe’s in-house chat platform
- Reduced dependency on third-party UI limitations
- Delivered a consistent, brand-aligned chat experience across platforms
- Enabled future capabilities like product recommendations and smarter automation
Most importantly, the chat experience shifted from a fragmented support tool to a cohesive, scalable conversational system owned and evolved by Lowe’s.
Key Learnings
- Chat UX is fundamentally about reducing uncertainty, not just answering questions
- Design systems must evolve to support new interaction models like conversation
- Platform constraints should inform—but not dictate—UX decisions
- Scalable systems require designing for today’s MVP and tomorrow’s capabilities
Finalized Lowe’s Chat Design System
Questions?
Reach out to me if you have any questions or want to learn more about the process, learnings and hurdles along the way.
Contact me
More Case Studies
This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.
Lowe’s In-House Chat UI Design System
Designing an in-house chat system that brings consistency, scalability, and human-centered UX to conversational support at Lowe’s.
Company
Lowe’s
Role
Senior UX Designer
Duration
6 months
About Lowe’s Chat Project
Lowe’s Chat experience was previously powered by a third-party vendor, LivePerson, to support both live agent chat and chatbot interactions. While functionally reliable, the platform imposed significant limitations on the front-end experience, resulting in inconsistent UI patterns, limited customization, and fragmented experiences across platforms.
This project focused on designing an in-house Chat UI framework and design system that would enable Lowe’s to deliver a consistent, scalable, and brand-aligned conversational experience across desktop web, mobile web, and native mobile apps—while supporting live agents, chatbot interactions, and future product-driven use cases.
Problem
The existing chat experience suffered from several core issues:
Inconsistent experiences across platforms
- Desktop and mobile web used a chat window
- Mobile app relied on SMS-based chat
- The experience felt disconnected rather than unified
Vendor-driven UI constraints
- Chat UI components were dictated by LivePerson’s platform
- Visual patterns did not align with Lowe’s Backyard design system
- Limited ability to evolve interaction patterns or introduce new capabilities
Lack of system ownership
- UX, Product, and Engineering had limited control over how chat evolved
- Introducing features like product recommendations or contextual assistance was difficult
To address these issues, the Chat team proposed building an internally managed chat platform supported by a dedicated Chat UI design system that could scale across channels and interaction types.
Chat screens across mobile web and Mobile App (SMS based chat interface)
Team
Product Manager, Senior UX Designer, UX Researcher, Content Writer, 2 Developers
I led the UX design effort, collaborating closely with product, research, content, and engineering to define interaction patterns, UI components, and design guidelines for the new chat system.
Tools used
Figma, UserTesting.com
Heuristic Review and UI Audit
The project began with a heuristic evaluation of the existing LivePerson-powered chat experience to identify usability issues, inconsistencies, and gaps across platforms.
In parallel, I conducted a UI component audit to document:
- Existing chat elements
- Interaction patterns
- Visual inconsistencies
- Deviations from Lowe’s Backyard design system
This helped clarify which issues were experience-related versus platform-driven constraints.
Process
Aligning with the Backyard Design System
Rather than creating a standalone chat UI, the goal was to extend Lowe’s Backyard design system to support conversational experiences.
Steps included:
- Reviewing existing Backyard components and interaction patterns
- Identifying gaps where chat-specific components did not exist
- Conducting a gap analysis between Backyard components and chat UI needs
Based on this analysis, I designed new chat-specific components that adhered to Backyard’s visual, accessibility, and interaction guidelines—ensuring consistency across
Lowe’s digital ecosystem.
Competitive & Industry Analysis
To ground decisions in best practices, I reviewed:
- Competitor chat experiences
- Industry-standard chat UI patterns
- Common approaches to chatbot + live agent hybrid models
This helped inform decisions around:
- Message hierarchy
- Chat entry points
- Use of carousels for product suggestions
- Transitions between automated and human interactions
Gap analysis for chat components for mobile with Lowe’s Backyard design system
Early Design Concepts and Wireframes
The outcome was a modular Chat UI design system that supports:
- Chat entry and invitation patterns across platforms
- A unified chat window experience for desktop, mobile web, and mobile app
- Chatbot and live-agent message types with clear visual distinction
- Product suggestion cards presented as part of the conversation flow
- Scalable components that can evolve with future features
Rather than focusing on individual screens, the system was designed around conversation states, message types, and interaction patterns—allowing flexibility without sacrificing consistency.
Early Concepts and Wireframes
User Testing and Iteration
Usability testing covered the full chat journey
- Chat invite and entry points
- Chat window interactions
- Message flows
- Product card carousel interactions
- Testing was conducted across desktop, mobile web, and mobile app contexts.
Feedback from users directly informed refinements to
- Component layout and hierarchy
- Interaction clarity
- Visual affordances for actions and responses
Designs were iterated in Figma and finalized through close collaboration with Product and Engineering to ensure feasibility and alignment with the MVP scope.
Hurdles & Technical Constraints
Several challenges influenced design decisions:
- Session persistence Ensuring chat sessions remained active for the duration of a browser session, allowing users to navigate freely while continuing conversations.
- Context awareness The long-term vision included using page context to surface relevant suggestions and answers. While LivePerson supported this, the in-house platform could not initially support full context tracking for the MVP—requiring thoughtful fallback designs.
These constraints reinforced the importance of designing a system that could gracefully evolve over time.
Chat entry and exit flows tested
Outcome and Key Learnings
Outcome
- Established a foundation for Lowe’s in-house chat platform
- Reduced dependency on third-party UI limitations
- Delivered a consistent, brand-aligned chat experience across platforms
- Enabled future capabilities like product recommendations and smarter automation
Most importantly, the chat experience shifted from a fragmented support tool to a cohesive, scalable conversational system owned and evolved by Lowe’s.
Key Learnings
- Chat UX is fundamentally about reducing uncertainty, not just answering questions
- Design systems must evolve to support new interaction models like conversation
- Platform constraints should inform—but not dictate—UX decisions
- Scalable systems require designing for today’s MVP and tomorrow’s capabilities
Finalized Lowe’s Chat Design System
Questions?
Reach out to me if you have any questions or want to learn more about the process, learnings and hurdles along the way.
Contact me
More Case Studies
This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.
This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.
Lowe’s In-House Chat UI Design System
Designing an in-house chat system that brings consistency, scalability, and human-centered UX to conversational support at Lowe’s.
Company
Lowe’s
Role
Senior UX Designer
Duration
6 months
About Lowe’s Chat Project
Lowe’s Chat experience was previously powered by a third-party vendor, LivePerson, to support both live agent chat and chatbot interactions. While functionally reliable, the platform imposed significant limitations on the front-end experience, resulting in inconsistent UI patterns, limited customization, and fragmented experiences across platforms.
This project focused on designing an in-house Chat UI framework and design system that would enable Lowe’s to deliver a consistent, scalable, and brand-aligned conversational experience across desktop web, mobile web, and native mobile apps—while supporting live agents, chatbot interactions, and future product-driven use cases.
Problem
The existing chat experience suffered from several core issues:
Inconsistent experiences across platforms
- Desktop and mobile web used a chat window
- Mobile app relied on SMS-based chat
- The experience felt disconnected rather than unified
Vendor-driven UI constraints
- Chat UI components were dictated by LivePerson’s platform
- Visual patterns did not align with Lowe’s Backyard design system
- Limited ability to evolve interaction patterns or introduce new capabilities
Lack of system ownership
- UX, Product, and Engineering had limited control over how chat evolved
- Introducing features like product recommendations or contextual assistance was difficult
To address these issues, the Chat team proposed building an internally managed chat platform supported by a dedicated Chat UI design system that could scale across channels and interaction types.
Chat screens across mobile web and Mobile App (SMS based chat interface)
Team
Product Manager, Senior UX Designer, UX Researcher, Content Writer, 2 Developers
I led the UX design effort, collaborating closely with product, research, content, and engineering to define interaction patterns, UI components, and design guidelines for the new chat system.
Tools used
Figma, UserTesting.com
Heuristic Review and UI Audit
The project began with a heuristic evaluation of the existing LivePerson-powered chat experience to identify usability issues, inconsistencies, and gaps across platforms.
In parallel, I conducted a UI component audit to document:
- Existing chat elements
- Interaction patterns
- Visual inconsistencies
- Deviations from Lowe’s Backyard design system
This helped clarify which issues were experience-related versus platform-driven constraints.
Process
Aligning with the Backyard Design System
Rather than creating a standalone chat UI, the goal was to extend Lowe’s Backyard design system to support conversational experiences.
Steps included:
- Reviewing existing Backyard components and interaction patterns
- Identifying gaps where chat-specific components did not exist
- Conducting a gap analysis between Backyard components and chat UI needs
Based on this analysis, I designed new chat-specific components that adhered to Backyard’s visual, accessibility, and interaction guidelines—ensuring consistency across
Lowe’s digital ecosystem.
Competitive & Industry Analysis
To ground decisions in best practices, I reviewed:
- Competitor chat experiences
- Industry-standard chat UI patterns
- Common approaches to chatbot + live agent hybrid models
This helped inform decisions around:
- Message hierarchy
- Chat entry points
- Use of carousels for product suggestions
- Transitions between automated and human interactions
Gap analysis for chat components for mobile with Lowe’s Backyard design system
Early Design Concepts and Wireframes
The outcome was a modular Chat UI design system that supports:
- Chat entry and invitation patterns across platforms
- A unified chat window experience for desktop, mobile web, and mobile app
- Chatbot and live-agent message types with clear visual distinction
- Product suggestion cards presented as part of the conversation flow
- Scalable components that can evolve with future features
Rather than focusing on individual screens, the system was designed around conversation states, message types, and interaction patterns—allowing flexibility without sacrificing consistency.
Early Concepts and Wireframes
User Testing and Iteration
Usability testing covered the full chat journey
- Chat invite and entry points
- Chat window interactions
- Message flows
- Product card carousel interactions
- Testing was conducted across desktop, mobile web, and mobile app contexts.
Feedback from users directly informed refinements to
- Component layout and hierarchy
- Interaction clarity
- Visual affordances for actions and responses
Designs were iterated in Figma and finalized through close collaboration with Product and Engineering to ensure feasibility and alignment with the MVP scope.
Hurdles & Technical Constraints
Several challenges influenced design decisions:
- Session persistence Ensuring chat sessions remained active for the duration of a browser session, allowing users to navigate freely while continuing conversations.
- Context awareness The long-term vision included using page context to surface relevant suggestions and answers. While LivePerson supported this, the in-house platform could not initially support full context tracking for the MVP—requiring thoughtful fallback designs.
These constraints reinforced the importance of designing a system that could gracefully evolve over time.
Chat entry and exit flows tested
Outcome and Key Learnings
Outcome
- Established a foundation for Lowe’s in-house chat platform
- Reduced dependency on third-party UI limitations
- Delivered a consistent, brand-aligned chat experience across platforms
- Enabled future capabilities like product recommendations and smarter automation
Most importantly, the chat experience shifted from a fragmented support tool to a cohesive, scalable conversational system owned and evolved by Lowe’s.
Key Learnings
- Chat UX is fundamentally about reducing uncertainty, not just answering questions
- Design systems must evolve to support new interaction models like conversation
- Platform constraints should inform—but not dictate—UX decisions
- Scalable systems require designing for today’s MVP and tomorrow’s capabilities
Finalized Lowe’s Chat Design System
Questions?
Reach out to me if you have any questions or want to learn more about the process, learnings and hurdles along the way.
Contact me
More Case Studies
This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.
This astounding article
Cards are a great way to organize content in a collection—products, case studies, services, and more.