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.
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 workshop 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.
Gathering Data
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, and button interactions/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. We also gathered cross-functional feedback from Marketing (on conversion friction), Customer Service (on complaints), and Sales/Content Teams (on genres and performance).
Analysing the data
After reviewing user feedback and data insights, we identified key areas for improvement:
- Onboarding Page: Users rarely swipe through the entire introduction. (Solution: Replaced static swipes with background video).
- Home Screen: Confusing navigation (three icons unclear); lack of content discovery features; device linking confusion; fixed play queue bar took up too much space on smaller screens.
- Search Page: Most users search for artists rather than specific songs. (Solution: Refined search prioritization to highlight artists first).
- Profile & Play Queue Page: Users wanted to edit usernames, manage queues easily, and frequently tapped mic controls, suggesting unclear functionality.
Deciding on a measurable goal
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:
Wireframing
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.
1st Draft
For the initial wireframe, I retained the side menu layout from the Android design I had previously developed for the app. This provided a cleaner, more structured navigation system while allowing for scalability.
Major Findings during testing:
- 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.
2nd Draft: Refining the Navigation
Based on these findings, I explored an alternative bottom navigation layout, consolidating content into three main categories:
- Pair Device – Houses all Popsical hardware connection controls and microphone settings.
- Search – Dedicated search function to browse artists and tracks efficiently.
- Profile – Contains customized user content, history, playlists, and settings.
Competitor & Comparative Analysis
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.
To understand how leading music and karaoke apps handle song organization and user interaction, I studied: **Smule** (direct competitor in karaoke) and **Spotify** (relevant for queue management and music organization).
Strengths & Weaknesses of Smule & Spotify UI:
- 🎙️ Smule Strengths: Vibrant visuals and duets/social integrations make it feel playful.
- 🎙️ Smule Weaknesses: The interface often feels cluttered, and visual consistency is weak.
- 🎵 Spotify Strengths: Clean, minimalist design, strong hierarchy, and modern premium presentation.
- 🎵 Spotify Weaknesses: UI can appear dense and text-heavy in search, and some features are buried.
Additional Comparative Analysis
Beyond music, I studied **Netflix** and **Airbnb** for content discovery and search patterns. Both platforms excel in promoting content dynamically.
Strengths & Weaknesses of Netflix & Airbnb UI:
- 📺 Netflix Strengths: Immersive hero banners, categories, and tile-based hierarchy driving instant engagement.
- 📺 Netflix Weaknesses: Endless carousels feel repetitive; depth buries settings.
- 🏡 Airbnb Strengths: Clean layout, premium typography, intuitive search filters, and excellent use of whitespace.
- 🏡 Airbnb Weaknesses: Too many step pages before final confirmation, and dense mobile filters feel heavy.
Key Takeaways for Popsical:
- ✅ **Netflix/Airbnb Hero Banner:** Highlight trending drops on the home feed.
- ✅ **Netflix/Spotify Song Discovery:** Custom playlists cover art and dynamic tile sizes.
- ✅ **Airbnb/Spotify bottom nav:** SURFACING ONLY the three core categories (Pair, Search, Profile).
- ✅ **Netflix/Smule Instant Play:** Clear "Sing Now" buttons to start playing on TV.
- ✅ **Airbnb/Spotify Typography:** High contrast titles and clear visual hierarchy in dark mode.
UI Assemble!
We created a set of reusable styles and components to ensure consistency across TV, mobile, and web. Since the Popsical app is primarily used in dimly lit environments during singing sessions, I opted for a dark-themed UI to enhance usability, reduce glare, and fit the entertainment vibe.
Key Modifications
Explore the evolution of the Popsical redesign. Select a tab below to compare the old design (left) with the refreshed user interface (right):
Onboarding Page Redesign
- • Replaced static slideshows with a dynamic video background to create a more immersive first impression.
- • Improved login experience by increasing the visibility of social login options (Google, Facebook, Apple ID).
- • Optimized layout for quick access, ensuring users can start exploring the app faster.
Home Dashboard Redesign
- • Unified all Popsical device-related functions into a single screen.
- • Concealed play queue bar until a device is connected, converting it into floating scroll buttons.
- • Prominent Netflix-style top banner for playlist campaigns.
- • Redesigned bottom navigation tabs using clear icons, moving settings to the Profile tab.
Search Prioritization Redesign
- • Merged artist and track searches into a single page to reduce navigation steps.
- • Prioritized artist results at the top, matching the natural user mental model.
- • Enhanced filters based on genre, language, and trending songs.
Device Pairing & Control Redesign
- • Centralized device pairing, companion remote controls, and mic settings into a dedicated hub.
- • Redesigned pairing experience using QR connection tools.
- • Separated microphone levels from basic volume sliders to improve discoverability.
Profile & Personalization Redesign
- • Consolidated play history, custom playlists, inbox, and options into a profile view.
- • Moved support and settings to a "More" top-right menu to keep the main view clean.
- • Enabled profile edits (username, profile pictures) directly from the screen.
Final Testing and Launch
I prototyped microinteractions in Sketch and InVision, fine-tuning transitions. For detailed APK validations, I collaborated with an Android engineer to test on physical TV environments, gathering user group feedback before releasing the app.
After a 3-week monitoring phase, we achieved the following metrics against our targets:
The simplified flow and pairing reduced confusion. Most users could now go from search to play without getting stuck. This was the biggest win of the redesign. Furthermore, the redesigned playlist flow turned into one of the most used features.