CASE STUDY NO. 2
Now Live
"Now Live is easy-to-use, fast to setup and scalable for the Shopify Plus brands. Now Live brings a live shopping experience directly to your storefront." – Now Live
"Now Live is easy-to-use, fast to setup and scalable for the Shopify Plus brands. Now Live brings a live shopping experience directly to your storefront." – Now Live
Now Live is a Shopify app designed to allow e-commerce merchants to host live events, directly engage with their customers, and facilitate real-time product sales. Recognizing the opportunities of interactive online experiences, Now Live aims to bridge the gap between traditional e-commerce and the dynamic engagement of live shopping networks.
Conducting research of existing chat functionalities to identify established design patterns, user expectations, and best practices.
Defining information architecture for the chat feed to ensure intuitive navigation, improve content clarity, and optimize the overall user journey within the live chat environment.
Crafting the dynamic behavior and responsiveness of chat elements, including multi-threaded conversation logic, real-time message handling, and interactive promotional features to aid seamless user-user and user-merchant communication.
Developing and implementing a cohesive, user-friendly, and scalable visual interface for the chat component, focusing on typography, color palettes, and iconography that enhance readability and maintain brand consistency.
Writing clear, concise, and helpful labels, instructions, and system messages embedded directly within the chat interface to guide users and improve usability.
Partnering closely with the Project Manager, Lead Developer, and the Now Live founder and CEO to integrate design solutions with business objectives and technical feasibility.
I was tapped for this project to fix the initial design. The previous design failed to address crucial features and functionalities and was not set up to support the desired user experience. In theory, a simple dialogue between two users is fairly straightforward. But the unique challenge faced in the context of Now Live is that users will not only engage in conversations with each other but more importantly, with merchants.
The original desktop design.
The original mobile design, bearing the same major UX issue - chat differentiation and lack of multi-threading.
I analyzed the chat features of platforms known for their real-time interaction and community engagement (Reddit, YouTube, iMessage) as well as direct competitors of Now Live. This helped identify established patterns for threaded comments, user differentiation, and promotional placements.
Based on the analysis, I established several key principles to guide the redesign, including:
Visual Hierarchy: Using indentation and subtle visual cues to indicate replies and threaded conversations.
User Differentiation: Employing distinct color assignments to clearly distinguish between merchant and customer messages.
Promotional Integration: Dedicated and consistently placed space for real-time promotional messaging.
Clear Input and Feedback: Providing a user-friendly input field with character limits and requiring user registration for participation.
I developed wireframes for both mobile and desktop interfaces, focusing on the sign-in flow, the structure of chat cells, the placement of promotional messages, and the user reply experience.
I then designed a component library outlining the visual specifications and functionality of key chat elements.
Competitor analysis examples.
Wireframe examples for the mobile experience.
Wireframe examples for the desktop experience.
An abstract of the component library and documentation provided to the developer.
The redesigned chat functionality incorporated the following key features:
Utilizing indentation, iconography, and subtle visual cues to enhance readability and comprehension of the conversation flow.
Enabling users, both merchants and customers, to directly reply to specific messages, creating more organized and focused conversations.
Clearly identifying customer and merchant messages through distinct visual styling (e.g., color assignments).
Dedicated space at the top of the chat for real-time promotions, ensuring visibility without disrupting the main conversation flow.
Requiring users to log in to participate, fostering accountability and potentially reducing noise.
The mobile experience showing a portion of the user flow.
The sign in modal for the desktop experience.
The entire UI experience for desktop.
The redesigned chat functionality demonstrably enhanced user engagement during live sales events. Anecdotally, one women's apparel merchant reported generating approximately $15,000 in sales during a single event utilizing the improved chat for real-time interaction with customers. This highlights the potential of the enhanced chat to drive sales and facilitate direct customer engagement.
This project provided a valuable opportunity to focus on the intricacies of real-time user interaction and it demonstrates my ability to design effective and scalable interaction patterns that directly contribute to user engagement and business success. Witnessing the positive adoption of the redesigned chat and its contribution to live sales has been rewarding and very cool to witness.
