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.
Challenges
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.
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.
Gathering data
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
Wireframing
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.
The wireframes:
Response:
The revised flow and layout worked well for both Android and iPhone users during testing. Users understood the bottom navigation system, making it easier for them to find features and complete tasks without confusion.
After presenting my findings to the assigned engineer, I gathered additional feedback from the development team. With their input, I was ready to move forward with the UI design phase.
Researching the latest UI Trend
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.
Key Findings:
• Subtle gradients, textures, and patterns are increasingly incorporated into modern interfaces.
• Flat design remains popular, but with a shift toward neutral color palettes rather than vibrant Google Material colors.
• Expansive whitespace is used to emphasize important content.
• Rounded-edge widget components are now a standard feature in modern UI.
Competitor & Comparative Analysis
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.
SMULE
Smule functions as a karaoke-based social media app, making it a direct competitor to Popsical. It combines song performances, social engagement, and discovery, but its UI/UX has room for improvement.
Strengths:
• Home screen prioritizes trending and popular songs, making discovery easier.
• Customizable content feed allows users to see relevant songs and recommendations.
• Effective use of white space prevents the app from feeling cluttered.
Weaknesses:
• Outdated UI elements make the experience feel slightly old-fashioned.
• Overloaded interface—too many features are packed into single screens, leading to a confusing navigation structure.
• Excessive use of primary button colors results in a blurred visual hierarchy, making it harder to differentiate key actions.
SPOTIFY
Spotify, though not a direct karaoke competitor, is an excellent reference for song organization, discovery, and UI structure.
Strengths:
• Effective use of custom cover album artwork to differentiate playlists, artists, and songs.
• Clear typography distinguishes between primary and secondary text, improving readability.
• Consistent visual hierarchy—varied square edges (rounded for podcasts, circular for artists) help users quickly identify content types.
Weaknesses:
• Separation of play queue and now playing songs into distinct pages—while it aids organization, consolidating them into one could streamline navigation.
• Limited customization of the home screen—users have little control over which sections appear first.
Additional Comparable analysis:
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.
NETFLIX
Netflix is a leading content-focused platform, making it a valuable reference for Popsical in terms of content discovery, visual hierarchy, and user engagement.
Strengths:
• Stunning main banner – The large hero banner effectively highlights key content, creating an immediate focal point.
• Smart use of image tile sizes – Varying image dimensions emphasize new and popular shows, enhancing visual hierarchy.
• Instant Play Button (White FAB) – The “Play Something” feature helps reduce decision fatigue, which is a common issue in content-heavy apps.
• Consistent dark mode design – Provides an immersive viewing experience, making content stand out.
Weaknesses:
• Bottom navigation feels cluttered – Could be simplified for a more streamlined experience.
• Typography could be improved – Unlike Spotify, Netflix lacks strong typographic hierarchy, which sometimes makes distinguishing elements harder.
AIRBNB
Airbnb focuses on discoverability and intuitive navigation, making it a great reference for clean layout design and content organization.
Strengths:
• Large hero banner – Similar to Netflix, the highlight banner effectively draws attention to key listings or promotions.
• Excellent typography usage – Clean, modern, and well-structured fonts improve readability and hierarchy.
• Minimalist design with great use of white space – Ensures a clean layout that makes browsing feel effortless.
• Straightforward bottom navigation – Well-structured and intuitive, with each menu directing users to the right section.
• Thin icon styling – Helps maintain a lightweight, clutter-free interface, improving overall clarity.
Weaknesses:
• No major drawbacks in navigation that I can find, but could take inspiration from Netflix’s bold imagery to enhance engagement further.
Key UI/UX Takeaways for Popsical
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.
UI Assemble!
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.
Why a Dark UI?
• 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.
Key Modifications to the Popsical App
Onboarding Page
• 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.
Homepage
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 Page
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.
Popsical Device Control Page
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.
Profile Page
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.
Overall Impact of These Changes
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.
Final Testing and Launch
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.
Final Outcome & Impact
The redesigned Popsical experience delivered measurable improvements, enhancing both usability and engagement:
• 30% Faster Setup → Users could start singing sooner with an improved onboarding flow.
• 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.