You've caught me mid development. I'm working on the site, so if you see something missing or broken, that's why.

YogaGlo

Launched 3 years ago

Role
Development
Technologies
  • CSS
  • HTML
  • Javascript
Framework
Ember
Agency
Teehan+Lax
Creative Director
Jon Lax
Art Director
John Kumahara
Designer
Jason Holland
Additional Developers
Marc Bodmer, Leigh Farrell, Nery Orellana
Copywriter
Kim Lawless, Kyra Aylsworth
Project Manager
Kevin Quan

About the Client

YogaGlo 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.

10 Person Team
Ember
3 months
* The time spent on the project indicated above is the time it took to launch the project. Some projects are ongoing and some aren't. The time is generally accurate but in most cases it isn't exact. Most freelance projects were completed in the evenings and on weekends and most often not consecutively.
#ea5033
#78a590
#01b9d3
#cb6e21

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.