Paulo Pereira - Jango Music App

Scaling Streaming Platform to Mobile-First
Native Experience

Case Study

Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of my current employer.

My Role

🤔 Concepting / ✏️ Sketching / 📝 Wireframing 🎨 UI/UX Design / 🤖 Prototyping

Tools

XD / Photoshop Illustrator / Invision

Platform

Mobile

Timeline

4 Months

The Business Problem:

Despite occupying a profitable, social-music niche, Jango Radio faced a critical "Drop-off" at the top of the funnel. Behavioral data indicated a clear "Aha! Moment", if a user successfully created a custom station, they engaged for an average of 4+ hours daily.
High Acquisition Friction: The primary challenge was converting new visitors into "Station Creators" during the initial session.
Device Mismatch: Internal focus was skewed toward Desktop, while data showed the vast majority of the user base was shifting toward Mobile.
Navigational Friction: Legacy mobile patterns were not optimized for one-handed use, leading to high abandonment rates during the station-creation flow.

The Strategic Solution:

"Mobile-First" pivot, realigning stakeholder priorities to focus on the platform where the highest growth potential existed.
Behavioral goal alignment, I re-engineered the onboarding flow to prioritize "Station Creation" as the primary North Star metric, leveraging the 4-hour
engagement insight to drive long-term LTV (Lifetime Value).
Ergonomic optimization (Fitts’s Law), I redesigned the interface based on Physical Interaction Heuristics. By moving critical actions to the "Natural Thumb Zone," I ensured that station management and social interactions were effortless for one-handed mobile use.
Bottom-Navigation framework, I transitioned the app from legacy menus to a standardized Bottom-Anchored Navigation System. This increased discovery speed and allowed for a persistent "Now Playing/Create" trigger that remained within reach at all times.

The Result:

By modernizing the mobile experience and focusing on ergonomic efficiency, we solidified Jango’s position in its profitable niche.
Increased User Activation: Streamlining the station-creation process led to a measurable uptick in first-session conversions.
Enhanced Retention (Stickiness): By driving users toward the "Aha! Moment" faster, we successfully converted casual listeners into 4-hour-plus daily power users.
Improved Interaction Efficiency: The implementation of Fitts’s Law and bottom-nav patterns significantly reduced "Miss-taps" and navigation errors, resulting in higher user satisfaction ratings.
Strategic Market Alignment: The Mobile-First pivot ensured the platform remained competitive and defensible against larger, resource-heavy streaming competitors.

To maximize user activation and long-term retention, I spearheaded a strategic, mobile-first pivot rooted in behavioral data and ergonomic science. By identifying that station creation was the primary "Aha! Moment"—leading to an average of 4+ hours of daily engagement—I re-engineered the mobile architecture to prioritize this core metric. I applied Fitts’s Law to map the "Natural Thumb Zone," transitioning the platform to a bottom-anchored navigation framework to ensure high-frequency actions were within optimal ergonomic reach. This approach effectively reduced interaction friction and cognitive load, transforming a legacy desktop focus into a high-performance mobile ecosystem that solidified the product's profitable market niche.

Functional Logic & User Flow Optimization

Low fidelity Optimized user flows for a high-traffic mobile ecosystem by identifying and removing friction points, resulting in a leaner, more intuitive interaction model.
Orchestrated a rapid prototyping cycle, moving from low-fidelity wireframes to interactive validation models to facilitate faster executive decision-making and project momentum.
Standardized functional requirements into actionable UI components, ensuring that stakeholder approvals were based on verified user logic rather than subjective aesthetics.

Interactive Prototyping & High-Fidelity Validation

Once the functional architecture was validated and approved, I pivoted to the visual layer to bring the product into alignment with modern aesthetic standards.
Led the redesign of the corporate logo and visual style guide, focusing on a more energetic and digitally native presence.
Utilized color psychology to drive user engagement—using the primary deep blue for stability and trust, while introducing dual-toned oranges to draw the user’s eye to critical call-to-action (CTA) points.
Designed an initial suite of custom icons and UI tokens, establishing the baseline for a living design system that could scale as new features were introduced.

Retrospective:
Challenge: The primary hurdle was twofold: a platform-device mismatch and a friction-heavy user journey. While stakeholders initially prioritized desktop, user data revealed a dominant mobile audience that was struggling with a legacy interface. Accessibility & Physicality: The existing mobile site ignored the "Thumb Zone," creating a frustrating experience for one-handed operation. The "Aha! Moment" Barrier, business research showed that station creation was the key driver for 4+ hours of daily engagement, yet the UI made this critical action difficult to find. Identity stagnation, the brand’s visual language was dated, lacking the modern vibrancy required to compete in the high-energy music streaming market.

The Takeaway: This project reinforced that a Senior Designer’s role is as much about strategic influence as it is about execution. By presenting behavioral data, I successfully realigned stakeholder priorities toward a Mobile-First strategy, ensuring we solved for the majority of our users first. Applying Fitts’s Law and ergonomic mapping transformed the navigation from a list of links into a high-performance interaction model. Designing the style guide and color palette wasn't just an aesthetic choice; it was about creating a chromatic system. Introducing cool-toned slates and high-visibility oranges allowed us to use color as a functional tool to guide user behavior and highlight CTA (Call to Action) points.

The Result: The strategic shift from a desktop-centric legacy site to an ergonomically optimized mobile experience yielded significant business impact. By centering the architecture around the "Station Creation" loop and utilizing bottom-anchored navigation, we streamlined the path to the product’s core value. The mobile-first pivot and ergonomic refinements successfully drove users toward the 4-hour engagement threshold, strengthening long-term retention. The launch of the new Style Guide and Proprietary Iconography provided a consistent, modern identity that resonated with our niche audience and provided a scalable foundation for future feature releases. Beyond the UI, the project served as a catalyst for a more mature UX culture within the team, establishing a blueprint for iterative testing and evidence-based design.

Google Sites