$15,000 in Apparel Sales with the Help of an Improved Chat Design
Project: Now Live
Project context & what interested me
Now Live is a Shopify app that allows merchants to host live events, sell products, and engage with their user base. Think of it as QVC for eCommerce, offering the added advantage of hosting live events directly from a merchant’s digital storefront.
Before joining the Now Live project, I had no knowledge of any apps that offered the capability to host live events and conduct real-time product sales, so the prospect of working on something novel and innovative was appealing. (I soon learned that competitors already existed; nonetheless, the concept was new to me.) And although I have never personally made any purchases from a home shopping network, I'm fully aware of their effectiveness as a consumer platform, so the idea of creating an equivalent in the eCommerce space was both obvious and a seemingly great idea.
In terms of design specifics, the chance to work on a particular set of components, namely the chat feature, was alluring. Normally, I handle much broader design scopes, so having the opportunity to concentrate on smaller elements within an already established ecosystem was exciting and refreshing.
Credit where credit is due:
• One project lead
• One project manager
• Two UI/UX designers
• One developer
My role & contributions:
• Competitive analysis
• User experience design
• Visual design
• Microcopy
The challenge
As the majority of the design interface was already completed and development was underway, I joined this project to better realize the intended user experience for the chat feed. While a previous design was in place, it became clear that certain functionalities weren’t adequately addressed and that the current design was not conducive to multi-threaded interactions between users and merchants.
In theory, a simple dialogue between two users is fairly straightforward. But the unique challenge faced in the context of Now Live was that users would not only engage in conversations with each other but more importantly with the merchants.
The goal became 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.
Competitive analysis
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.
Reddit's use of multi-threaded comments allows users to engage in structured and organized conversations. This system helps users easily follow discussions, reply to specific comments, and navigate complex conversations within each post or subreddit.
Bambuser
Bambuser, a direct competitor of Now Live, utilizes color assignments to distinguish between merchants and customers, ensuring clear and visually organized dialogue tracking. Additionally, they position promotional messaging at the top of the chat for increased, persistent visibility.
YouTube
YouTube's live commenting system facilitates real-time engagement and promotions through banners atop the chat space, allowing content creators to interact with their audience while effectively promoting content, events, etc.
iOS iMessage
iMessage's user experience features threaded conversations with clear indentations and visual cues, allowing users to easily track and follow comment replies within chats. And similar to Bambuser, they leverage color assignments to distinguish those active in the conversation.
Research takeaways
The competitive analysis revealed several prominent tried and true design patterns that we could leverage. These key observations included:
Indentation helps to identify replies to questions or statements.
1
A subtle 1px - 2px stroke can visually connect both sides of the dialogue.
2
Every comment, with or without replies can live in its own visual cell.
3
Separate color assignments should distinguish the merchant and its customers.
4
Promotional messages consistently appear at the top of the chat.
5
Customer text input fields include a character counter and a visible limit.
6
Customers must be registered to participate in the chat.
7
The original design
Initial chat interface for desktop where any user can join the chat without signing in, with no promotional messaging, and no threaded commenting.
Initial chat interface for mobile.
The new design approach
Desktop and mobile layout for determining the placement of components.
Wireframes for mobile devices mapping out the sign in sequence, chat cells, promotional messaging space, and the user reply experience.
Wireframes for desktop devices mapping out the sign in sequence, chat cells, promotional messaging space, and the user reply experience.
The component library and a brief overview of their function for the development team.
Bringing it all together
The approved hi-fidelity designs showing the mobile flow for navigating to the chat feed and signing in.
The approved desktop sign in modal prompt.
The approved complete interface for desktop.
Impact & takeaways
I enjoyed working on Now Live. It provided a refreshing change of pace, allowing me to focus on a specific aspect of the application, which brought a different sense of excitement and focus. Witnessing brands using the product and observing users engaging with each other and the merchant hosts has been particularly rewarding.
That being said, if I had the opportunity to rework this project from its inception, I would prioritize a few changes. Firstly, better and more frequent communication through regular team check-ins, brainstorms, and workshops would have greatly benefited the project. Communication sometimes felt fragmented and incomplete, primarily relying on Asana and Slack, which posed unnecessary challenges.
Additionally, I believe we could have elevated the user interface to a higher level. I would have opted to rework the design system, embracing a cleaner aesthetic. Considering the diverse range of brands expected to utilize this app, it could have resulted in a more universally appealing product with a refined and neutral style.