Designing Chatbar

I joined ChatID as the first in-house designer, and this page is a compilation of some of the most significant stages of our main product over the five years we worked on iterating, simplifying and solving for its use at scale.

Screenshots of multiple versions of Chatbar

Making it better

In 2013, as an initial project, the team shared with me the existing experience. Which until that moment, it was just a proof of concept. The task: Make it better.

My exploration aimed to address UX and investor concerns. We wanted to keep the shopping flow intact while providing the option to ask questions at any time. This exploration led us to create The Overlay, which soon would transform into Chat Bar.

Screenshot of Chatbar on Newegg

Chatbar 2

This phase of ChatID is characterized by significant changes for us as a company and substantial changes to our codebases. All this helped us build faster and introduce new concepts and features to our product portfolio. We introduced User Feedback, Multi-user Chat, mobile support, and added AA Accessibility Conformance to our experience.

Additionally, our team had a constant effort to optimize our CTAs across all our retail partners and experiment led us to build ChatID SMS, ChatAds and the beginning of our Chat Agent Console.

Chatbar Component System

Screenshot of Chatbar Component SystemScreenshot of Chatbar Component System

Feedback

Wireframe of Chatbar feedbackWireframe of Chatbar feedbackWireframe of Chatbar feedback

Chatbar Mobile

Screenshot of Chatbar MobileScreenshot of Chatbar MobileScreenshot of Chatbar Mobile

Chatbar 3

Once we joined Salsify, our work with Chatbar continued focusing on expanding, enhancing, and simplifying the experience. Conceptually we envisioned Chatbar to evolve into an experience capable of proactively surfacing content to users visiting the product detail page.

Exploring Chatbar 3

Screenshot of Chatbar 3 wireframesScreenshot of Chatbar 3 wireframeScreenshot of Chatbar 3 on Walmart.comScreenshot of Chatbar 3 on Walmart.com

Smart CTA

Screenshot of Smart CTA