Popsical
Redesigning the Popsical app
Overview
Popsical is a next-generation karaoke system that brings instant, cloud-powered karaoke to homes and entertainment spaces. It features a TV-based app, mobile remote control app, and seamless hardware integration, making it one of the most user-friendly karaoke solutions on the market.
As Head of Design, I was responsible for all aspects of UX and UI design, from research to execution. Despite leading design at a strategic level, I remained hands-on, personally designing the entire mobile and TV app experience to ensure a seamless and engaging karaoke journey.
The Challenge
There was no defined brief.
Everyone had a different idea of what the “new Popsical app” should be:
Engineering wanted feature parity with legacy firmware.
Marketing wanted a modern look for relaunch.
The CEO wanted it to feel “like Spotify for karaoke.”
Licensing teams were still changing what songs could appear.
With no single source of truth and constant constraints, I had to work together with the Product Manager to build alignment, define the problem, and lead design decisions that moved us forward.
My Role & Design Process
As the head of Design, I collaborated with product manager, Junior product designers, Marketing and Engineers to overhaul the editing experience and address key pain points. Even in a leadership role, I was responsible for hands-on design work, ensuring both direction and execution.
Objectives
Re-framed the Problem
Instead of waiting for a clear direction, I reframed the problem around one question:
“What’s stopping users from finding a song fast and sing happily?”
I ran a short internal design workhop with the team and stakeholders to clarify:
What’s broken for users right now?
What does “success” look like in the next 3 months?
How can we measure success?
From that, we aligned on three key problem statements:
User Confusion: Navigation was inconsistent and cluttered.
Onboarding Friction: Too many steps before singing.
Visual Fatigue: Inconsistent fonts, spacing, and interaction patterns.
Once expectations were aligned, the next step was to validate those assumptions with real data.
We needed to confirm whether the perceived problems matched actual user behavior and feedback.
To understand usage patterns, I collaborated with the product manager to analyze quantitative data, including:
Drop-off rates across key screens
Time spent per page
Button interactions and search behavior
This helped identify real usability bottlenecks and where users were getting stuck.
For qualitative insights, I designed a Google Form survey with page screenshots and open questions, distributed to our most active user group. The goal was to learn how users interacted with Popsical during daily use, especially during the pandemic.
To broaden perspectives, I also gathered cross-functional feedback from:
Marketing (on conversion and campaign friction)
Customer Service (on recurring complaints)
Sales and Content Teams (on popular genres and performance issues)
All findings were organized in a shared Miro board, ensuring everyone could see the same data and align on priorities.
This stage connected stakeholder expectations to actual evidence, forming a solid foundation for design decisions that followed.
Analysing the data
After reviewing user feedback and data insights, we identified key areas for improvement. While most screens required minimal adjustments, the following findings guided our design refinements:
Onboarding Page
🔹 Users rarely swipe through the entire introduction.
✅ Possible Solution: Replaced the static swipe tutorial with an engaging background video for a more seamless onboarding experience.
Home Screen
🔹 Confusing navigation – Users found the three icons unclear.
🔹 Lack of content discovery – Marketing and content teams wanted a dedicated space for showcasing new karaoke content.
🔹 Filtering limitations – Users requested a filter option to sort artists in the Artist tab.
🔹 Device linking confusion – Too many locations for pairing mobile devices with Popsical Devices.
🔹 Space constraints – The fixed play queue bar took up too much space on smaller screens.
Search Page
🔹 User behavior shift – Most users search for artists rather than specific songs.
✅ Possible Solution: Refined search prioritization to highlight artists first.
Profile & Play Queue Page
🔹 Users wanted an option to edit their username and profile.
🔹 Song queue management needed a more intuitive interaction flow.
🔹 Users frequently tapped on the microphone control buttons, suggesting possible UI misalignment or unclear functionality.
After validating assumptions with real user data, me and the product manager translated our findings into clear, measurable KPIs to track progress throughout the redesign.
The goal was to turn qualitative insights into numbers that guided design focus and aligned everyone on success criteria.
Our target
Successful Song Play Rate (North Star Metric)
Percentage of users who successfully search and play a song. This is the single most important user outcome, opening the app, finding a song, and playing it on TV.
A higher success rate means the redesign improved clarity, reduced confusion, and delivered faster satisfaction.
Search Task Success Rate
Successful search results (song/artist found in less than 3 tries). Most user sessions start with search. We prioritized artist first indexing, clearer feedback states, and faster suggestions to help users find what they want effortlessly.
Pairing Time to TV
Average time to connect mobile app to TV. We want to reduced steps, improved error feedback, and unified device visibility to streamline the process.
Playlist Creation & Engagement
Users who create or update personal playlists. Most user didn't even know there was a create playlist to begin with.
At this stage, I translated initial ideas into low-fidelity layouts to explore structure, navigation, and user flow. The goal was to create a clear foundation that could be refined into detailed designs while leaving room for scalability and future iterations.
1st Draft
For the initial wireframe, I retained the side menu layout from the Android design I had previously developed for the app. This approach provided a cleaner, more structured navigation system while allowing for scalability, making it easier to incorporate additional features and options in future updates.
Major Findings
During the development of a centralized UI design for Flutter, I discovered two key usability issues when showing it to our users:
• iPhone users struggled to find the “More” menu in the side burger icon since iOS users are accustomed to bottom navigation menus.
• Microphone controls were overlooked because they were grouped under the remote control option. (I considered separating them for better visibility.)
2nd Draft: Refining the Navigation
Based on these findings, I explored an alternative approach by testing a bottom navigation menu layout. I consolidated content into three main navigation categories for a cleaner, more intuitive experience:
1. Pair Device
• Houses all Popsical hardware-related controls, including remote and microphone settings.
2. Search
• Dedicated search function to browse artists and tracks efficiently.
3. Profile
• Contains all customized user content, including history, playlists, and settings.
This new structure aimed to align with user expectations, reduce friction, and improve accessibility.
One key motivation for this redesign was user feedback indicating that our app design felt outdated. To address this, I conducted extensive research on modern UI trends and common patterns found in widely used apps with millions of users.
To understand how leading music and karaoke apps handle song organization and user interaction, I studied:
• Smule > A direct competitor in the karaoke space.
• Spotify > A relevant comparison due to its intuitive queue management and music organization system, which aligns with Popsical’s goals.
This research helped shape design decisions that ensure a more modern, user-friendly interface for Popsical.
✅ Strengths :
Smule: Vibrant visuals and interactive elements make singing feel playful and community-driven. Its UI highlights social features (duets, collaborations) in a way that encourages participation.
Spotify: Clean, minimalist design with strong hierarchy. Its navigation is intuitive for frequent use, and playlists/album art presentation feels modern and premium.
❌ Weaknesses :
Smule: The interface often feels cluttered, with too many options fighting for attention. Visual consistency is weak, which can overwhelm new users.
Spotify: While polished, the UI can appear dense and text-heavy in certain flows (library, search). Some features are hidden behind layers, making discovery less intuitive for casual users.
Beyond direct competitors, I also studied Netflix and Airbnb as they share a common goal with Popsical: content discovery and promotion. Both platforms excel in showcasing content dynamically, making it easier for users to explore and engage.
❌ Weaknesses :
Netflix: While visually engaging, the endless carousels can feel repetitive and overwhelming. Navigation depth sometimes buries features like watchlists or categories.
Airbnb: The polished UI sometimes prioritizes aesthetics over speed, too many steps can appear before users reach final booking. On smaller screens, the dense filtering options can feel heavy.
To design an intuitive, modern, and engaging karaoke experience, Popsical can blend the best elements from Smule, Spotify, Netflix, and Airbnb while addressing their shortcomings.
1. Emphasize Key Content with a Hero Banner
✅ Inspired by Netflix & Airbnb
• Large hero banners effectively highlight trending songs, new releases, or promotions, ensuring immediate user engagement.
2. Improve Song Discovery Through Image-Based Navigation
✅ Inspired by Netflix & Spotify
• Dynamic image tile sizes (Netflix) create visual hierarchy, making trending and recommended songs stand out.
• Custom cover artwork & clear album visuals (Spotify) help users quickly identify playlists, artists, and songs.
3. Optimize Bottom Navigation for Simplicity
✅ Inspired by Airbnb & Spotify
• Airbnb’s well-structured bottom nav keeps navigation clear and organized.
• Spotify’s minimalist design ensures that only essential features are surfaced for easy access.
❌ Avoid Netflix’s cluttered bottom nav which can make navigation overwhelming.
4. Enhance Instant Play Functionality
✅ Inspired by Netflix & Smule
• Netflix’s “Play Something” button helps users make quick decisions—Popsical can adopt a “Sing Now” button for one-tap karaoke.
• Smule’s focus on engagement (duets, group singing) can be adapted into a quick-join karaoke session feature.
5. Focus on Clean Typography & White Space
✅ Inspired by Airbnb & Spotify
• Airbnb’s modern typography & structured hierarchy make the UI clean and readable.
• Spotify’s effective use of typography for distinguishing primary and secondary text.
❌ Avoid Smule’s excessive button colors, which blur the visual hierarchy.
Final Thoughts
By combining these UI/UX strengths, Popsical can achieve:
✅ A visually engaging interface like Netflix & Airbnb
✅ Seamless song discovery like Spotify
✅ A streamlined, social-driven karaoke experience like Smule
✅ Intuitive, clean navigation inspired by Airbnb
This ensures Popsical stands out as a user-friendly, content-rich, and highly engaging karaoke platform.
Although we didn’t develop a fully formalized design system, we created a set of reusable styles and components to ensure consistency across TV, mobile, and web. This included a shared color palette, typography rules, button styles, and navigation patterns. By aligning engineers and designers on these guidelines, we reduced inconsistencies and made future iterations faster and easier to scale.
Since the Popsical app is primarily used in dimly lit environments, especially during karaoke sessions, I opted for a dark-themed UI to enhance usability and reduce eye strain.
• Comfortable Viewing – Reduces glare and prevents visual discomfort in low-light settings.
• Immersive Experience – A dark interface blends seamlessly with the karaoke atmosphere, making song lyrics and key controls stand out.
• Battery Efficiency – For OLED screen devices, a dark theme helps conserve battery life, enhancing the user experience.
• Consistency with Entertainment Apps – Aligns with industry standards from apps like Netflix, Spotify, and Smule, which also use dark modes for content-focused experiences.
By maintaining a dark dashboard aesthetic, the Popsical app ensures an engaging, comfortable, and visually optimized experience for karaoke lovers.
Here’s the evolution - left shows the old design, right shows the refreshed one.
• Replaced static slideshows with a dynamic video background to create a more immersive and engaging first impression.
• Improved login experience by increasing the visibility of social media login options (Google, Facebook, Apple ID, etc.) to simplify the sign-in process.
• Optimized layout for quick access, ensuring users can start exploring the app faster with minimal friction.
To improve content discovery and device control, the homepage has undergone a significant transformation:
• Unified all Popsical device-related functions into a single screen to streamline the user experience. Previously, users had to navigate multiple screens to access device settings.
• Implemented a concealed play queue bar, which only appears when a Popsical device is connected. This bar transitions into floating action buttons as users scroll, freeing up space for content exploration.
• Simplified primary navigation by placing only three essential actions at the bottom ensuring the most frequently used features are always accessible.
• Introduced a prominent top banner to highlight new karaoke content, promotions, and special events, enhancing visibility for featured songs.
• Redesigned navigation tabs, using intuitive icons for instant recognition, eliminating the need for text and reducing visual clutter.
• Moved less frequently used settings to the Profile section, following Spotify’s approach to keep the main interface clean and focused.
Search functionality is now more intuitive and efficient, making it easier for users to find what they’re looking for:
• Merged artist and track search results into a single page, reducing unnecessary navigation steps.
• Prioritized artist results at the top, as users tend to search by artist name before looking for specific tracks.
• Enhanced search filtering options to allow users to quickly refine results based on genre, language, and trending songs.
Previously, device-related controls were scattered across multiple sections, making navigation confusing. To fix this, I created a dedicated page for all device-related interactions:
• Centralized all Popsical hardware controls (device pairing, remote control, microphone settings) into a single, easy to access hub.
• Simplified layout with only three primary functions in the bottom navigation, ensuring users can find core features without unnecessary complexity.
• Redesigned device pairing experience to make connecting to a Popsical system faster and more intuitive.
• Optimized microphone control settings, separating them from general remote controls to improve discoverability.
The profile page was restructured to offer a more personalized user experience:
• Consolidated all personalization features, including play history, custom playlists, inbox, and settings into a single, well-organized section.
• Introduced a “More” menu in the top right corner, which now houses inbox and settings, keeping the main profile screen uncluttered.
• Enabled full profile customization, allowing users to edit usernames, update profile pictures, and manage preferences directly from the profile page.
• Improved accessibility by ensuring all account-related settings are easy to navigate without multiple steps.
These modifications significantly enhance the user experience, making Popsical:
✅ More intuitive – Streamlined navigation ensures users can find key features quickly.
✅ More immersive – The video-based onboarding and visually enhanced homepage create a more engaging experience.
✅ More efficient – Merging search results, simplifying the bottom navigation, and centralizing device controls reduce unnecessary friction.
✅ More personalized – The updated profile page provides a more user-centric experience, allowing greater control over preferences.
To identify potential usability issues early, I often go with a simple, high-end UI prototype to detect any negative user experiences before full development. For projects requiring highly detailed prototypes that closely resemble the final product, I collaborate with an Android engineer to replicate the experience in a real APK for more accurate testing and validation.
• Prototyped microinteractions in Sketch and Invision, fine-tuning transitions to create a smooth, responsive experience.
• Used Sketch’s Hotspot Prototyping to simulate navigation and feature interactions, allowing early testing with our user group.
• Gathered feedback from test users, who responded positively to the improved layout, interaction flow, and accessibility.
• Incorporated final refinements before launching the redesigned experience, ensuring a polished and intuitive interface.
The redesign went live for a 3-week monitoring phase, where we tracked user behavior and performance metrics in real time.
Our target
Successful Song Play Rate (North Star Metric)
The simplified flow and clearer pairing reduced confusion. Most users could now go from search to play without getting stuck. This was the biggest win of the redesign.
Search Task Success Rate
Improved relevance and suggestions helped, but multi-language searches (especially searches with chinese character) still created friction. Further tuning was planned with content team.
Pairing Time to TV
New centralized pairing screen and visual connection feedback worked perfectly.
Playlist Creation & Engagement
The redesigned playlist flow turned into one of the most used features. Users enjoyed creating custom sets for parties or family sessions.