well.beingbreath
A responsive site where clients can book sessions with Lourdes and explore resources about her practice, learn about the Three-Part Breath technique, and easily schedule appointments.
My Role:
UX Research, UX/UI design
Timeline:
2 months, 20-40 hours per week
Date:
February 2025
Tools:
Figma / FigJam, Adobe Illustrator & Photoshop, Firefly, ChatGPT, pixabay, Vecteezy. Zoom Meetings
Background
Lourdes Davila, a newly certified Breathwork Practitioner, is launching her practice well.beingbreath. She needed a strong online presence to connect with potential clients. With no existing website or branding, I worked closely with her to design and develop her site from the ground up, creating a cohesive brand identity that reflects her calm and welcoming approach to breathwork.
​
The site serves as both a booking platform and an educational resource. It allows new and returning clients to schedule sessions while also providing essential information about Lourdes' credentials, the benefits of breathwork, and the people she serves. To help first-time visitors feel comfortable and prepared, it includes guidance on what to expect during a session.
The Problem
Breathe Freely, Heal Deeply
Lourdes Davila started her breathwork practice but lacked an online presence to connect with potential clients. Without an online presence she had no way to showcase her expertise, educate people about breathwork, or provide and easy way for clients to schedule sessions. This made it difficult for her to establish credibility and grow her business.
Project Goals
The project goal was to establish a professional online presence for Lourdes Davila's business, well.beingbreath. The responsive website will serve as a welcoming and informative space where potential clients can learn about Lourdes' credentials, the benefits of breathwork, and what to expect in a session.
​
The site will also provide a seamless booking system, making it easy for both new and returning clients to schedule appointments. By combining clear branding, user-friendly design, and educational content, the website aims to build trust, attract clients, and support Lourdes in growing her practice.
How might we design an inviting and informative website that builds trust, educates potential clients about breathwork, and make it easy for them to book their session?
Empathize
Research I Competitive Analysis I User Interviews I Affinity Map I Research Insights
Overview:
Before designing the site, I needed to understand what clients desired and research was the key to learning the answers. The research process was valuable in helping me define users’ goals so I could design a site that provided the solution.
​​
I enjoy the research process as much as the design, because I’m able to use both my analytical and creative skills. I enjoy learning ways to simplify systems that help users achieve their goals.
Research Goals
I wanted to understand the needs, concerns, and motivations of potential breathwork clients to create a user-friendly site that builds trust, educates visitors, and encourages session booking with Lourdes.
Objectives
-
Determine pain points
-
Understand needs and requirements
-
Learn what features should be included
Competitive Analysis
I researched competitors content and area of focus, seeking insights for how to approach my design and where I could offer an improved experience.
​​
There were many to choose from, each offering their own unique approach. I gained valuable insights that I was able to draw from in order to create a site that helped bring "Lourdes and her practice to life".
User Interviews
I interviewed six people from a variety of backgrounds.
-
Male / Female / 2 Identify as LGBTQ
-
24 - 55 years old
-
Variety of backgrounds
-
3 have done breathwork / 3 have not
User Goals and Motivations
-
Improve mental well-being
-
Decrease anxiety & emotional stress
-
Increase self-awareness
-
Deeper connection with body
-
Experience deeper relaxation states
-
Desire to reach full potential
-
Pain / Discomfort
User Pain Points
-
Experiencing strong emotions
-
Lack of time / Busy schedule
-
Worried about safe spaces as LGBTQ
-
Is it safe for me to do?
-
World events causing higher levels of emotional overwhelm
Affinity Map
I created an affinity map to help me identify key themes, clients concerns and motivations for trying breathwork. The map also helped me justify my approach to Lourdes, paving the way for creating a design that will help her business to grow and thrive.
Key Research Insights
Clients of breathwork want to...
-
Decrease stress & anxiety
-
Increase self-awareness & improve mental well-being
-
Release energy blockages, achieving a deeper connection with their body
-
A safe space in order to fully relax into the technique
-
Feel confident in Lourdes' abilities
-
Easily schedule appointments
Interviews revealed that people seek altenative methods to manage stress and anxiety but need a safe environment and trust in the practitioner's expertise.
Define
Personas I POVs & HMWs
Overview:
Clear patterns emerged from the research, which was used to create personas that represent Lourdes' clients.
​
I identified users goals, motivations, core needs, and pain points.
Personas
This is Luci
Luci represents clients who want to reduce stress and find a safe space with a practitioner they can feel they can trust.
POVs & HMWs
POVs Statement #1: Focus on Feeling Emotionally Safe
I want to explore ways to help people who struggle with stress, especially if they are concerned about experiencing strong emotions that may arise, to feel safe during breathwork sessions.
HMW Question #1
How might we help people who struggle with stress feel safe and calm during breathwork sessions, especially if they are concerned about experiencing strong emotions?
POVs Statement #2: Focus on Positive Benefits
I want to help people who are seeking alternative ways to manage mental well-being by introducing them to the positive benefits of breathwork, which offers a natural and accessible approach to reducing stress, calming the mind, and reconnecting with the body to promote overall wellness.
HMW Question #2
How might we help people seeking alternative ways to manage emotional well-being to understand the positive benefits of breathwork and that it's a natural and accessible approach for reducing stress, calming the mind, and promoting overall wellness?
Ideate
Sitemap I User Flows I Low & Mid-fidelity Wireframes
Overview:
Discovering the problems clients are trying to solve, it was time to start creating the solution. Before jumping into the designs, I created a Sitemap and a User Flow. These foundational elements helped me craft a visual solution that educates users about breathwork, allows them to schedule appointments, explore its benefits, and learn about Lourdes’ credentials.
Sitemap
Before diving into the design, I created a sitemap to help me visualize how the pages should be connected to one another and how the information should flow on the pages. This provided me a good starting ground. After testing prototypes and making final iterations, some pages were moved and some were added, which improved navigation.
User Flows
I needed to create assumptions about how users would use and navigate the site. I did this by creating User Flows. It was important for me to consider the user's perspective and how they might carry out the required steps to complete a task.
Wireframing
Tools: Pen & Paper / Figma
I like to start with sketching wireframes. This establishes a clear vision early on, ensuring that my client and I are aligned throughout the design process.
​
This early step allows for quick exploration of ideas, helped identify potential challenges, and provided a visual foundation before moving into more detailed design work.
​
By collaborating on wireframes first, we created a shared understanding that streamlined the design process, leading to a more effective final product.
Mid-fidelity Wireframes
I generated mid-fidelity wireframes in Figma from the low-fi wireframes, laying the foundation of building a Responsive Site. This helped to ensure that my client and I were still in agreement. It also allowed me to run user tests midway through the process, helping me discover if the navigation and flow of the site needed improving. ​​
Design
Branding I High-fidelity Wireframes I Prototypes
Overview:
I enjoy the process of creating visuals, whether for clients, target audiences, or in my personal work. I find it rewarding seeing ideas "come to life" - in this case creating layouts and adding color, images, and content. I enjoy reaching this particular part of the UX/UI design process.​​
Branding
Values
The client and I worked together to define the values that best represent her business. I found images to visually convey them.
​
My client was thrilled with the Mood Board I put together for her.
Calm
Reflects the ability of breathwork to ease mental and physical tension, creating a peaceful state of mind and reducing stress
Balance
Harmonizes the body and mind, helps regulate emotions, stabilizes energy levels, and restores equilibrium, fostering a sense of alignment and centeredness.
Healing
Facilitates emotional and physical healing by addressing underlying stress, trauma, or imbalances. Provides a natural way to release tension from the body, fosters inner growth, and supports overall well-being
Clarity
Provides a pathway to connect with intuition, clear mental fog, and enhance self-awareness, empowering individuals to gain insight, reconnect with themselves, and make thoughtful decisions to move forward.
Vitality
Invigorates the body by increasing oxygen flow, boosting energy levels. Cultivates feelings of renewal and vitality, inspiring individuals to embrace life with renewed vigor.
"These images completely capture what I want to convey. And the colors... I love the colors you chose!"
Logo
Per my clients request, I designed two logos - one for her breathwork business and another representing all of the healing services she offers.
​
To ensure the designs aligned with her vision, I created mockups and presented them for her approval before refining the final versions in Adobe Illustrator & Photoshop.
"These are amazing! You've surpassed my expectations. I never imagined I would have something that so perfectly represents me and my purpose. They're beautiful! Thank you."
High-fidelity Wireframes
Using mid-fidelity wireframes, color palettes, typography, and branding, I designed high-fidelity wireframes to bring the website to life. I sourced license free stock images from pixabay, vecteezy, and Adobe Stock Images. I leveraged ChatGPT to fine-tune copy, making it more concise and engaging.
​
All final images and text were reviewed and approved by my client to ensure alignment with her vision.
"Tami, this is beyond my hopes and dreams of how I imagined my site would be. Everything from the colors, images, type of content you've included... you have encapsulated me and my vision. I'm proud and excited to share it!"
Prototype
To ensure the site would meet the approval of users, I used Figma and created prototypes with the UI screens I designed.
Goals
-
Is the site easy to navigate?
-
Is it easy to find information?
-
Does it contain the information they desire?
-
Is it easy to schedule an appointment
-
Does the site build confidence in Lourdes?
Note: Prototype includes revisions that were made after usability tests were conducted.
Test
Usability Testing I Priority Revisions
Overview:
I enjoyed the Testing stage because it helped me understand what worked well and where I needed to improve.
​
This process was the culmination of all my hard work and effort. Did I succeed? Only testing a prototype would provide the answer. And if I didn’t succeed, testing would help me know what needed addressing so that I could revise the design until success was achieved.
Usability Testing
Tool: Zoom & Figma
I used Zoom & Figma to run live user tests. This allowed communication to happen immediately between the testers and me. Zoom recorded the conversations, providing a reference to access later. During testing, I added comments directly to Figma wireframes to reference during revisions.
-
4 Users
-
Ages 23 - 56
-
Remote Testing w/ Zoom
Assigned Tasks
-
Discover if this is a safe space for LGBTQ people and schedule an appointment.
-
Learn about "Three-Part Breath" and how it can help.
-
Learn about Lourdes' credentials to perform breathwork.
Follow Up Questions
-
Did you know which area to choose?
-
Do categories, locations, imagery, and phrasing make sense?
-
Did you find it easy or confusing to navigate? Why?
-
What are your thoughts about the overall design of the site?
-
Does it contain what you expect? Would you add anything?
Testing Insights
Task 1: Discover if safe space for LGBTQ
Four testers found it quickly, but one took longer. Some confusion with the wording "Our Clients".
Task 2: Learn about "Three-Part Breath"
Because users were already aware of certain areas, this was an easier task. But there was confusion once they were on the "Breathwork" Page.
Recommendations
-
Rearrange content hierarchy of the "Breathwork" Page.
-
Add sidebar navigation for content on the "Breathwork" Page.
-
Add "scroll arrow" for pages with lots of content and to help trigger awareness there is more content below.
-
Add address, phone, and email to "Contact" Page.
-
Change dropdown menus on the "Navigation Bar".
-
Move "Benefits" from "New Clients" to "About"​
-
Change "Lourdes" to "Practitioner"
-
Add "Testimonials" link to "New Clients"
-
-
Add whether or not she accepts insurance or FSA on "Costs of Services" Page.
Priority Revisions
I made revisions based on the results discovered during testing, including tester recommendations. Most changes were critical to eliminate confusion and made navigation even easier. Some changes required minimal time, while a couple took six hours.
​
I created a priority list and made five of the seven changes, saving the last two for later revisions due to time constraints and because they weren't creating significant confusion.
User Testing Feeback
Users Overall Thoughts
4/4 Users are excited about the site
Users love the calming aesthetic that visually represents the healing aspects of breathwork. They also love how easy it is to navigate, especially when needing to schedule an appointment. The well-thought out site builds confidence in Lourdes' abilities, leading them to want to try "Three-Part Breath" and user her for their guide.
"The site is so easy to navigate. And I really love how quick an easy it is to find and schedule an appointment. I will definitely try her services."
Melissa (Stressed & Anxious)
Final Thoughts
Challenges
Time Constraints and Finding Content
One of the biggest challenges I faced while designing the breathwork site was working within a constrained timeline while collaborating with a client who already had a highly demanding job alongside building her new business. Scheduling feedback and approvals required flexibility and adaptability. Additionally, researching accurate information about breathwork—especially Three-Part Breath—was crucial to ensure clarity and credibility. I had to distill complex concepts into easy-to-understand, concise content that engaged potential clients without overwhelming them. Balancing these challenges while maintaining a smooth design process required careful planning and clear communication.
Imagery
Finding cohesive, high-quality images that effectively conveyed the purpose of breathwork while maintaining a consistent design style was another major challenge. Since my client had no budget for premium assets, I had to source free images that aligned visually with the site's branding and messaging. This required extensive searching across platforms like Vecteezy and generating additional visuals using Firefly. I spent a great deal of time curating and refining images to ensure they not only enhanced the user experience but also reinforced the calming, healing nature of breathwork.
Key Takeaways
This project reinforced the importance of flexibility, clear communication, and problem-solving when working with a busy client on a tight timeline. I gained valuable experience in balancing aesthetics with functionality—ensuring the design, imagery, and content worked together to create an inviting and informative user experience. Additionally, I refined my ability to distill complex information into clear, engaging content while sourcing cost-effective design assets that maintained a cohesive brand identity.
What I'm Most Proud Of
Aesthetics & Overall Design
Creating a brand and aesthetic that truly resonated with my client (and her clients)—she absolutely loved the logo and color scheme, which beautifully reflect the calming and transformative nature of breathwork. Also having designed a site that is easy to navigate, and making complex information about breathwork approachable and digestible. By structuring the content thoughtfully and using a light, inviting design, I was able to transform what could have been overwhelming information into an experience that feels clear, engaging, and effortless for users.
Accomplishing My Goal: Realized it was achieved based on Lourdes' & User Feedback
I’m incredibly proud to have created a website that my client is truly thrilled about—one she’s excited to share with others. It’s rewarding to know that I not only captured her vision but even exceeded her expectations, translating her ideas into a beautiful, functional space that reflects her passion for breathwork.
I’m also proud of how I incorporated user feedback to design solutions that make the site more intuitive and beneficial for visitors. One of the features I’m especially proud of is the seamless scheduling system, making it easier than ever for clients to book appointments and begin their breathwork journey.