Shop, Sell, LiveStream

PopshopLive • Shopping

Avatar

👋

My Role

Contract

Led IA, UI design and prototyping.


Dates

01.2021 - 06.2022


Status

Launched


Access to the app
Popshop Live provides a new way to shop products through live shows. I designed the experience to be user-friendly and efficient for sellers and customers, with a range of features and tools available on native apps and the web.

Avatar
Seller's Web Dashboard

Allows Sellers to monitor their store's revenue and how well it is performing within the community, manage their live shows, product inventory, and order fulfillment, promotions and refunds.

Live Show Mobile App

Allows Customers attend or schedule a live show, making a purchase and engage with other attendees during the show, leave a video review for the store. Sellers can create preview videos and host live shows to sell their productss.


Simple, Focused, Scalable

Customers would choose to attend a live/upcoming event or purchase unique products after they tap the store avatar and view info on the store profile bottom sheet. But the existing content displayed was difficult to access and not scalable.
Avatar
The existing content was hidden behind tabs

Phase 1 • Additional information and features were needed to be displayed on the store profile for customers.
Avatar
Phase 2 • Eliminate tabs and prioritized the most important content - shows and products - on the profile.
Avatar
Phase 1 • Customers can also access store information on the Live Show WebApp, we created a new interaction pattern that allows customers easily switch between the live show and preview of upcoming shows.
Avatar
Phase 2 • The sellers' profile content was updated to match the native, simplified design.
Sellers need to manage their profile settings to alter the information displayed to customers. They also needed a more straightforward way to track the store's performance, as well as manage products and orders on both the Live Show App and their Web Dashboard.

Avatar
The existing content was not accessible easily through too many tabs.

Phase 1 • Reduced the number of tabs by creating secondary tabs under the main tabs. Added badges and performance data to the 'about' page.
Avatar
Phase 2 • Consolidated content onto the same page and de-prioritized unnecessary information, such as the Bio and events. Made it consistent with the updated design of the store profile bottom sheet.
Following the native profile settings design change, I updated the seller's dashboard to be consistent with the new design.

Motivated, Optimized, Celebrated

Customers and sellers previously had no way to celebrate their accomplishments or be motivated and rewarded for engaging more with the app.

To improve retention, we added game elements to the live show shopping experience and introduced a Badge system that rewards users for completing certain actions.

In collaboration with Marketing and Stakeholders, we defined the levels and sequence of Quests.
Avatar
Customers can view the number of badges a store has earned on their profile, and discover which other stores have earned the same badge.

Both customers and sellers can track their progress towards earning badges and feel a sense of accomplishment for earning badges.
Avatar
Users will receive notifications when they earn a new badge, they can also view available quests for themselves and which other users have earned the badges.
Avatar
Sellers can track the badge progress on their web dashboard, which is optimized for use on all devices.

Fun, Entertainment, Communities

Customers can join their favorite stores, interact with the community through chatting, bidding, and interacting with the seller and other peers I worked with a motion designer to create and optimize UI components and patterns, resulting in a more enjoyable user experience.
BID A PRODUCT
Avatar
Customers can edit their bid amount for a favorite product.

Sellers can enable or disable bidding for a product during a live show.
Avatar
The winning bid will be announced upon completion of the bidding process.
Community Interaction
Avatar
Sellers can select a customer at random for a video chat during a live show.

During a live call, users have various controls for their camera, audio, and screen size.
Avatar
Two Sellers could host a live event together, customers can make purchases from the both stores during the show.
Chat and Review
Avatar
Due to limited space in the chat area, we allow users to tap, expand and view the full message.

During scrolling through the chat, the top bidder and product will be highlighted and fixed at the top.
Avatar
Customers can upload review videos for products they have purchased.