SEptember 2025
Designing a more human Playo
Designing a more human Playo
Designing a more human Playo
As an intern at Playo, I analyzed early user insights, explored Rive for interactive elements, reimagined onboarding to improve retention, and contributed to 3D badges, typography, color systems, and low- to high-fidelity UI for the V5 app revamp.
As an intern at Playo, I analyzed early user insights, explored Rive for interactive elements, reimagined onboarding to improve retention, and contributed to 3D badges, typography, color systems, and low- to high-fidelity UI for the V5 app revamp.
As an intern at Playo, I analyzed early user insights, explored Rive for interactive elements, reimagined onboarding to improve retention, and contributed to 3D badges, typography, color systems, and low- to high-fidelity UI for the V5 app revamp.
Year
2024
company
Playo
Category
UI/UX, 3D, MOTION
Duration
8 Weeks
THE WHY
THE WHY
To position Playo as a networking platform instead of only a booking app.
Improve onboarding by showcasing features clearly to reduce churn.
Support upcoming paid subscriptions through a refreshed design language.
Build a consistent typography system for efficient cross-platform implementation.
Introduce gamification through 3D achievement badges to drive user motivation.
To position Playo as a networking platform instead of only a booking app.
Improve onboarding by showcasing features clearly to reduce churn.
Support upcoming paid subscriptions through a refreshed design language.
Build a consistent typography system for efficient cross-platform implementation.
Introduce gamification through 3D achievement badges to drive user motivation.
OUTCOME
OUTCOME
Home screen redesign drove a 20% increase in weekly interactions with the "games" card. (10.1K clicks —> 12k clicks)
Multiple users reported the app "felt more lively" and "more exciting".
Home screen redesign drove a 20% increase in weekly interactions with the "games" card. (10.1K clicks —> 12k clicks)
Multiple users reported the app "felt more lively" and "more exciting".
APPROACH
APPROACH
ANALYSIS
ANALYSIS
Analyzed competitor apps (Strava, Cult Fit, Hudle) to identify gaps and opportunities in Playo.
Analyzed competitor apps (Strava, Cult Fit, Hudle) to identify gaps and opportunities in Playo.
CONCEPTUALIZATION
Analyzed competitor apps (Strava, Cult Fit, Hudle) to identify gaps and opportunities in Playo.
DESIGN
Designed a video & interactive UI elements like loaders, buttons & badges using Rive & Spline.
EXECUTION
Collaborated with developers to test and implement designs and interactive elements.
CONCEPTUALIZATION
Conceptualized animations and interactivity using insights from Duolingo and Uber case studies.
DESIGN
Designed a video & interactive UI elements like loaders, buttons & badges using Rive & Spline.
EXECUTION
Collaborated with developers to test and implement designs and interactive elements.
Original onboarding
Original onboarding
The onboarding had minimal motion and storytelling.
Isolated avatars on a map rather than real moments of people playing, having fun, product feels like a tool.
Answers the "WHAT is Playo?" question but not the "WHY is Playo" question.
The onboarding had minimal motion and storytelling.
Isolated avatars on a map rather than real moments of people playing, having fun, product feels like a tool.
Answers the "WHAT is Playo?" question but not the "WHY is Playo" question.
New ONBOARDING VIDEO
New ONBOARDING VIDEO
I used DaVinci Resolve to edit videos sourced from the marketing team and relevant stock footage, curating visuals that highlighted:
key features while weaving a community-first narrative
emphasizing genuine connections and the spirit of building meaningful engagement
Answer "WHY is Playo" = "Make play a habit."
I used DaVinci Resolve to edit videos sourced from the marketing team and relevant stock footage, curating visuals that highlighted:
key features while weaving a community-first narrative
emphasizing genuine connections and the spirit of building meaningful engagement
Answer "WHY is Playo" = "Make play a habit."
LOADERS
LOADERS
I created multiple loaders in Rive inspired by the Playo logo. Since the loaders were built in Rive, they are extremely lightweight in file size, making implementation smoother while ensuring the overall app size remains optimized; this efficiency allows Playo to integrate engaging, high-quality animations without compromising performance or storage constraints.
I created multiple loaders in Rive inspired by the Playo logo. Since the loaders were built in Rive, they are extremely lightweight in file size, making implementation smoother while ensuring the overall app size remains optimized; this efficiency allows Playo to integrate engaging, high-quality animations without compromising performance or storage constraints.
BUTTON EXPLORATION
BUTTON EXPLORATION
I explored Rive and its state machine to design a couple of interactive button concepts, experimenting with state-based and trigger-based animations rather than linear ones, ensuring more dynamic and responsive interactions; throughout, I aligned the designs with Playo’s playful, sporty aesthetic to maintain brand consistency.
I explored Rive and its state machine to design a couple of interactive button concepts, experimenting with state-based and trigger-based animations rather than linear ones, ensuring more dynamic and responsive interactions; throughout, I aligned the designs with Playo’s playful, sporty aesthetic to maintain brand consistency.
3D BADGES
3D BADGES
I leveraged Spline to design a set of 3D interactive badges that serve as achievement markers within Playo, enhancing the sense of reward and playfulness. These badges were envisioned not just as digital tokens, but as elements that could be extended into the physical world, by producing them as real badges and distributing them to users, Playo could create a deeper, more tangible bond with its community.
I leveraged Spline to design a set of 3D interactive badges that serve as achievement markers within Playo, enhancing the sense of reward and playfulness. These badges were envisioned not just as digital tokens, but as elements that could be extended into the physical world, by producing them as real badges and distributing them to users, Playo could create a deeper, more tangible bond with its community.
typography
typography
The typography, inspired by the Uber Base Design System, uses Gabarito for a clean, modern, and legible style. It defines a hierarchy from bold Display to Headline, Body, and Label styles, ensuring consistency and flexibility across Playo’s screens while balancing playful brand expression with readability.
The typography, inspired by the Uber Base Design System, uses Gabarito for a clean, modern, and legible style. It defines a hierarchy from bold Display to Headline, Body, and Label styles, ensuring consistency and flexibility across Playo’s screens while balancing playful brand expression with readability.
COLOR
COLOR
Screens
Screens
New low fidelity and high fidelity screens with a more delightful experience were designed.
New low fidelity and high fidelity screens with a more delightful experience were designed.
discover More discover more
