Live Shopping with Abound
A brand new shopping experience
2022, 2 months
This project was for Abound (helloabound.com), a tech startup e-commerce wholesale site. Abound’s mission is to help local businesses (brands and retailers) connect, grow, and delight customers through its easy-to-use platform. The Live Shopping initiative was pushed to be a key differentiator from our competitors.
Product Designer (me)
I was the lead product designer of the Live Shopping site on our app. This feature acted as a major differentiator from our largest competitor, Faire. Previously, we held live shopping sessions solely on our Facebook page. When we realized they were getting lots of traction on Facebook, we had the idea that if we move them to our app we would be able to convert views into sales. View the site here.
KEY USER PAIN POINT
"I'm having trouble finding items on Abound and I spend hours a day scrolling..."
To commence this project, we search for inspiration by looking at e-commerce sites that have implemented live shopping or some type of video shopping experience. One in particular I enjoyed with video UX was the Peloton app - it was very straightforward to use and navigate through.
To make the shopping experience more engaging and effortless
The growth team wanted to make the shopping experience on Abound fun and easy. Not many e-commerce sites, especially wholesale, utilize Live Shopping so we hoped this would be a pivotal differentiator for Abound to stand out against its competitors. By moving our live videos from Facebook to our app, our goal was to convert views into sales.
Hosting "live" videos on Abound wasn't possible due to engineering limitations
It was difficult for live shopping to be engaging without it actually being “live”. We weren’t giving users the same experience as Instagram Reels or Tiktok where they could scroll endlessly or be apart of a live comment thread for the creator to live respond to fans…
An insider and exclusive viewing experience
Even though we couldn’t provide a “live” experience, we tried to make our version of live shopping as seamless as possible by making the site easy to navigate by categorizing videos and adding products to shop directly below a video. We also wanted to have this experience feel exclusive like our customers were in on a "secret" when they find out all the awesome deals that come with live shopping.
RESEARCH & PROCESS
My first steps were researching and finding inspiration from other e-commerce sites that use Live Shopping. The main difference was that a lot of these sites had live videos embedded in their site, which wasn’t an option for us. We would be embedding videos that had previously aired on Facebook, so technically they wouldn’t be live.
After collecting inspiration, I start sketching different layouts for a landing page. For this first iteration, we want to keep Live Shopping simple and a max of 1 page. I’m also sketching out logo ideas and figuring out different ways “LIVE” is seen throughout the internet.
I worked closely with engineers to ship this product quickly in order so that we could test how successful it was – we moved onto creating V2 shortly after.
ITERATING ON THE UI/UX
As live shopping was a completely new concept to Abound, I wanted to make sure we looked at all the different routes we could take. I made several iterations within the user flow - specifically the calendar, landing page, and header banners.
ITERATING ON THE HEADER BANNER
FIRST USER FLOW
After many iterations and lots of research, I finalized the designs for all frames in the user flow for both desktop and mobile. I drew inspiration from Peloton's workout app and used cards to distinguish the sections for a modern UI that translates well between desktop and mobile. Since most retailers use their phones to watch videos, I needed to find solutions for the UI that would optimize video watching on small screens.
FEEDBACK FROM USER INTERVIEWS
"How do I get to the videos? I'm not sure exactly what I should click."
"The videos are fun and great to watch, but it's difficult to find ones with items I would actually want to shop for."
KEY DESIGN DECISIONS
Putting videos on the landing page
From user interviews, we discovered that users had difficulty navigating through the flow and finding videos they wanted to watch. Since this was an entirely new feature, for launch we decided to put videos on the homepage and categorize them there.
Simplifying the calendar view
Instead of creating a whole new calendar experience for our site, we decided to take from existing UI and layouts to create a much simpler calendar view that only shows the next upcoming event instead of multiple. This decision was mainly to prioritize engineering time and effort.
Adding "Live" to the navigation bar
To increase the amount of traffic going to the landing page, we decided to include it in the nav bar in a prominent place that would drive sales.
An exclusive viewer shopping experience
Live Shopping was a completely new feature added to the site, so it was important for trial 1 that it flowed seamlessly. In this case, we decided to not add any complex new UI and really focus on the UX instead. We wanted retailers interested in live shopping to see this as an engaging and helpful tool to find new products.
In order to ship this product quickly, we trimmed the fat and decided to leave the Calendar and Browse sections for future Live Shopping updates.
We found it was a priority to eliminate clicks to get to the videos, which is why we decided to put them on the landing page instead of putting them into browsing categories.
Putting “LIVE” in the nav bar helped guide tons of traffic to the Live Shopping Page. However, once people got to the landing page, we noticed that not many people were actually watching the videos. In conclusion, we realized the way videos were functioning on the site would not help convert that many views into sales. Most live shopping sites use autoplay to help engage viewers, but since we were embedding them from Youtube, we didn’t have that functionality available to us.