Optimizing a live shopping app for modern user engagement.
As one of my earliest forays into mobile design, the Livescale Live Shopping app pushed me to learn more about mobile design, teaching me valuable insights into user experience and interface design.
The project had the complex task of being able to adapt to various screen sizes and different mobile web browsers while integrating interactive features, but the real challenge was to create an engaging and user-friendly experience, that aligned with evolving trends in digital commerce and online video content consumption.
Within the next few lines, I’ll discuss how I addressed these tasks and challenges and how I reshaped the Livescale app to provide a seamless shopping experience.
Across various social media platforms, there has been a noticeable shift in the way video content is consumed, favoring vertical orientation over horizontal.
This trend posed a consistency issue for the app’s customers who wanted their live shopping shows to feel familiar and engaging, akin to popular social live platforms such as TikTok, Instagram Live, and Twitch.
Designing a live shopping app comes with the challenge of balancing the user experience among three key elements: the presenting host (the video), the products on sale, and the interactive engagement features.
It was crucial to ensure that users could seamlessly interact with these aspects with as few taps as possible, ensuring a smooth and enjoyable shopping experience.
To address the issue of vertical video consumption trends, I implemented several key design changes:
Highlighting the Video
The video was given the spotlight, covering the entire screen. This design choice allowed for an immersive and engaging viewing experience, aligning with the vertical video consumption trend.
Interactive Chat Overlay
To make the interactive chat less distractive, I applied a background blur effect with a gradual fade towards the top. This created a visually pleasing separation between the video and the chat. The chat was also made scrollable for easy navigation.
Product Placement
Products on sale were moved to the right side of the screen, slightly raised to accommodate the range of a thumb’s reach. Placing them in this location ensured easy access without obstructing the video content. The addition of a scroll function allowed the user to scroll through the product list while being able to view up to 4 items at once.
Button Placement Testing
To further enhance user experience, I introduced an A/B testing approach to determine whether placing the “like” and “bag” buttons above the products would be more accessible. This iterative design process allowed for user feedback to guide the final decision.
The existing design employed a full-page overlay when users selected a product from the product carousel. However, this approach had a critical drawback – it obscured the video of the host and essential engagement features like the chat, disrupting the seamless shopping experience we aimed to provide.
This challenge called for a creative and effective solution that would ensure users could select products while still engaging with the host and other viewers.
To address this issue, I implemented a more user-friendly and space-efficient solution:
Smaller Modal Prompt
Instead of a full-page overlay, I introduced a smaller modal prompt for product selection. This allowed for a more compact and focused interaction while maintaining visibility of the video and chat.
Key Information Accessibility
The call-to-action for product selection remained prominently displayed and easy to click on. The product description was truncated but expandable via a “Read more” link, providing users with the option to access more information without overwhelming them initially.
Responsive Variants
The product selection pop-up was designed to be responsive to the number of variants available. It accommodated up to five rows of two variants each, considering the limitations imposed by the Shopify API.
Browser Compatibility
Recognizing the diverse landscape of web browsers, I ensured that the design was responsive to variations in browser rendering. This responsive approach allowed the app to provide a consistent and visually pleasing experience across different web browsers, guaranteeing accessibility and usability for a broader user base.
By addressing these challenges and implementing these solutions, Livescale's live shopping app was transformed to provide a seamless and engaging experience for users, aligning with current video consumption trends and improving the accessibility of essential features.
The iterative design process and user testing played a vital role in shaping the final product, ensuring that user satisfaction and usability were prioritized throughout the project.
