A B2B2C livestreaming platform with ecommerce at its core.
- Product Designer
Tools
- Figma
- Adobe Suite
- Miro
- Notion
- Webflow
Team
1 Product Owner
1 Product Designer
2 Developers
1 QA Engineer
Timeframe
~6 months
Aug 2021 – Feb 2022
Introduction
When I entered Axonista, I was challenged as a Product Designer with a POC with a real potential of becoming a product: Storefront, commisioned by Mastercard, which allows media brands and enterprise companies self serve their own video commerce experiences.
Below are all the steps that were involved in bringing this product to life.
Problem
Mastercard was struggling to create a product to compete in the European an US market, trying to replicate the success of China’s livestreaming stores.
The complexity of the project, with multiple entry points (Business and Users) needed the experience and skills of a team with media and streaming background.
The complexity of the project, with multiple entry points (Business and Users) needed the experience and skills of a team with media and streaming background.
Solution
The complete solution should come with a system for the store to link its stock easily, a livestreaming digital, studio, and a web app for users to access the live or recorded sessions and purchase the products within.
Target Customers
Recognised brands with an engaged consumer audience, distribution across own and social platforms. Storytelling capabilities, access to talent, in-house or via agencies. A revenue model that brings brands and retailers together with an engaged audience.
Impact
Just after the first real test with users, Mastercard decided to freeze the project. The uncertainty and inmaturity of the product on west market, a bigger investment of infrastructure than spected and the small benefit and sustenability of competitors in US, were enough reasons for Mastercard to leave out the project, with Axonista following that decision a few months after.
Problem
We’re building the video-first future of commerce, because we believe that video is becoming the primary way the next generation wants to shop, and we believe that need is underserved by the vast majority of e-commerce today..
The secret and the value my team and I tried to discover, was about how to convert these moments (that brands create) into action. For me, the UX was about translating those moments into a purchase in just seconds. In many ways, I was reimagining the shopping journey. Shorter, more intuitive, and more human
In order to translate that vision of shortening the purchase decision, Storefront offer had to enable some tech pieces to help them tell their stories direct to their customers, increase conversion, allow them to compete in the emerging livestream commerce market and help them grow as a business and a destination for customers
The key players of the market, as far as interactive players are listed here, with Bambuser being predominantly focused on retail, since 2019 the platform of choice for small companies that want to embed their own shows.
In USA, TalkShopLive is the most recognisable brand outside TikTok for livestreaming shopping. The shoppable videos can then be embedded on a brand’s website and distributed through their social media channels, allowing brands to connect with their customers while seamlessly selling products.
Desk Research
Some desk research around data of the main competitors and the status of the livestreaming ecommerce market was also summarize here.
A UX competitor analysis on Bambuser and OOOOO were also done to detect in which areas our product must achieve the same level, and which areas we can actually improve.
This was also backed up by some desk research about the best chinese livestream e-commerce companies.
Customer journey
Focusing on what I discover while using competitors services, and some research around how they are set up to produce a show, I plan out a customer journey to organise the different stages and tasks a Producer/curator needs to perform before, during and after the show, to uncover opportunities based on their pains and needs.
The Approach
The product was designed around four core elements:
-
- Player: The user-facing livestream space where customers watch, engage, and purchase. It can run on a Storefront site or be embedded into a brand’s own site.
-
- Website: A branded hub for all livestreams, where channels can be created, accounts managed, and audiences organized around products.
-
- Producer system: A powerful video CMS for brands to set up and run livestreams, connect to ecommerce backends, moderate chats, push products, track metrics, and manage teams.
-
- Platform: The underlying engine powering integrations and advanced features. While invisible to most users, it supports custom solutions for flagship clients.
Solution
Roadmap
We then established a roadmap with all different versions and features needed for all relevant demos and pilots with customers.
Wireframes
After having a good sense of the main screens that make up the app, I added components and features in a reliable way, prioritising functionalities that bring the best possible outcomes, before going into the branding.
Branding Workshop
I organised a branding workshop with the main stakeholders to determine the direction the brand should reflect overall, coming up with a statement first, followed by some core definitions, moodboard, mind map, drafts and iterations until we finally got an interesting starting point.
Brand and Logo
Now that we had a clear sense of the direction and what the logo should communicate, I began establishing dark/light variants, icon use, colour palette, available photography, patterns, typography for display and body and available weights, etc.
Landing Page
Alongside the branding, a landing page was also designed to attract attention and engagement around the product before the launch.
Prototype & Testing
Once I had a clear picture about which user flows and screens were needed for a MVP, I created a realistic prototype using Framer, and used it in both remote and real-life moderated tests with a similar target audience using tools like Userinterviews and Lookback.
These tests covered three core areas on the Storefront’s player: Product Purchase, Chat and Social registration.
We also used this opportunity to gather more info about potential competitors like TalkshopLive, Amazon Live, Bambuser, etc.
Interview Insights
After various rounds of testing, we discovered various issues regarding product discoverability and UX when accessing different sections. But all users were pleased about the general experience overall, without any major barriers when entering the show and buying the products listed there.
Iterations
After testing, it was clear that some layout changes were needed, and additional features were implemented to facilitate checking products while being immersed in the show.
- Changing the bag icon to a cart icon to reduce ambiguity about what this section is.
- Have a clearer section for browsing products, with an indication of the currently displayed one and a more standard list style.
- Adding the option to “Buy Now” a product
- Have the show as a Miniplayer when checking out to encourage user engagement, with an option to close it.
- Mute behaviour by tapping the centre of the screen, in line with other common patterns from Instagram, Tik Tok, etc.
Home Page
Each store or brand is expected to have its own space, with even multiple subrands predicted in the next iterations.
Here, the user is presented with a header with the next or last show aired, with dynamic details like a countdown, a live badge or a Watch button changing depending on whether the show is about to start in the future, if it’s currently live, or if it has happened recently.
Below the header, the user can browse the last shows or collections curated by the brand. This is also the place for searching specific content or accessing account details.
Player
During the live show, users can buy current and past products, chat, share, and send hearts to show their support for the host.
This layout brings more focus to the show, while having a direct way to engage with the host and other users, as well as clear entry points to buy the current product, or open a list to show all presented ones until that moment, with tags indicating special promotions, if an item was already sold out, etc.
PDP and Cart
The product detail panel was designed with the intention to be opened 2/3rds of the screen to just quickly browse images of the product and check the price, making it full screen by swiping up.
Expected details from a PDP include colours and size selector, product description, as well as other options like a size chart, related products, etc.
Producer
The customer-facing part of the experience was aimed at mitigating the pain points discovered on the customer journey, as well as keeping the same level of efficiency as other competitors’ tools.
First, for the Preproduction stage, the show curator will be able to ingest and organise products from their Shopify catalogue, set settings and go live. Next, a push option will be available on each item to show it at the same time the host is announcing it. Lastly, when the show is over, the producer can refine the product’s timestamps or update them to reflect the latest changes.
Live Demo Presentation
A live Demo was then organised to show Mastercard how the whole system works in real time from a user perspective, using mock purchases, focusing on sports gear.
The UI for desktop was still running on a previous version, pre-moderated testing, but was still valid to show how the technical capabilities were robust enough to produce a show end-to-end, from entering a show, to selecting a product to buy, and checkout.
Impact
Learnings
The initial discovery didn’t reflect the clear maturity of the livestreaming ecommerce market in Western countries: Perhaps the main lesson to learn. Even if there were already some players in the market using similar products, and the Chinese live e-commerce is a booming industry, in a postmosterm analysis, it was clear that in Western countries it was way slower than expected, which impacted the viability of the product greatly.
For MVP, using current system workarounds could speed up releases instead of waiting to design new tools: Even if a producer app was designed to solve current customer pain points, using our CMS with a more complex workflow was enough to get the user-end up running without interruptions, delaying the whole implementation for a later stage in order to gain velocity.
Chat moderation: Creating a system that can interpret and block certain words, as well as having a parallel flow for moderating comments in real time was a way bigger challenge than expected, which resulted in remove this latest part from the producer part at a later stage of the design after having a technical assesment, in expense of losing a key value point from a business point of view.
Expected features for PDP are still missing: For technical complexity reasons, some expected features, such as user reviews and stock quantity per item variants, were missing in the first iterations.