top of page

ShopShops global livestream GMV grew 2931.72% on ShopShops New Vision🤸‍♀️


Dec 2022-Early 2023




UI&UX Designer


ShopShops is the first U.S.-based livestream shopping app for fashion, beauty & lifestyle products.In the rebranding page will discuss the redesigned shopper app based on a "Download-Register-Explore-Watch-Buy"

In this project, we revamped the user experience and redesigned the UI, which was one of the largest projects at ShopShops since 2022-2023.

My Role

I'm the lead designer for this project. User testing and development of this project from end to end. I collaborated with 2 product manager (ViVi, Carolyn) during the early ideation stage and the lead product manager (Tiff) throughout the entire project.


Today, ShopShops mobile app using the outdated UI/UX trends.The issue is that inconsistencies and too many elements can confuse users and make the page cluttered, hampering navigation and understanding. Analytics have shown a reduced download and register,NU watch time has decreased and the total GMV has continued to decline.

Here are the primary concerns we'll address in the initial design phase.


Excessive Information Requests

Asking for too much information during registration can deter users who are hesitant to share personal details upfront.


Our registration process currently intertwines with multiple offers, creating complexity and confusion for users. 


This convoluted approach lacks clear guidelines, making it easy for users to feel disoriented and ultimately abandon the registration midway.


No Defined Journey

Unclear user experience leads to frustration in users—in turn increases the drop off rate.


Complicated navigation systems can confuse users and make it challenging for them to find what they're looking for.


Decreased Conversion Rates: Without a guided journey, users may not reach the intended conversion points or take desired actions, impacting the conversion rates


Inappropriate Typography

Wrong fonts or inconsistent styles can make text hard to read and understand.


Overlay of black, white, and gray: The input box is challenging to see against the black live background. The color and font in the scrolling text are difficult to distinguish.


Compromises user engagement and usability.  Unclear colors and fonts hinder content readability, risking users missing vital information.

"How can we redesign this app to address current visual and interactive issues, providing users with a better consumer experience?


Business Goal

User Goal

Intuitive Interface

Intuitive Interface: Clear, concise design that is easy to understand and navigate, allowing users to swiftly find desired information.

Simplified Purchasing Process

Smooth purchasing experiences, streamlined checkout processes, and clear steps promote conversion rates and user satisfaction.

Good Interaction Design

Well-designed interactive elements such as search bars, filters, menus, etc., improve user engagement and site usability.


To ensure a proper design system is in place to reduce technical debt, and give our consumers a better, consistent experience.

Our users




Design Sprints

In design sprints, our team swiftly tackles targeted problems and explores ideas.  We collaborate across Product Design, Management, and Creatives, mapping out issues, defining goals, and understanding user needs.  Through brainstorming, we generate diverse solutions, create prototypes for testing, and gather real user feedback to refine and enhance our concepts.


We began conceptualizing some wild ideas in our minds. We're updating the old user flow to streamline the process.

Current Flows

Current Flows.png

New Flows

New User Registration

See below for the new design and the key updates each step:


User Testing

Key Update:Register AB Test

To collect more data on our new users' behaviors, we plan to run a quick A/B Test.

When: We will send a separate annoucement. The test will last 10 days.

How: We will randomly select 50% of the unregistered users and add them tothe experimental group. Testers in the experimental group can watch live, leavecomments, or view product details without logging in. We will cease the test 10days after Capp 2.23.0 official release, and 100% of the unregistered userswill need to register to experience our app.

A_B Test.png

Shop Live

Core functionalities will remain the same. See below for the updated"Shop Live"flow:

Shop page.png

Early designs

Here's a preview of my initial wireframes, mid-fidelity designs, and early drafts.   Each screen has undergone a minimum of 20 iterations. This was driven by various factors such as shifts in business direction, the impact of a pandemic, changes in the product roadmap, or simply to enhance the user experience.

Register Page

We iterated our registration and login pages, using intricate animations to highlight brand diversity. We experimented with brand selection during registration for a personalized journey, but it led to longer login times.

Register _ B.png

Live Room

We are iterating on our live streaming page with a focus on enhancing user experience, ensuring a clean and clear interface, thoughtful layout, and fostering interaction between viewers and hosts through features like liking and gifting.In the iterative versions, we adjusted spacing and color differences, taking into account visual clarity.


Diverse elements and interaction patterns can confuse users, steepening the learning curve.

Difficult visual clarity

Live page.png
Live Room 01.png

Insufficient spacing may result in misoperations

Home page

I refined the homepage navigation to enhance functionality clarity, utilizing a card-style waterfall layout design for a visually appealing and dynamic appearance.

Homepage 2 Light.png

The overall design layout appears disorganized.

Discover  Dark.png

Final Designs

Introduction of the ShopShops Design System

ShopShops is a scalable design system designed to enhance efficiency and minimize technical debt over time. It addresses the challenge of inconsistent components and user experiences.

Comprising over 100 meticulously crafted components featuring well-defined typography styles, icons, and illustrations, ShopShops establishes a cohesive foundation for the entire application. By utilizing these modular components, the design system ensures a unified, consistent, and resilient user interface.

Image Guidelines.png


To gather data on new user behaviors, we're conducting a brief A/B Test. 50% of unregistered users must register to access the app, while the other half can watch live, leave comments, or view product details without logging in. Versions include full-screen design with integrated ads and half-screen design for a direct landing experience.

Test A

Register _ A.png

Test B

Register _ B new.png

Home page:Bottom Navbar

Place the most important and frequently used actions in the Bottom Navbar.
Use clear and recognizable icons for each tab. Additionally, include text labels to provide explicit information about each tab's function. This improves accessibility and user understanding. Maintain a consistent design language throughout the Bottom Navbar. Icons and colors should follow a cohesive theme to reinforce visual unity.


Group Related Tabs:

Group related tabs together to create a logical organization. This grouping helps users quickly identify and navigate to the section they need.

Interactive Feedback:

Implement interactive feedback, such as subtle animations or color changes, to indicate when a tab is selected. This gives users immediate visual confirmation of their actions.

Accessibility Considerations:

Accessibility by using contrasting colors, legible text, and ensuring that the Bottom Navbar is navigable for users with disabilities.

Test for Usability:

Conduct usability testing to gather feedback on the effectiveness of the Bottom Navbar. Identify any pain points or confusion in navigation and make adjustments accordingly.

Restructured Navigation Bar

Home,Shop,Message and Profile

We have restructured the bottom navigation bar to provide a smoother “Explore to Watch” experience! The redesigned nav bar includes four tabs:Home,Shop,Messages,and Profile.

Restructured Navigation Bar.png

Back to Top

To help users browse more conveniently, we have added a"Back to Top" feature on the Home and Shop Page.

By implementing these best practices, we can create an optimized Bottom Navbar that enhances user navigation and contributes to a positive overall user experience.

Live Room

Place the most important and frequently used actions in the Bottom Navbar.
Use clear and recognizable icons for each tab. Additionally, include text labels to provide explicit information about each tab's function. This improves accessibility and user understanding. Maintain a consistent design language throughout the Bottom Navbar. Icons and colors should follow a cohesive theme to reinforce visual unity.


Redesigned"Live Room"

We have redesigned the"Live Room"! Core functionalities will remain the same. Below is a breakdown of notable changes:

Living Room.png


I've crafted a responsive page layout optimized for diverse platforms – mobile, web, and H5. We've executed a thorough redesign, we've integrated accessibility design principles throughout the redesign, ensuring inclusivity at every stage – from conceptualization to launch.

ShopShops globe livestream GMV grew 2931.72% on ShopShops new vision


ShopShops in the NEWS



Bug fixes

For a project of this magnitude, despite addressing numerous bugs prior to the public release, there may still be occasional minor issues.

To maintain and update App

We are continuously updating; in the first phase, we updated the primary and secondary pages. In the upcoming phases, we will continue the updates to unify the overall page style.

Collaborating with the technical team on bug updates.

In this update, although we have resolved numerous technical bugs, there are still outstanding issues to address.  Given the urgency of the release and tight deadlines, we prioritized advancing progress.  Our plan is to systematically address and refine the remaining technical bugs in the upcoming design phases.

Continue to design better experiences.

To follow through our product roadmap and continue to stick to our design principles.

Thank you so much for the opportunity to be part of this design initiative. Working alongside the team, I've gained valuable insights spanning product, operations, design, and the technical aspects. Throughout the entire process, understanding the needs of each department and collaborating effectively have been essential to enhancing and successfully updating a project. Appreciate your time and consideration~

bottom of page