Designing With a “Chat-First” Mentality

“Hey Siri, tell us a joke.”

“Hey Siri, what is the weather today?”

“Hey Siri, do I qualify for life insurance?”

With the expansion of voice assistants and chatbots (think Siri, Alexa, and Facebook Messenger add-ons), the exciting Conversational UI movement appears destined to stay and ultimately upend what we expect from human-computer interaction. And as more innovation emerges, our discussions with computers are becoming more and more serious. Seemingly overnight, we can pay our bills by voice, receive health insurance quotes via text message and be reminded to take our medications.

Still, is it too early to start talking about Conversational UI and your business? Not necessarily. While the future of things to come is top-of-mind in the design community, we also need to reflect on what we are learning about quality design and how it can be applied to work we have already done. In particular, we can optimize the point-and-click experience by taking inspiration from what we are learning with voice and chat-enabled services. Examining websites through a “chat-first” mentality filter will reveal new opportunities and create overall harmony across experiences.

What are some practical chat-first principles we can apply to browser-based interfaces?

Prioritize content strategy

When successful, bots answer our requests by providing exactly what we are seeking, no more, no less. On top of that, they reply with the right amount of gravity – or levity – that feels in sync with the subject matter. For websites, this exact same logic should be applied when communicating content like instructions, error messages, features and customer service. While web content is predominantly written by humans, sometimes it feels like it was not written for humans. We need to put as much effort into our UX writing as we do into making chatbots feel natural.

Is this possible for sensitive topics like finance and health? Definitely. On their secure web experience, Simple Bank does a great job balancing concise but thorough answers with an appropriate voice and tone. Without using footnotes or an FAQ to back it up, they are able to answer all pressing questions around a potentially serious issue like blocking your debit card. And they are doing so in a tone that is extremely reassuring.

Emphasize search over navigation

Like Conversational UIs, which have no idea what users will ask next, websites can similarly make the assumption that, for the most part, users are coming to their site with very clear intentions. To prepare for specific requests, sites should refrain from revealing their entire catalogue (and digital noise) and instead offer ample space for users to start the conversation.

Online, you can currently see this strategy implemented nicely by Despite operating countless business units, GE’s landing page is impressively restrained. The primary nav is limited to four items and search, highlighted by a “What can we help you with?” CTA that takes center stage. Popular search items are then presented as a subtle method of promotion. The structure of this page is not a far leap from what Alexa might resemble if manifested on a screen. As a user, the site gives total control to explore on your own terms.

The key to achieving this model is creating a search system that is capable of ingesting more flexible requests from its users. Website search needs to listen and react to how humans naturally ask. Zocdoc’s effort to construct a “Patient-Powered Search” is a concerted effort to align the dialogue.

Allow for progressive disclosure

Sending and receiving the right amount of information at the right time is critical to how we converse. Much like how Conversational UI experiences reveal to us nuggets of information and then allow for the expansion or dismissal for more information, we can apply this thinking to visual interfaces. This is particularly helpful for dense educational content where lots of information needs to be processed.

With their recent redesign, (much like GE) greatly reduced the option to navigate across products and instead utilized a goal-oriented messaging strategy to onboard the user into their appropriate product line. The user starts the conversation (“I am 45, and I care about enjoying retirement”) and the computer responds by displaying more info related to the goal. The user then responds back with more specifics about their goals (I want “Secure Guaranteed Income Later”) and then the computer presents product details. This dialogue, which gradually reveals the right solution via personal motivations, entirely replicates one of the core fundamentals of Conversational UI.

While creating a chatbot application may not be feasible in the immediate future, consider redesigning certain sections of your website with a chat-first mentality.

Where are some areas to focus first?

  • Examine the volume and tone of your copy in direct relation to the subject matter.
  • When first bringing users into your experience, onboard them in a way that makes them feel empowered rather than overwhelmed.
  • When presenting complex topics with users, refrain from cognitive load components (such as comparison charts or mega menus) in favor of a progressively disclosing dynamic to user’s preference.

Imagine if you were to make a voice-based app of your current website: How would you do it? How would you communicate with your users differently? How would the content strategy change? Now see if any of these insights can bring inspiration to your current website. We’d love to hear your thoughts.

Categories: Experience Design
Tell us what you think