An analysis conducted by the Product Manager and Operations team stated that:

• Offering only live chat was the #1 blocker for chat adoption: 20% of customers who responded to the adoption survey claim that they do not use our chat integration because they believe they don’t have the capacity.
  
• Contact form was one of the top 10 most impactful feature requests from customers;
  
• Contact forms are heavily used by shoppers when available (Shopify native contact form), representing on average 12% of their total billable ticket count;
  

Which indicated that providing a way to support shoppers in an async mode through the chat widget could be key to drive adoption. Contact form was one of the features included in the async mode plan.

Problem

Prior to this project, when agents were unavailable or the shop was outside business hours, shoppers were able to send a chat message but it wouldn't be replied until the shop opened, in most cases, the next day. To send a chat message, shoppers would go through either an optional or mandatory email capture.

Optional email capture

Send a live chat message and have their expectations of a quick answer broken. Almost 50% of merchants had this setting selected.

Mandatory email capture

Fill the mandatory email capture prompt, which looked like a contact form, and wait for an email reply when the shop opened.

In both cases, the shopper was left with an open chat message and no expectation of when they'd get a reply. This was specially problematic when merchants had an optional email capture, because if the shopper didn't provide contact information, there was no way for agents to get back to them.

This project's scope was raw and only defined that we needed a way to capture shopper's contact information, subject (to facilitate triage), and message. Besides that, the solution needed to provide a better user experience for shoppers while outside business hours or when agents were unavailable, and make sure that agents had the contact information and enough context when handling the ticket.

First drafts

While defining the design direction, I designed two proposals: (1) a traditional contact form within the chat widget, which would be easier to implement, and (2) a conversation-like contact form, operated by automated messages that would guide the shopper through the flow.

Although the traditional proposal would be easier to develop, it didn't feel like the right user experience – my assumption was that it would make shoppers give up on contacting support if they saw a form when opening the widget, as it would break the expectation of having a chat conversation.

Since the mandatory email capture solution resembled a contact form, the PM and I were able to compare its conversion rate to the optional one as a proxy and decide which direction to take:

• Mandatory email capture: Always required 14.3% / Required outside business hours 17.2%
  
• Optional email capture: 49.9%
  

I then pushed for the conversational approach, which was validated by leadership and internal stakeholders, and moved to UI refinement. The main change was moving the email capture prompt to the end of the flow, to ensure shoppers would feel more inclined to fill it since they had already written their message.

We released the feature to a beta group (200 accounts, 1 month test) to validate the solution and launch plan. The feature was enabled by default with a toggle to disable it, and merchants were offered to opt-out through email communication prior to the release. At the end of the beta release, enablement and engagement rate were high and opt-outs were below 1%, so the feature was shipped to all customers.

Here are the production results after 1 month:
‍