$15,000 in Apparel Sales with the Help of an Improved Chat Design

PRODUCT DELIVERED

• Web application
• Shopify platform
• Client: Now Live
• Year: 2023

IT TAKES A VILLAGE

• One project lead
• One project manager
• Two UX + UI designers
• One developer
• The Now Live founder

DESIGN SOLUTIONS

We introduced multithreaded commenting for more dynamic discussions, promotional notifications for timely updates, on-page login functionality for seamless access, and interactivity for "liking" comments to boost user and merchant interactions.

MY CONTRIBUTIONS

• Competitive analysis
• User experience design
• User interface design
• Visual design
• Microcopy

THE PRE-DESIGN PROCESS

Now Live is a Shopify app that allows merchants to host live events, sell products, and engage with their customer base. Think of it as QVC for eCommerce, offering the added advantage of hosting live events directly from a merchant’s digital storefront.
Though a previous design was in place, the current design was not conducive to multi-threaded interactions between users and merchants within the live chat feed.

The goal was to find an elegant way to distinguish and clearly define these user-to-user and merchant-to-user interactions within the broader context of the ongoing dialogue, while also providing space for real-time promotional messaging.
If this issue remained unaddressed, users and merchants would struggle to communicate in a coherent and organized manner. Since Now Live is fundamentally a platform for transactions, such confusion could significantly hinder sales and potentially harm the merchant's brand.
To gain an understanding as to how to denote these interactions, I conducted a competitor analysis of major platforms such as Reddit, YouTube, and Now Live competitors. I also explored messaging features, like those found in iMessage, which provided insights into threaded comments and user engagement.

The analysis revealed several prominent tried and true design patterns that we could leverage. These key observations included:

1. Indentation helps to identify replies to questions or statements.

2. A subtle 1px - 2px stroke can visually connect both sides of the dialogue.

3. Every comment, with or without replies can live in its own visual cell.

4. Separate color assignments should distinguish the merchant and its customers.

5. Promotional messages consistently appear at the top of the chat.

6. Customer text input fields include a character counter and a visible limit.

7. Customers must be registered to participate in the chat.
Now Live offered preliminary branding guidelines for implementation. My colleague, who worked on the project before my arrival, laid the groundwork by establishing much of the design system. Leveraging this foundation, I was able to further develop and refine the chat feed design, ensuring it aligned with the overall aesthetic and global interface.

THE DESIGN PROCESS

Livestream shopping events | Go Live on your store in five minutes

The original chat interface for desktop where any user can join the chat without signing in, with no promotional messaging, and no threaded commenting.

The original chat interface for mobile with the same functionality issues.

Competitor research highlighting how dialogue among multiple users could be addressed. Shown here are examples from Reddit, YouTube, Bambuser, and the design treatment in iOS messaging.

The desktop and mobile layout for determining the placement of components.

The wireframes for mobile devices mapping out the sign in sequence, chat cells, promotional messaging space, and the user reply experience.

The wireframes for desktop devices mapping out the sign in sequence, chat cells, promotional messaging space, and the user reply experience.

Chat cell design iterations. The third option was chosen because it translated well for mobile devices, maximizing horizontal real estate for written content.

The finalized component library documented for the development team.

The approved hi-fidelity designs showing the mobile flow for navigating to the chat feed and signing in.

The approved desktop design for when a user is not logged in.

The approved desktop sign in modal prompt.

The approved desktop design for when a user is logged in.

$15,000 in apparel sales with the help of an improved chat design 🎉 (See below)

TAKEAWAYS

Lessons:

What I learned from this experience was more about myself as a designer: I discovered that I enjoy working on smaller component features and excel at doing so. Typically, I handle much broader design scopes, so having the opportunity to concentrate on a smaller set of elements within an already established ecosystem was refreshing. Additionally, it highlighted my enjoyment of working on web applications.

Impact:

Overall, the impact of Now Live has been positive. Roughly fifteen merchants have used the application, with one women’s apparel merchant reporting approximately $15,000 in sales in one event. What lies ahead in the future for the application is yet to be determined, but it is currently part of the Shopify App Store and free for merchants to install.