Case Study: Responsive Website
Ripple Effect Wellnessis a boutique studio in Wauwatosa, WI, offering yoga, personal training, and sauna sessions. While the in-studio experience is warm and community-driven, the website created friction instead of clarity. Pricing was buried, booking relied on external links, and the mobile layout felt cramped — leaving prospective clients uncertain about how to engage.
Role
UX Researcher & Designer (Designlab Academy)
Platform
iOS
Tools
Figma, Adobe Creative Suite, Google Workspace
Year
2025- 65 hours
How can I improve Ripple’s webpage?
I decided I wanted to redesign Ripple’s pages so that pricing and booking were top of mind and easily accessible. Through this and a curiosity of whether others experienced the same problems, I hypothesized that if the site clearly communicated services and pricing, streamlined the booking flow, and reflected Ripple’s in-person warmth, then first-time visitors would feel more confident engaging online and more likely to convert.
Industry Overview and Investment
The wellness industry is booming, valued at over $5.6 trillion globally, with yoga, recovery, and boutique fitness among the fastest-growing segments. Locally in Southeast Wisconsin, demand for wellness services is rising as clients seek convenience, trust, and transparency, often starting their search online.
As an employee there, I have seen people decide not to book classes or refrain from buying more than a drop in class due to website issues.
Why Refine Ripple?
When I reviewed Ripple Effect Wellness’ existing digital presence, I noticed a disconnect between the in-studio experience and how the brand appeared online. The website lacked clear service descriptions, was not fully mobile-friendly, and buried pricing and booking options — all of which created friction for potential clients.
Process: Double Diamond Framework
Discover → Define → Develop → Deliver
To frame the process, I used the Double Diamond model—moving from discovery to definition, and from development to delivery.
Discover: Initial usability testing+ competitor analysis
Define: Pain points, goals, and persona
Develop: Wireframes + flows + prototypes
Deliver: Usability testing and revisions
Preliminary Research & Project Goals
One participant summed it up best: “I wanted to sign up, but I couldn’t figure out where to start.” Erin, a prospective client, described leaving the site unsure of services, pricing, or how to book. This wasn’t an isolated reaction. In testing Ripple’s original website, four out of five participants experienced similar confusion — struggling to find costs, navigate mobile layouts, or complete a booking without hesitation.
The pattern was clear: while the studio’s in-person experience felt approachable and trustworthy, the digital experience created friction and doubt. This disconnect between brand identity and online usability became the central problem my redesign set out to solve.
Goals
Ripple’s responsive redesign aimed to create a clear, credible, and conversion-focused site that:
Replaces scattered information across social media, flyers, and outdated site pages.
Clearly communicates core offerings (yoga, sauna, personal training) without extra clicks.
Builds trust through transparent pricing and intro offers.
Makes booking simple on both desktop and mobile.
My design goal was to align Ripple’s digital presence with its in-studio experience: approachable, professional, and community-driven — while measurably reducing drop-off from confused first-time visitors.
Interviews & Initial Testing
Before making any design changes, I conducted initial usability testing on Ripple’s existing website with five participants. I asked participants to book a yoga class and view pricing information.
Key findings included:
4 out of 5 participants struggled to locate clear pricing without multiple clicks.
The mobile experience felt cramped, with long scrolls and small buttons making it hard to navigate.
Several participants said they were uncertain how to book, since the process relied heavily on external links.
Most participants mentioned that while Ripple’s in-studio experience felt approachable, the website didn’t match that same clarity or warmth.
These tests confirmed that the core issue wasn’t awareness of Ripple — it was the disconnect between the brand’s welcoming in-person experience and its confusing digital presence.
Competitor Analysis: Findings and Opportunities
I began my SWOT with Empower Physical therapy, Yoga Six, and Mindbody. Empower worked to help me see another local space that I could compare Ripple’s services and webpage to, Yoga Six gave me a national chain to compare to, and Mindbody was an app based way for me to compare usability and transparency in pricing and booking.
Competitor Overview
Empower Physical Therapy
Empower PT provides personalized therapy and rehabilitation services with a strong focus on recovery.
Strengths: Deep expertise in injury recovery, licensed therapists, and customized one-on-one programs build high trust and retention among patients.
Weaknesses: Narrow scope — no yoga, fitness, or integrative wellness services; limited brand presence beyond clinical settings.
Opportunities: Expand into prevention and holistic wellness offerings, or create hybrid in-person + virtual models to reach more clients.
Threats: Hospital-owned PT groups and boutique practices that combine fitness and wellness compete directly for clients seeking a broader solution.
YogaSix
YogaSix is a national franchise delivering accessible, modern yoga classes for all levels.
Strengths: Scalable brand recognition, standardized class formats, and strong marketing infrastructure position YogaSix as approachable and reliable.
Weaknesses: Single-modality focus on yoga only; limited personalization and local community connection; high franchise fees create barriers to flexibility.
Opportunities: Demand for integrated mind-body experiences post-pandemic opens space for expanding into wellness or recovery add-ons.
Threats: CorePower Yoga, Orangetheory, and other boutique fitness competitors crowd the same market with broader or trend-driven offerings.
Mindbody App (Indirect)
Mindbody is a booking platform that connects users with fitness, wellness, and beauty providers.
Strengths: Extensive marketplace, user-friendly mobile experience, and large client base make it the dominant aggregator in the space.
Weaknesses: Inconsistent quality across providers; lacks community feel or differentiation; serves as middleman rather than experience creator.
Opportunities: Growing appetite for personalized recommendations and integrated wellness journeys could make Mindbody more than just a scheduling tool.
Threats: Niche booking apps (e.g., ClassPass, Vagaro) and wellness studios’ own digital platforms reduce reliance on third-party marketplaces.
Key Findings
Competing studios often bury pricing or make booking overly complicated.
National brands like YogaSix prioritize scalability over personalization, leaving gaps in local connection.
PT providers like Empower offer trusted care but don’t extend into preventative wellness.
Aggregator apps like Mindbody provide convenience but overwhelm users with too many options.
Across the board, mobile experiences are inconsistent, often leading to frustration for first-time visitors.
Opportunities for Ripple Effect Wellness
Stand out with transparent pricing and simple booking flows that reduce friction.
Differentiate by blending personalized service with boutique wellness offerings in one studio.
Highlight local roots and community partnerships to build trust and authenticity competitors lack.
Deliver a polished responsive experience across devices, reinforcing professionalism and credibility.
Position Ripple as a clear, approachable alternative to cluttered apps and impersonal chains.
Affinity Mapping
To make sense of all the usability study insights, I grouped comments into themes using affinity mapping. This clarified which issues were most common and most critical, helping me decide what to prioritize in the redesign.
Key Insights from Mapping
Transparency: Users consistently struggled to find pricing; they wanted costs surfaced clearly and early.
Efficiency: Booking paths felt long and scroll-heavy, especially on mobile. Users valued fewer steps and more obvious CTAs.
Navigation: Collapsed menus and cluttered layouts created hesitation; leaner, task-focused navigation was needed.
Tone & Connection: Ripple’s in-studio warmth wasn’t reflected online. Authentic imagery, friendly copy, and clear service separation (yoga, fitness, sauna) were suggested.
Device-Specific Needs: Desktop users welcomed detail, while mobile users preferred brevity and scannable formats.
Design Moves Guided by These Insights
Created a dedicated pricing page linked directly in the top navigation.
Shortened the booking flow, enlarging CTAs and reducing unnecessary taps.
Developed responsive layouts tailored for desktop depth vs. mobile simplicity.
Highlighted brand authenticity through trainer bios, community events, and real imagery.
Prioritized fixes based on frequency × severity × feasibility, which identified Viewing Pricing and Booking a Class/Session as the highest-impact flows.
Outcome
Affinity mapping distilled scattered feedback into actionable themes. These insights directly shaped the information architecture and wireframe priorities, ensuring the redesign addressed the most urgent user pain points while aligning with Ripple’s approachable, community-driven identity.
Persona
Creating a persona was a critical step in translating research into design direction. After usability testing Ripple’s original website, I noticed that while participants valued the studio’s in-person warmth, they struggled to see that reflected online. To bridge that gap, I developed personas that captured not just demographics, but the motivations, frustrations, and expectations that would directly influence design choices.
“My current mobile-web experience makes it impossible to book my yoga sessions quickly.”
Carla represents a core audience for Ripple Effect Wellness: young professionals who want more than just a workout — they’re looking for a sense of connection and belonging. During testing, I observed that users like Carla often said things like, “I just want to know if this is a place where I’ll fit in.” That need for reassurance shaped how I prioritized transparency and storytelling across the site.
For Carla, the design had to make Ripple feel approachable and community-driven before she ever walked through the door. That meant:
Clear explanations of services so she wouldn’t feel overwhelmed.
Transparent pricing so she could trust her investment.
Warm, authentic photography that showed real people, not stock models.
Simple, responsive booking so she didn’t get discouraged midway through.
Why this matters: Carla anchored my design decisions around approachability. Whenever I considered how much detail to include or how to present services, I asked, “Would this make Carla feel welcomed, or would it intimidate her?” This ensured Ripple’s new website wasn’t just functional, but also emotionally aligned with the type of community Carla — and many real users like her — wanted to find.
Project Goals
When I began working on Ripple Effect Wellness’ website, one thing became clear: the studio’s in-person experience was far stronger than its digital presence. Clients who visited the space loved the community, the sauna, and the personal attention, but the old site didn’t reflect that value. If anything, it created friction — unclear service descriptions, hidden pricing, and a booking flow that felt more like a chore than an invitation.
Business Objectives
Boost agent productivity: cut admin time 30 %, halve manual follow-ups, and drive daily use of scheduling/comm tools.
Reduce client drop-off & mis-communication: 40 % fewer missed updates and +25 % jump in post-close satisfaction.
Stand out in a crowded market: launch 3+ truly agent-specific features and score 90 % mobile-usability.
Drive long-term adoption: hit 60 % retention at 90 days, WAU/MAU ≥ 0.6, NPS 50+.
User objectives
One hub for all messages, tasks, showings, docs.
Automation for reminders and timelines that still feels personal.
Clear read-receipts and offer-deadline visuals to manage buyer expectations.
Less tool-switching, more time selling.
Where business & User Goals Overlap
Simplify the tech stack → fewer apps, lower support cost.
Full timeline transparency → happier clients, fewer agent “status?” calls.
Real-time, mobile-first experience → faster decisions, faster deal flow.
Problem Statement
Ripple Effect Wellness’s current website creates barriers that prevent visitors—especially first-time and mobile users—from discovering and booking classes quickly and confidently. Key findings included:
Calls-to-action are hidden: Most users stall or give up when “Book Class” buttons are buried behind navigation.
Schedules sit below the fold: Guests must scroll extensively to find class times, adding friction.
Checkout feels disconnected: Redirects to a visually different WellnessLiving portal erode trust, causing abandonments.
As a result, potential clients abandon before completing bookings, support requests spike, and the studio loses revenue and engagement—undermining Ripple Effect’s promise of a calm, click-fast wellness experience.
After understanding the problem, I went on to design task flows that would help Carla solve these problems and build out the wireframes.
Task Flows
Before moving into design, I outlined two essential task flows to define what an ideal user experience could look like for Ripple Effect Wellness clients. These flows were validated by Carla’s needs and goals.
Key Flows Designed
Booking a Class or Session – A simplified journey that takes users from service selection to booking confirmation in as few steps as possible. This flow prioritized mobile responsiveness, so busy users could complete it quickly without frustration.
Viewing Pricing – A direct flow from the homepage to a transparent pricing page, eliminating the need to dig through multiple clicks or menus. This addressed a major pain point where users felt uncertain or mistrustful without clear cost information.
By focusing on these two flows, I created a streamlined foundation for Ripple’s responsive redesign. Booking is now simple and actionable, and pricing is upfront and trustworthy — directly supporting Ripple’s growth goals while improving the user experience.
Wireframes
Book A Yoga Class & View Pricing Details: Lo-Fi Iteration
Lo-Fidelity Sketches
With the task flows defined, I moved into low-fidelity sketches to explore how the redesigned experience could manifest on both desktop and mobile. These rapid drawings translated abstract workflows into tangible layouts, giving me space to experiment with navigation, information hierarchy, and interaction patterns before committing to digital wireframes.
The sketches concentrated on two core flows:
Viewing Pricing – Testing simple, scannable structures for surfacing costs in a way that reduced friction and aligned with user expectations.
Booking a Class/Session – Outlining a streamlined, predictable path supported by clear calls-to-action and fewer steps.
While these sketches were not tested with users, they played a critical role internally. They helped me quickly identify potential bottlenecks, refine the placement of navigation elements, and establish a baseline structure that directly informed the next stage: mid-fidelity wireframes.
Book A Yoga Class & View Pricing Details: Mid-Fi Desktop & Mobile Iterations
Mid-Fidelity v.1 - Desktop
The first set of mid-fidelity wireframes translated my sketches into digital layouts, establishing a clear navigation framework and page structure. At this stage, the focus was on usability rather than aesthetics.
Services & Pricing: I introduced dedicated sections to surface offerings more directly, making it easier for users to scan costs without unnecessary clicks.
Booking Flow: I designed a shorter, predictable path with visible CTAs, aligning with user expectations for streamlined scheduling.
Desktop vs. Mobile: Early side-by-side layouts ensured that the core tasks—viewing pricing and booking a class/session—remained accessible across devices.
These wireframes provided the first tangible opportunity to evaluate flow and hierarchy, highlighting areas where CTAs blended into the background or where navigation required additional clarity.
Mid-Fidelity Usability Test — Round 1
Five participants tested the two primary flows—booking a class and viewing pricing information to answer questions about what packages and memberships cost—on both desktop and mobile.
Key Insights:
Testers valued that pricing was accessible, but some struggled to locate it quickly within the navigation.
The booking flow felt approachable, but CTAs were occasionally overlooked when placed near other elements.
Mobile testers noted extra scrolling, which made task completion less efficient.
Next Steps:
To address these findings, I prioritized surfacing pricing earlier, enlarging key CTAs, and reducing unnecessary scrolling in mobile layouts. These changes were carried forward into Mid-Fi v2.
Mid-Fidelity v.1 - Mobile
Informed directly by Round 1 testing, the v2 wireframes introduced refinements to flow and hierarchy:
Navigation Refinement: Pricing was added more prominently into the global navigation, ensuring users could find costs at a glance.
CTA Visibility: Primary actions were enlarged and separated from secondary content to improve discoverability.
Mobile Efficiency: Sections were reorganized to minimize scroll fatigue while keeping flows predictable.
These adjustments reduced friction and created a stronger foundation for retesting.
Mid-Fidelity Usability Test — Round 2
A second round of testing with the same two tasks completed with different participants confirmed whether the refinements improved usability. Participants again completed both flows on desktop and mobile.
Key Insights:
Pricing was now consistently found without hesitation.
Enlarged CTAs improved clarity, making it easier to progress through booking steps.
Reduced scrolling made the mobile experience feel more streamlined and predictable.
Outcome:
Round 2 validated the effectiveness of the updates and gave me confidence to move forward into high-fidelity prototypes. There were no other issues in Mid-fi, so I moved forward into Hi-fi.
Main Changes Between Mid-Fi v.1 & Mid-Fi v2
Mid-Fidelity v.2 - Desktop
Mid-Fidelity v.2 - Mobile
Ripple Effect Wellness isn’t just a place to work out — it’s a studio built on community, clarity, and transformation. From yoga classes to sauna therapy to personal training, every offering is designed to help people feel supported and empowered in their wellness journey.
When approaching the responsive redesign, I kept the original aesthetic of Ripple’s design with their typography and color palette, which led to these three guiding principles:
Approachability – The site needed to feel welcoming and easy to use, even for someone exploring wellness for the first time. This drove decisions like simple navigation, friendly typography, and authentic imagery over stock photography.
Transparency – Trust is built when information is clear. By surfacing services, pricing, and booking upfront, I reinforced Ripple’s honest and supportive ethos.
Community Connection – Ripple thrives on relationships, so the site had to reflect that warmth. Trainer bios, local partnerships, and real client imagery were included to make the digital experience feel as personal as the studio itself.
Brand Values and The Why
Ripple Style Tile
Hi-fi Wireframes
Hi-Fidelity - Desktop
Hi-Fidelity - Mobile
After the Mid-Fi testing, I applied branding to the wireframes and then Hi-Fi testing was conducted on the prototypes for both desktop and mobile, with 5 participants completing the two core tasks: viewing pricing and booking a class/session.
Key Insights:
Confidence: Testers moved through both tasks smoothly, with no hesitation locating pricing or completing the booking process.
Clarity: Enlarged CTAs and refined spacing were praised for making actions feel more obvious.
Efficiency: Mobile participants noted the improved balance between content and scrolling, making the flow feel faster and more intentional.
Outcome:
This testing session of the prototypes demonstrated a cohesive, user-centered experience. Both flows were completed consistently and with ease, validating that the design refinements across mid-fi and hi-fi stages had successfully resolved earlier pain points. Feedback confirmed we were addressing real user frustrations: testers appreciated the upfront pricing, the simplified booking flow, and the clearer mobile layouts.
Test the Prototypes
Final Thoughts
Ripple Effect Wellness began with a clear problem: the studio’s welcoming in-person experience wasn’t reflected online. Initial testing revealed friction at every step — buried pricing, unclear booking flows, and mobile layouts that felt cramped and confusing. Through surveys, affinity mapping, and two rounds of wireframe and prototype testing, those pain points were reframed into opportunities: make pricing transparent, booking effortless, and the digital presence as approachable as the studio itself.
Each iteration sharpened both clarity and trust: surfacing pricing in the main navigation, enlarging CTAs for visibility, simplifying mobile layouts, and layering authentic brand elements — photography, earthy palettes, and approachable typography — into the final designs. By the last test, participants completed the two core flows without confusion and described the experience as “clear” and “easy to use.”
Ripple’s responsive site now delivers on its brand values of Approachability, Transparency, and Community Connection. It transforms the first digital touchpoint into a trustworthy extension of the studio, converting curiosity into action and setting the foundation for long-term client relationships. The next phase will focus on launching the site, integrating booking platforms more deeply, and measuring conversion on intro offers and memberships — ensuring Ripple’s digital presence works as hard as its in-studio team to support growth.