ShopShops global livestream GMV grew 2931.72% on ShopShops New Vision🤸♀️
TIMELINE
Dec 2022-Early 2023
PLATFORM
App&H5
MY ROLE
UI&UX Designer
Introduction
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.
Problem
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.
Example
Our registration process currently intertwines with multiple offers, creating complexity and confusion for users.
Impact
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.
Example
Complicated navigation systems can confuse users and make it challenging for them to find what they're looking for.
Impact
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.
Example
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.
Impact
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？
Goal
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.
Accessibility
To ensure a proper design system is in place to reduce technical debt, and give our consumers a better, consistent experience.
Our users
Demographics
Process
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
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.
Shop Live
Core functionalities will remain the same. See below for the updated"Shop Live"flow:
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.
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
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.
The overall design layout appears disorganized.
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.
Registration
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
Test B
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.
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:
Development
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
Future
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~