Prana Yoga Oxford
Prana Yoga Oxford recently opened up a gorgeous new space in Oxford and wanted a functional website that would match the aesthetic of their studio and allow students to book classes/workshops easily.
What I did:
Spoke with clients to find out their priorities when using studio sites
Sketched preliminary designs
Built the site using Wix Editor
Built and embedded widgets using HTML/CSS and MindBody Branded Webtools
Mobile-optimized the site
Business & User Goals
I conducted a stakeholder interview to determine business priorities and then guerrilla research to see what features of a yoga studio website students utilize most.
The studio staff wanted a beautiful website that would match the look and feel of their in-person studio and saw income generating activities (eg. class bookings, workshop bookings) as a priority. It was also important for the site to be as low maintenance and easy to update as possible.
Guerrilla User Research
I spoke to a number of clients about what they use the site for and how they use it: the insights from these short interviews revealed that clients use the site primarily to view the timetable and book classes.
After completing a comparative benchmark, I discovered that most yoga studio websites have embedded booking software. While the software could always be found through clicking through the navigation, it often took more clicks than necessary to find it. I also struggled to access the software in a non-embedded format at most studio websites. I wanted to make Prana Yoga's site stand out by making it as easy as possible to view and access the booking software in both embedded and non-embedded formats.
Ideate & Design
The folks at Prana Yoga Oxford wanted a website that would match the location's aesthetic whilst being simple to use and update.
From both business and usability points of view, it made sense to prioritize booking when building the site. My challenge was to build a beautiful site that would allow users to easily get to the information they wanted: namely, the timetable and means of booking (either on MindBody or on the embedded site widget).
Inspired by the aesthetic of the studio's interior, I chose a pastel palette with corals, dusty pinks, plums and deep teals. I chose thin lined, elegant font (Raleway) for titles and a highly readable sans serif paragraph font for quick readability.
I decided to build the site on Wix because the studio owner was already accustomed to it and could easily log in and update the site.
I designed the homepage to accomplish the following:
Clearly express the services and sense of community that Prana Yoga Oxford offers
Make the timetable and booking software very easy to locate and open
I tried to limit the amount of a text on the site to put emphasis on what matters: what Prana Yoga does and how a client can get involved.
The embedded timetable and MindBody booking software (both of which show the class timetable and allow for booking/payments) are both highly visible as pink buttons. When accessed on mobile, the MindBody software prompts the user to download the app to make booking through a phone simple.
In order to ensure that the view timetable button would be prominent on mobile, I removed the surrounding images that are visible on desktop. This also ensured that the studio Instagram handle and feed would be visible on most mobile devices to encourage clients to follow the studio on social media.
Unfortunately because of a limitation in Wix I wasn't able to make "Book on MindBody" as prominent here. I thought this would be an acceptable trade off, however, as clients are prompted to download the app when they click it and would access the booking system through the app directly after the first instance.
Embedded Widgets: Timetable and Workshops
In order to make the site as easy to update as possible, I streamlined all updates into the MindBody software and set them to automatically appear on the website through embedded widgets. This saves the folks at Prana Yoga Oxford an enormous amount of time, as they don't have to update two different sites each time they add a new class or workshop.
The embedded widgets presented a challenge because their automatic styling did not match that of the rest of the website. I had to override the existing styling with custom CSS to ensure continuity between the widgets and the rest of the site.
The code formatted in a difficult to read manner on MindBody Branded Webtools (see image below), so I used Code Pen to write and test the code out before copying and pasting it into MindBody.
Now any changes made to classes and workshops on the MindBody software automatically feed through to the website in a correctly styled format. This means changes only need to be made on the software rather than website and reduces overall workload for studio staff.
I wanted to ensure that contact information would be easy to find, especially since the new studio opening meant a new address which clients would need to locate.
Following UX best practice, I added the business address, telephone number and email address to both the footer (so it would be visible on every page) and a separate contact page.
Because the studio owner wanted to grow the Prana Yoga Oxford community and mailing list, I also added a MailChimp subscribe button to the footer.
Prana Yoga Oxford was extremely happy with the look/feel and usability of their new site. They have received a number of compliments on it and haven't had to make any adjustments on Wix since the studio launch in September 2019, since all the MindBody and Instagram updates feed through automatically.