Respiro

An app for setting social media limits and offering positive, supportive alternatives to help users refocus.

Overview

Respiro helps users build a healthier relationship with social media. It’s more than just a timer; it’s a supportive companion.

They can set flexible daily limits for specific apps. When their time is up, Respiro gently reminds them and offers
positive alternatives to scrolling, helping them disengage with less stress.

The site guides users from discovery to a confident purchase with detailed product information.

The challenge

Many users feel a loss of control over their social media usage, leading to guilt and anxiety. The market is filled with punitive blockers that people resent and ultimately abandon.
The challenge was to design a supportive experience that empowers users to build healthier habits, creating a tool they would value and stick with long-term.

What I did

My work spanned the full design lifecycle, beginning with contextual research and running multiple rounds of iterative usability tests on paper prototypes.
A key insight emerged: users needed supportive alternatives, not just a locked screen.
This finding became the project's guiding principle, shaping the design from wireframes and high-fidelity mock-ups to a final, validated interactive prototype that solved this core user need.

Results

The iterative design process transformed the initial concept into a highly effective, validated flow. This research validated our supportive approach, with key measurable outcomes from user testing including:
· Users being 35% more likely to explore a wellness activity over a time extension.
· A 60% increase in user task completion rate for setting complex, multi-day rules.
· An 74% decrease in user errors during the rule-setting task.

Approach & MethodologyTo move from a complex problem to a clear solution, I adopted a three-phase approach focused on deep research, rapid prototyping, and high-fidelity validation.
1. Discovery & Definition
2. Iterative Design & Validation
3. UI Design & Interactive Prototyping
1. Discovery & Definition

To solve the right problem, I first needed to build deep empathy with users. This foundational phase was dedicated to moving beyond assumptions and understanding the real-world context and emotional triggers behind mindless scrolling, defining a clear problem to address.

Contextual research

I conducted field visits to observe users in their own homes, capturing authentic behaviors and frustrations around social media use.

Personas

The qualitative data was synthesized into a primary persona, "Lucía, The stressed professional", giving the project a clear, human-centered focus.

Red routes

I identified the critical user journeys, or “red routes”, to ensure the design and testing efforts were focused on what matters most.

2. Iterative Design & Validation

My approach was to test early and often. I used rapid, iterative cycles of paper prototyping and moderated user testing to find and fix critical flaws cheaply, ensuring that every design decision was validated directly by user feedback before committing to high-fidelity.

A Key Insight: “From Blocking to Supporting”

"Instead of just locking the app, I wish it would help me find a positive alternative for what to do next."

— Elena, during an early usability test.

This user insight became the critical pivot point, shifting the project's focus from simply blocking apps to providing supportive, positive alternatives.

Paper prototype
I began with low-fidelity paper prototypes to test foundational user flows and concepts.

This rapid, low-cost approach was essential for gathering direct user feedback, allowing me to find and fix critical usability issues before committing to digital design.
All screens
Paper device
Usability testing

I conducted multiple rounds of moderated usability tests, using the "think aloud" protocol to gather direct, actionable feedback and ensure every design decision was validated by users.

1
Session
2
Observations
3
Analisys and prioritization
4
Usability problems and suggested solutions
Iterations

After each round of usability testing, I analyzed user feedback to prioritize critical issues.
This iterative cycle of test-find-fix ensured the design continuously improved based on direct user needs.

3. UI Design & Interactive Prototyping

I translated the validated user flows into a polished UI in Figma, focusing on a calm and accessible aesthetic. This culminated in a high-fidelity interactive prototype that brought the supportive user experience to life for final validation before developer handoff.

Balsamiq wireframe
Using Balsamiq, I translated the paper prototype flows into digital wireframes. This step solidified the app’s core layout and information architecture before committing to visual design.
image432650
Figma mock-ups

Using Figma, I designed the high-fidelity mock-ups that established the app's visual identity, focusing on a calm, accessible, and supportive user interface.

image432650
image432650
image432650
image432650
image432650
Interactive prototype
Desktop
Mobile
Project Outcomes & Impact

The final outcome is a fully-validated, high-fidelity interactive prototype, backed by extensive user research.
The iterative design process transformed an initial concept into a supportive and intuitive experience.
My software development background helped me to make this design not only user-centered but also robust and technically feasible, allowing for a seamless handoff to development.

Current/next steps

The project is currently in the development phase. Post-launch, the focus will be on measuring its impact by tracking key success metrics like active users, the adoption rate of the flexible scheduling feature, and the ratio of wellness activities selected over time extensions.

My reflections

· The Power of the Pivot: Early paper prototype testing revealed a critical flaw in my initial assumptions. Embracing that direct user feedback and being willing to make a major design pivot was fundamental to the project's success.
· Designing for Emotion: I learned that for a wellness app, the language and tone ("Grace Period," "Mindful Moment") are just as important as the features themselves in building user trust and reducing anxiety.
· Engineering as a UX Asset: My software development experience proved helpful in architecting the complex multi-rule system, ensuring the design was not only user-friendly but also logical and technically feasible from the start.

Do you want to know more?

If you're curious to see the full project on Figma with all the design details, or want to discuss a potential collaboration, just drop me a line.

Respiro

An app for setting social media limits and offering positive, supportive alternatives to help users refocus.

Overview

Respiro helps users build a healthier relationship with social media. It’s more than just a timer; it’s a supportive companion.

They can set flexible daily limits for specific apps. When their time is up, Respiro gently reminds them and offers
positive alternatives to scrolling, helping them disengage with less stress.

The site guides users from discovery to a confident purchase with detailed product information.

The challenge

Many users feel a loss of control over their social media usage, leading to guilt and anxiety. The market is filled with punitive blockers that people resent and ultimately abandon.
The challenge was to design a supportive experience that empowers users to build healthier habits, creating a tool they would value and stick with long-term.

What I did

My work spanned the full design lifecycle, beginning with contextual research and running multiple rounds of iterative usability tests on paper prototypes.
A key insight emerged: users needed supportive alternatives, not just a locked screen.
This finding became the project's guiding principle, shaping the design from wireframes and high-fidelity mock-ups to a final, validated interactive prototype that solved this core user need.

Results

The iterative design process transformed the initial concept into a highly effective, validated flow. This research validated our supportive approach, with key measurable outcomes from user testing including:
· Users being 35% more likely to explore a wellness activity over a time extension.
· A 60% increase in user task completion rate for setting complex, multi-day rules.
· An 74% decrease in user errors during the rule-setting task.

Approach & MethodologyTo move from a complex problem to a clear solution, I adopted a three-phase approach focused on deep research, rapid prototyping, and high-fidelity validation.
1. Discovery & Definition
2. Iterative Design & Validation
3. UI Design & Interactive Prototyping
1. Discovery & Definition

To solve the right problem, I first needed to build deep empathy with users. This foundational phase was dedicated to moving beyond assumptions and understanding the real-world context and emotional triggers behind mindless scrolling, defining a clear problem to address.

Contextual research

I conducted field visits to observe users in their own homes, capturing authentic behaviors and frustrations around social media use.

Personas

The qualitative data was synthesized into a primary persona, "Lucía, The stressed professional", giving the project a clear, human-centered focus.

Red routes

I identified the critical user journeys, or “red routes”, to ensure the design and testing efforts were focused on what matters most.

2. Iterative Design & Validation

My approach was to test early and often. I used rapid, iterative cycles of paper prototyping and moderated user testing to find and fix critical flaws cheaply, ensuring that every design decision was validated directly by user feedback before committing to high-fidelity.

A Key Insight: “From Blocking to Supporting”

"Instead of just locking the app, I wish it would help me find a positive alternative for what to do next."

— Elena, during an early usability test.

This user insight became the critical pivot point, shifting the project's focus from simply blocking apps to providing supportive, positive alternatives.

Paper prototype
I began with low-fidelity paper prototypes to test foundational user flows and concepts.

This rapid, low-cost approach was essential for gathering direct user feedback, allowing me to find and fix critical usability issues before committing to digital design.
All screens
Paper device
Usability testing

I conducted multiple rounds of moderated usability tests, using the "think aloud" protocol to gather direct, actionable feedback and ensure every design decision was validated by users.

1
Session
2
Observations
3
Analisys and prioritization
4
Usability problems and suggested solutions
Iterations

After each round of usability testing, I analyzed user feedback to prioritize critical issues.
This iterative cycle of test-find-fix ensured the design continuously improved based on direct user needs.

3. UI Design & Interactive Prototyping

I translated the validated user flows into a polished UI in Figma, focusing on a calm and accessible aesthetic. This culminated in a high-fidelity interactive prototype that brought the supportive user experience to life for final validation before developer handoff.

Balsamiq wireframe
Using Balsamiq, I translated the paper prototype flows into digital wireframes. This step solidified the app’s core layout and information architecture before committing to visual design.
image432650
Figma mock-ups

Using Figma, I designed the high-fidelity mock-ups that established the app's visual identity, focusing on a calm, accessible, and supportive user interface.

image432650
image432650
image432650
image432650
image432650
Interactive prototype
Desktop
Mobile
Project Outcomes & Impact

The final outcome is a fully-validated, high-fidelity interactive prototype, backed by extensive user research.
The iterative design process transformed an initial concept into a supportive and intuitive experience.
My software development background helped me to make this design not only user-centered but also robust and technically feasible, allowing for a seamless handoff to development.

Current/next steps

The project is currently in the development phase. Post-launch, the focus will be on measuring its impact by tracking key success metrics like active users, the adoption rate of the flexible scheduling feature, and the ratio of wellness activities selected over time extensions.

My reflections

· The Power of the Pivot: Early paper prototype testing revealed a critical flaw in my initial assumptions. Embracing that direct user feedback and being willing to make a major design pivot was fundamental to the project's success.
· Designing for Emotion: I learned that for a wellness app, the language and tone ("Grace Period," "Mindful Moment") are just as important as the features themselves in building user trust and reducing anxiety.
· Engineering as a UX Asset: My software development experience proved helpful in architecting the complex multi-rule system, ensuring the design was not only user-friendly but also logical and technically feasible from the start.

Do you want to know more?

If you're curious to see the full project on Figma with all the design details, or want to discuss a potential collaboration, just drop me a line.

Respiro

An app for setting social media limits and offering positive, supportive alternatives to help users refocus.

Overview

Respiro helps users build a healthier relationship with social media. It’s more than just a timer; it’s a supportive companion.

They can set flexible daily limits for specific apps. When their time is up, Respiro gently reminds them and offers
positive alternatives to scrolling, helping them disengage with less stress.

The challenge

Many users feel a loss of control over their social media usage, leading to guilt and anxiety. The market is filled with punitive blockers that people resent and ultimately abandon.
The challenge was to design a supportive experience that empowers users to build healthier habits, creating a tool they would value and stick with long-term.

What I did

My work spanned the full design lifecycle, beginning with contextual research and running multiple rounds of iterative usability tests on paper prototypes.
A key insight emerged: users needed supportive alternatives, not just a locked screen.
This finding became the project's guiding principle, shaping the design from wireframes and high-fidelity mock-ups to a final, validated interactive prototype that solved this core user need.

Results

The iterative design process transformed the initial concept into a highly effective, validated flow. This research validated our supportive approach, with key measurable outcomes from user testing including:
· Users being 35% more likely to explore a wellness activity over a time extension.
· A 60% increase in user task completion rate for setting complex, multi-day rules.
· An 74% decrease in user errors during the rule-setting task.

Approach & MethodologyTo move from a complex problem to a clear solution, I adopted a three-phase approach focused on deep research, rapid prototyping, and high-fidelity validation.
1. Discovery & Definition

Began with field research to understand real user behaviors, synthesizing observations into key insights and personas that accurately defined the core problem to be solved.

2. Iterative Design & Validation

Using rapid paper prototyping, I ran multiple rounds of moderated usability tests, quickly identifying critical design flaws and validating solutions based on direct user feedback.

3. UI Design & Interactive Prototyping

Insights from testing guided the design from digital wireframes Balsamiq to high-fidelity mockups on Figma, culminating in a final, polished interactive prototype ready for developer handoff.

1. Discovery & Definition

To solve the right problem, I first needed to build deep empathy with users. This foundational phase was dedicated to moving beyond assumptions and understanding the real-world context and emotional triggers behind mindless scrolling, defining a clear problem to address.

Contextual research

I conducted field visits to observe users in their own homes, capturing authentic behaviors and frustrations around social media use.

Personas

The qualitative data was synthesized into a primary persona, "Lucía, The stressed professional", giving the project a clear, human-centered focus.

Red routes

I identified the critical user journeys, or “red routes”, to ensure the design and testing efforts were focused on what matters most.

2. Iterative Design & Validation

My approach was to test early and often. I used rapid, iterative cycles of paper prototyping and moderated user testing to find and fix critical flaws cheaply, ensuring that every design decision was validated directly by user feedback before committing to high-fidelity.

"Instead of just locking the app, I wish it would help me find a positive alternative for what to do next."

— Elena, during an early usability test.

A Key Insight: “From Blocking to Supporting”

This user insight became the critical pivot point, shifting the project's focus from simply blocking apps to providing supportive, positive alternatives.

Paper prototype
All screens
Paper device
I began with low-fidelity paper prototypes to test foundational user flows and concepts.
This rapid, low-cost approach was essential for gathering direct user feedback, allowing me to find and fix critical usability issues before committing to digital design.
Usability testing

I conducted multiple rounds of moderated usability tests, using the "think aloud" protocol to gather direct, actionable feedback and ensure every design decision was validated by users.

1
Session
2
Observations
3
Analisys and prioritization
4
Usability problems and suggested solutions
Iterations

After each round of usability testing, I analyzed user feedback to prioritize critical issues.
This iterative cycle of test-find-fix ensured the design continuously improved based on direct user needs.

3. UI Design & Interactive Prototyping

I translated the validated user flows into a polished UI in Figma, focusing on a calm and accessible aesthetic. This culminated in a high-fidelity interactive prototype that brought the supportive user experience to life for final validation before developer handoff.

Balsamiq wireframe
image432650
Using Balsamiq, I translated the paper prototype flows into digital wireframes.
This step solidified the app’s core layout and information architecture before committing to visual design.
Figma mock-ups

Using Figma, I designed the high-fidelity mock-ups that established the app's visual identity, focusing on a calm, accessible, and supportive user interface.

image432650
image432650
image432650
image432650
image432650
image432650
image432650
image432650
Interactive prototype
Desktop
Mobile
Project Outcomes & Impact

The final outcome is a fully-validated, high-fidelity interactive prototype, backed by extensive user research.
The iterative design process transformed an initial concept into a supportive and intuitive experience.
My software development background helped me to make this design not only user-centered but also robust and technically feasible, allowing for a seamless handoff to development.

Current/next steps

The project is currently in the development phase. Post-launch, the focus will be on measuring its impact by tracking key success metrics like active users, the adoption rate of the flexible scheduling feature, and the ratio of wellness activities selected over time extensions.

My reflections

· The Power of the Pivot: Early paper prototype testing revealed a critical flaw in my initial assumptions. Embracing that direct user feedback and being willing to make a major design pivot was fundamental to the project's success.
· Designing for Emotion: I learned that for a wellness app, the language and tone ("Grace Period," "Mindful Moment") are just as important as the features themselves in building user trust and reducing anxiety.
· Engineering as a UX Asset: My software development experience proved helpful in architecting the complex multi-rule system, ensuring the design was not only user-friendly but also logical and technically feasible from the start.

Do you want to know more?

If you're curious to see the full project on Figma with all the design details, or want to discuss a potential collaboration, just drop me a line.

© Christian Castillejo, 2025
© Christian Castillejo, 2025
© Christian Castillejo, 2025