Yoga With Deni — a local yoga studio in Wantage
Helping a beginner
find and book their
first yoga class
A redesign of the website for Yoga With Deni, a small studio in Grove, Wantage run by one instructor. A team project focused on a single task: booking a group class. I worked across every stage and set up and ran the remote usability test.
The problem
Yoga With Deni offers group classes, private sessions and yoga events. The old site made it hard for new students to understand what was on offer and book a class. Class descriptions were long blocks of text, the photos did not show what a class was like, and the path from “I’m interested” to “I’ve booked” was unclear.
For a one-person studio this matters: the website is the main way new people discover Deni, and every visitor who gives up is a lost student.
Our goal: make booking a group class simple and clear, especially for beginners.
We worked through five stages: heuristic analysis, competitive analysis, card sorting and interviews, sitemap and sketching, then a prototype and usability testing.
Research
Research showed the problems were less about how the site looked and more about clarity: users could not find the details they needed to choose and book a class.
Heuristic analysis
We reviewed the existing site against Nielsen’s usability heuristics. Five stood out.
| Heuristic | What we found |
|---|---|
| User control and freedom | The navigation did not clearly let users get back to the homepage or recover from a wrong turn. |
| Consistency and standards | The navigation and login area did not follow familiar website patterns. |
| Match between system and the real world | Photos were vague and unclear (silhouettes at sunset), so users could not tell what the posture or class style would be like. |
| Aesthetic and minimalist design | Class descriptions were long, dense paragraphs. Key details such as level, day and time were buried in text. |
| Help and documentation | There was little guidance for newcomers, such as an FAQ or clear booking instructions. |
User interviews
We interviewed people who were interested in yoga. Five themes came up again and again:
- Visual enhancement. Imagery should show real classes and help people picture themselves there.
- Relevant details. Users want level, duration, schedule, price and instructor at a glance.
- Content optimisation. Shorter, scannable text instead of long paragraphs.
- Simplicity and clarity. A clean layout with an obvious next step.
- Booking procedure. Booking should take a few clear steps, with the schedule close to the booking button.
Who we designed for
We turned the research into one primary persona, Sophie: a beginner who needs clear information and confidence to try her first class.
“Engaging in a sports activity as part of a group keeps me motivated to stay active.”
Sophie, 39, is a full-time teacher living in a village south of Oxford. She wants to get fitter but has no sporty background. During the COVID-19 pandemic she tried online workouts, but realised she prefers exercising in a group. Yoga caught her attention.
| Goals | Find exercise suitable for beginners. Improve fitness and wellbeing. Join group activities that build social connections. |
|---|---|
| Needs | Clear information on schedules, difficulty levels and instructors. A welcoming environment for beginners. Class times that fit around her work. |
| Challenges | Finding relevant, accessible classes online. Choosing a programme that suits her level and schedule. Feeling self-conscious about trying something new. |
| Behaviours | Searches YouTube and social media for inspiration. Clicks on ads that match her interests. Prefers group, in-person activities. |
Sophie’s journey
A three-frame storyboard shows the journey we wanted to shorten.
This framed our main task: get Sophie from discovery to a booked class with as little friction as possible.
Structuring the site
Card sorting gave us a navigation built around how users think: Classes, Events, About, Contact and a personal profile for bookings. Participants grouped topic cards from the site, and the clearest groups were:
| Group | What users put in it |
|---|---|
| Classes | Fitness level, group classes, activities in each class, duration, class size, benefits of each style, testimonials, classes for couples or friends, yoga for seniors, prenatal yoga, online courses |
| Events | Buying tickets, location, adding the date to a calendar, facilities (meals, changing rooms, mats, parking), number of people, deposit payment |
| General info | FAQs, contraindications, recovering from injury, yoga with other wellness practices, age restrictions, price, payment methods, drop-in class pass, cancellation policy |
| Contact | Location, contacting the instructor, personal or private coaching |
| Header | Try-out class pass, special offers and discounts |
| My account | Class schedule, enrolled courses, newsletters, event tickets |
Two sitemap iterations
Iteration 1 put FAQ in the main navigation as its own section (class-specific and general FAQs), alongside a separate booking information page under Classes and social links under Contact.
Iteration 2 simplified the main navigation to five items. FAQ and social media links moved to the footer, so the top level focuses on the main tasks, and the Classes section was flattened to group classes, private classes and pricing. My Profile gives returning students one place for upcoming and past bookings and class passes.
The top level now matches the card-sort groups, and a beginner reaches any class page in two clicks from the homepage.
Sketching the key screens
We sketched by hand on paper to explore many layouts quickly before committing to anything digital. We focused on the two screens that matter most for Sophie:
- Homepage. A hero banner with a short welcoming message, clear navigation and a direct route into classes.
- Class booking. A weekly timetable with each class listed by name, time and level, with a book button right next to it.
The design
The visual design keeps the calm, minimal feel of a yoga studio while making key information easy to scan.
Style guide
- Typography. Emirates Group Regular, in Medium and Light weights, giving a light, airy feel.
- Colour. Muted teal as the primary brand colour, soft grey, a deeper teal for accents and buttons, and white for generous space.
- Imagery. Bright, real photos of yoga poses in place of the old dark silhouettes, so users can see what a class involves.
The new homepage
It opens with a full-width photo and the message “People-centred yoga classes that strive for inclusion”, which speaks directly to beginners like Sophie.
Usability testing
I set up and launched a remote, unmoderated usability test of the prototype on 3 May 2024.
The high drop-off was a finding in itself: it showed the test set-up needed as much care as the prototype.
What I took from it
- Good UX for a small business is mostly about clarity: helping one nervous beginner find one class and book it.
- Research changed the design. Card sorting and the second sitemap iteration made the navigation simpler than we first planned.
- Testing is part of the design. Five out of eight participants abandoning the test showed me that the test set-up needs as much care as the prototype. Next time I would pilot the test with one person first and keep it short.
- Working as a team of four meant combining four sets of findings into one direction.
What’s next
- Running a second round of testing with more participants.
- Designing for mobile.
- Measuring success with booking completion rate and time to book.