Launched 3 years ago
- Creative Director
- Jon Lax
- Art Director
- John Kumahara
- Jason Holland
- Additional Developers
- Marc Bodmer, Leigh Farrell, Nery Orellana
- Kim Lawless, Kyra Aylsworth
- Project Manager
- Kevin Quan
About the ClientYogaGlo is a service that offers online yoga classes that are professionally shot with certified instructors and that range from beginner to expert in a variety of styles.
Working in Teams
Our team was split into two – one team to work on the app itself, a web app, and the another to work on the marketing site. I was originally working on the app but was then moved to the marketing site, which is what you see here.
Our team designed and developed a clean and elegant looking “brochure,” filled with persona profiles, feature details and of course, sample classes to test it out.
Lots of Video with Real Members
The project was obviously video intensive, which was part of the fun. We used a lot of HTML5 video with all the necessary fallbacks - yes, even Flash. Some of our team members, namely our art director and designer, went out to California to work with a photographer and capture some photos and video of real YogaGlo members, who were kind enough to allow our team to document their passion for yoga. The result gave us some really great content to tell some stories about the different kinds of people that use yoga in their daily lives and how they use it in various ways.
This project was also my introduction to CSS viewport units, which we took full advantage of, though it required some extra work for those fallbacks. Support for them wasn't as great as I'd normally prefer, but this project was all about doing those extra details, so it was something we wanted to get right, and after long nights of testing media queries, pixel pushing and some old fashioned trial and error, we did. Ever since, I've used them liberally, as seems to be the trend. Thankfully, as I write this, the browser support is much better.
What Was Learned
Honestly speaking, the project was a lot of fun to work on and the YogaGlo team was really easy to work with. I think overall our team really enjoyed the experience (some of them even work there full time now!), and I think I personally learned a lot from the process.
One of the things our team tried for the first time was using BEM syntax when writing our CSS, or rather SASS, and I haven't stopped it using it since. We had originally been using LESS, only because it was slightly easier to get into when you're first trying out CSS preprocessors, but SASS made more sense the more we used it, and again, I have continued to use it myself ever since.
At a higher level, making the swap from site design to product design and back to site design made clear the differences between the two in a way I hadn't seen before. Going through the motions of having sprint cycles and daily scrums definitely solidified a more structured routine than I had been to used to in the services industry. I'm really glad and grateful that I had the opportunity to work on such a rewarding project. Great team. Great client. What more could you ask for?
What Went Well
The agile process felt successful. Our sprint cycles were regulated with daily scrums and we felt very aware of where we landed each week, whether that be as expected or not. Adjusting on the fly became normal and after a few weeks of employing that kind of agility, we could see how features and UI elements came together.
The photography and videography for the customer stories worked out really well, as the content was authentic. The app itself came out very smooth and performant. Our motion graphics team put together some really nice animated GIFs to demonstrate key actions and show off new features that really made the site come to life.
Most fun and rewarding for me was working on the "Add Class" call to action - arguably the most important button in the app. The designers and I spent a full week working out a nice and playful animation to let customers know their class has been added to their favorites. The animation was around 3/4 of a second and had some neat effects inside the button to indicate the success status.