Outgrowing the tech stack
Since 2006, YYoga has been supporting people’s commitment to whole health and can be credited for helping make yoga in Canada mainstream. With roots in the vibrant West Coast yoga scene, the company has now grown to 12 studios in Vancouver and Toronto offering over 900 classes per week.
We first met with YYoga shortly after they realized that rapid growth was stretching the technical capabilities of their existing website and mobile app:
- Adding and editing online and in-app content was cumbersome and led to creating multiple hacks for mediocre results
- The CMS was counterintuitive and caused ongoing frustration because of its limitations, which also affected the app synchronization
- The tech stack supporting two codebases was overly complex and difficult to update or modify in any way
- Many disparate systems and custom tools drove overall costs through the roof, making these solutions unsustainable in the long term
In other words, YYoga’s app and website were now hindering, not growing the business.
Just before our engagement, YYoga made a decision to discontinue their mobile app in favour of creating a digital experience that would be suitable for all devices. The company needed something that fulfilled the growth requirements, without being bloated or over-engineered, something flexible and nimble. They were ready to start over.
In planning the evolved online platform, we had to make sure that every change we made would nudge the brand in the right direction. Although not the focus of the project, the YYoga brand is manifested through the website, from which all other communication channels derive their tone and aesthetic.
Better web architecture to better business
To begin, we needed insights from people who used and managed the website daily. We scheduled discovery sessions with key personnel from respective departments to get to the bottom of the challenges they were facing and, in the meantime, researched limitations of all the third-party tools the current website relied on.
Rather quickly we realized that the bulk of the issues could be solved by introducing a new streamlined CMS that put content editing first. The second part of the project would consist of completely rethinking the user journeys through the website while seamlessly leveraging the required third-party integrations. The last stage would involve re-engineering the infrastructure from the ground up to significantly lower the maintenance costs as well as introduce a highly scalable foundation.
We dove into the content audit, gathering and analyzing every page to understand its role within the website. Who was it for? How do users interact with it? How often is it updated? Based on those findings, we restructured the content architecture to make users flow through the website effortlessly, whether they are using a laptop at home or a tablet at the yoga studio to sign up right before the class. Once the flow was finalized, the UX designer worked through the best ways to properly display the content hierarchy within each page.
Extending the brand, we took inspiration from the material design language, infusing it with YYoga’s essence. This produced layouts with more white space and clear hierarchy, making them look lighter, even on text-heavy pages. We considered how typography influenced the readability of the website and opted for a modern, fresh balance between serif and sans serif fonts. Overall, the design championed usability over excessive decorative elements. Every detail served a purpose and added to the experience.
To overhaul more than 800 pages of the website (yes, for real), we created an array of content modules and interface components and reused them throughout the website. The consistency achieved through this approach created familiarity for users in interacting with the website while streamlining the design and development process.
The aggressive schedule of this project kept the development team busy throughout. We completely rebuilt the website’s architecture, setting up and optimizing servers with auto-scaling and self-healing configurations. For the backend we chose Craft, a very intuitive and simple CMS, that is adept at creating custom content models without any needlessly excessive features introduced by more common solutions like WordPress or Drupal. This lightweight architecture also allowed us to build custom integrations with the Mind Body Online platform used by YYoga for class scheduling and registration.
The new website seamlessly transferred its beautiful, thought-through experience to mobile. Besides having access to full functionality, users could add the website to their Home screens and get the look and feel of a native app within their phone’s ecosystem.
In summary, launching the new, beautiful and robust YYoga website was quite a feat. The new yyoga.ca improved its experience on every level and continued to make over 500,000 monthly users very happy—all while launching with zero interruption to web traffic. Since then, we’ve been closely monitoring changes in user behaviour. The improved development environment and nimble architecture is allowing us to continuously adapt and evolve the website to provide an even better experience for YYoga clientele.