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
Before the redesign, Popsical users faced several pain points:
• Complicated Setup → Users struggled with device pairing and remote connectivity.
• Disconnected Mobile & TV Experience → The mobile app felt like an afterthought instead of an essential part of the experience.
• Difficult Song Search & Queue Management → Users found it frustrating to browse, select, and queue songs.
• Low Retention & Engagement → First-time users often abandoned the app due to confusion during onboarding.
My Role & Design Process
As the head of Design, I collaborated with product manager 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
My goal was to redesign Popsical into a frictionless, engaging karaoke platform by:
✅ Creating a seamless cross-device experience between TV and mobile.
✅ Streamlining onboarding to reduce setup time and improve retention.
✅ Redesigning song discovery with better search, filters, and recommendations.
✅ Improving the mobile remote experience for intuitive playback control.
To understand user behavior, I collaborated with the product manager to analyze quantitative data, including drop-off rates, time spent on each page, and button interactions. This helped us identify usability trends and potential pain points across the app.
For qualitative insights, I created a Google Form with targeted questions and page screenshots, then distributed it to our most engaged user group. This allowed us to capture detailed feedback on their experience during the pandemic.
Additionally, I gathered cross-functional feedback from marketing, customer service, sales, and content teams. Since in-person meetings weren’t possible, we consolidated all findings in a shared Miro board, ensuring a collaborative and organized research process.
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.
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.
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 redesigned Popsical experience delivered measurable improvements, enhancing both usability and engagement:
• 2× Higher Engagement → Increased adoption of the mobile remote app, improving overall user interaction.
• Improved Retention Rates → Users spent more time per session, thanks to the streamlined interface and better usability.
• Seamless Cross-Device Sync → The TV and mobile apps felt fully integrated, providing a frictionless karaoke experience.
By leveraging prototyping tools like Sketch, Invision and Zeplin, conducting early user testing, and iterating based on feedback, we ensured a successful launch that significantly enhanced user satisfaction and engagement.