Christian Citál
Christian Citál
Visual designer turning product thinker—crafting experiences with empathy, clarity, and curiosity
Visual designer turning product thinker—crafting experiences with empathy, clarity, and curiosity
I'm a self-taught designer with a background in visual and brand design, now transitioning into product design. From crafting streetwear to shaping brand identities at Academic Coffee, my work is rooted in empathy, context, and clarity. Lately, I’ve been diving into user-centered digital experiences—like designing a share feature for Playground, a mental health app. I'm driven by thoughtful collaboration, continuous growth, and creating design that just feels right.
I'm a self-taught designer with a background in visual and brand design, now transitioning into product design. From crafting streetwear to shaping brand identities at Academic Coffee, my work is rooted in empathy, context, and clarity. Lately, I’ve been diving into user-centered digital experiences—like designing a share feature for Playground, a mental health app. I'm driven by thoughtful collaboration, continuous growth, and creating design that just feels right.
I'm a self-taught designer with a background in visual and brand design, now transitioning into product design. From crafting streetwear to shaping brand identities at Academic Coffee, my work is rooted in empathy, context, and clarity. Lately, I’ve been diving into user-centered digital experiences—like designing a share feature for Playground, a mental health app. I'm driven by thoughtful collaboration, continuous growth, and creating design that just feels right.
Keep scrolling for some of my recent projects
Keep scrolling for some of my recent projects
Keep scrolling for some of my recent projects
Bringing Playground to the Social Space
Bringing Playground to the Social Space
UX DESIGN
UI DESIGN
INTERACTION DESIGN
VISUAL BRANDING
UX Design
🧠
UI Design
🖥️
Interaction Design
🔄
Visual Branding
🌟
My Role
I collaborated closely with head designer Leonardo De La Rocha and engineer Quentin Cole to design and develop a shareable feature that enabled users to post their Playground activity on social media—boosting user engagement while expanding brand visibility.
My Role
I collaborated closely with head designer Leonardo De La Rocha and engineer Quentin Cole to design and develop a shareable feature that enabled users to post their Playground activity on social media—boosting user engagement while expanding brand visibility.
What is Playground?
Playground is a mental health app designed to foster community through voice messaging. Users share thoughts via audio "check-ins", creating a space for connection and support. To expand its reach, Playground needed a way to encourage organic social sharing.
What is Playground?
Playground is a mental health app designed to foster community through voice messaging. Users share thoughts via audio "check-ins", creating a space for connection and support. To expand its reach, Playground needed a way to encourage organic social sharing.
How do we turn personal voice check-ins into shareable moments?
Our goal was to create a social-sharing feature that felt organic on platforms like Instagram & TikTok, ensured a seamless user experience, and was true to the Playground brand.
How do we turn personal voice check-ins into shareable moments?
Our goal was to create a social-sharing feature that felt organic on platforms like Instagram & TikTok, ensured a seamless user experience, and was true to the Playground brand.
Instagram Share Card Length
Instagram Share Card Length
Spotify Share Format Options
Spotify Share Format Options
Spotify Share Customization
Spotify Share Customization
Sharing via social media
Sharing via social media
Defining the Core Components
Defining the Core Components
Initial Sketch
Initial Sketch
In the early stages of the project, I sat down with Leonardo, who walked me through his rough sketch outlining the core components of the share card: the user’s photo and name, a visual cue for their check-in mood, clear branding, and a striking representation of the check-in itself.
In the early stages of the project, I sat down with Leonardo, who walked me through his rough sketch outlining the core components of the share card: the user’s photo and name, a visual cue for their check-in mood, clear branding, and a striking representation of the check-in itself.
Translated the initial concept into a working prototype
Translated the initial concept into a working prototype
Refining the Look and Feel
I experimented with layout variations, visual emphasis, and ways to keep the interaction intuitive and engaging.
Refining the Look and Feel
I experimented with layout variations, visual emphasis, and ways to keep the interaction intuitive and engaging.
Exploring layouts and share functions.
Exploring layouts and share functions.
Exploring layouts and share functions.
Once I had a strong foundation, I met with the Leonardo to gather feedback. We focused on fleshing out three potential share options, and centering the next set of iterations around:
Once I had a strong foundation, I met with the Leonardo to gather feedback. We focused on fleshing out three potential share options, and centering the next set of iterations around:
Users Get 3 Ways To Share
Building on the feedback and early design wins, I leaned into what was resonating. This led to a set of share options that felt more expressive, intentional, and aligned with the product’s goals:
Users Get 3 Ways To Share
Building on the feedback and early design wins, I leaned into what was resonating. This led to a set of share options that felt more expressive, intentional, and aligned with the product’s goals:
Transcribed Audio
Synchronized text that highlights words as they are spoken.
Transcribed Audio
Synchronized text that highlights words as they are spoken.
Highlighted Portions
Users could select a key moment from their check-in to share.
Highlighted Portions
Users could select a key moment from their check-in to share.
Voice-Driven Visuals
A waveform that animated with the user’s voice.
Voice-Driven Visuals
A waveform that animated with the user’s voice.
Collaborating on Implementation
Collaborating on Implementation
During this handoff session, I met with Quentin to evaluate the technical feasibility of the share card functionality. We walked through the proposed share flow, discussed platform-specific constraints, and explored how the experience could be customized per user. This conversation also helped us identify opportunities and limitations for scaling the feature in future iterations.
During this handoff session, I met with Quentin to evaluate the technical feasibility of the share card functionality. We walked through the proposed share flow, discussed platform-specific constraints, and explored how the experience could be customized per user. This conversation also helped us identify opportunities and limitations for scaling the feature in future iterations.
Post-Handoff Iterations: Refining the Share Experience
Following my conversation with Quentin, we aligned on three key areas to guide the next round of iterations:
Post-Handoff Iterations: Refining the Share Experience
Following my conversation with Quentin, we aligned on three key areas to guide the next round of iterations:
Dynamic Experience
Refined the swipe experience with softened gradients for better legibility while preserving Playground’s playful identity. Also explored customizable color options to give users more expressive control.
Dynamic Experience
Refined the swipe experience with softened gradients for better legibility while preserving Playground’s playful identity. Also explored customizable color options to give users more expressive control.
Customization Features
Introduced trimming and a 10-second playback cap to help users spotlight the most meaningful moments in both audio and text-based formats.
Customization Features
Introduced trimming and a 10-second playback cap to help users spotlight the most meaningful moments in both audio and text-based formats.
Smooth User Flow
Simplified the flow to make navigating, customizing, and sharing quick and intuitive—ensuring a frictionless path from check-in to social post.
Smooth User Flow
Simplified the flow to make navigating, customizing, and sharing quick and intuitive—ensuring a frictionless path from check-in to social post.
Bringing Playground to the Social Space
The share card feature turns personal reflections into engaging, shareable content—bridging the gap between self-expression and social connection. By making it easy for users to showcase their voices on platforms like Instagram and TikTok, we’re not only enhancing user engagement, but also unlocking a powerful channel for organic growth. As this feature moves into development, it positions Playground to expand its presence beyond the app and reach new audiences through authentic, user-driven storytelling.
Bringing Playground to the Social Space
The share card feature turns personal reflections into engaging, shareable content—bridging the gap between self-expression and social connection. By making it easy for users to showcase their voices on platforms like Instagram and TikTok, we’re not only enhancing user engagement, but also unlocking a powerful channel for organic growth. As this feature moves into development, it positions Playground to expand its presence beyond the app and reach new audiences through authentic, user-driven storytelling.
I Learned Some Important Lessons
Involve Your Engineer Early
Bringing in the developer from the start ensures alignment on feasibility, uncovers technical constraints sooner, and creates a more collaborative workflow. Ultimately saving time and reducing the need for major revisions down the line. This is of course in an ideal scenario, every project will differ on allowing the environment for this.
Handshake vs. Handoff Experiences
Your collaboration practices are essential to a smooth design-to-dev workflow. When early alignment with your developer isn’t possible, creating a thoughtful handoff document becomes even more valuable. Capturing key decisions, milestones, and the rationale behind your design helps ensure that the developer isn’t left guessing. This also supports a more informed, efficient build process.
Include a Broader Range of User Types
I could have brought in more voices from the app’s actual demographic (18–28) to better understand what makes them want to share something publicly—and what might hold them back.
Considering Emotional Reaction, Not Just Usability
It would’ve been helpful to observe how users feel when customizing and sharing their check-ins—Are they excited? Hesitant? Confused? A lightweight emotions mapping exercise or think-aloud session could’ve surfaced valuable insights.
I Learned Some Important Lessons
Involve Your Engineer Early
Bringing in the developer from the start ensures alignment on feasibility, uncovers technical constraints sooner, and creates a more collaborative workflow. Ultimately saving time and reducing the need for major revisions down the line. This is of course in an ideal scenario, every project will differ on allowing the environment for this.
Handshake vs. Handoff Experiences
Your collaboration practices are essential to a smooth design-to-dev workflow. When early alignment with your developer isn’t possible, creating a thoughtful handoff document becomes even more valuable. Capturing key decisions, milestones, and the rationale behind your design helps ensure that the developer isn’t left guessing. This also supports a more informed, efficient build process.
Include a Broader Range of User Types
I could have brought in more voices from the app’s actual demographic (18–28) to better understand what makes them want to share something publicly—and what might hold them back.
Considering Emotional Reaction, Not Just Usability
It would’ve been helpful to observe how users feel when customizing and sharing their check-ins—Are they excited? Hesitant? Confused? A lightweight emotions mapping exercise or think-aloud session could’ve surfaced valuable insights.