Blog

Wednesday, December 21, 2011

Recent Launch: Yellow Bird Project Redesign

Earlier this year, I upgraded the Yellow Bird Project, a Spree store, from a forked version pre v0.90.0 to v0.50.x. For for my final project of the year, I upgraded Yellow Bird Project to v0.70.x, along with the implementation of a UI redesign. Jenna Holcombe (Dynamo) did a great job moving the YBP look to a grid-based design, which Daniel Wright (Dynamo) implemented this in Sass/Compass.
Since the redesign initiative included an upgrade to the latest version of Spree, I decided to upgrade the existing site and deploy that to production, before launching the redesign. This allowed me to upgrade our custom extensions to work with 0.70.x and iron out any kinks in the new version. While this was a smoother process than the upgrade earlier this year, it was the first time I had deployed to Heroku's Cedar stack using Rails 3.1 and the asset pipeline. I'm a big advocate of breaking down a project, separating major changes, and getting changes pushed to production early, even it there is a little duplication in work. The separate pushes to production for the upgrade and the redesign reduced the risk of something really going haywire with pushing both of these at once.
The redesign benefited the application from a platform, merchandising, and coding perspectives:
  • Platform: While this initiative did not include a mobile version, the new grid-based design will allow us to cleanly develop a responsive design for mobile platforms in the future using media queries. Replacing hacks like Cufon with more modern technologies like web fonts just makes the UI code cleaner and performance snappier.
  • Merchandising: The store now fully utilizes Spree's powerful Taxonomy and Product Group features. This allows YBP to respond to different marketing initiates such as seasonal events, for example Warm Winter Wear.
  • Code: One of the cool things with this upgrade was the chance to refactor the code base. Shifting from ERB to Haml and plain CSS to Sass/Compass was a definitely a plus, however implementing a data model that capitalized Spree's catalog management was the biggest win. I was able to remove unnecessary extensions which simplified managing the products. YBP's Matthew Stotland is a code-savvy lad and appreciated the clean implementation. It's great to work on a project where the client appreciates the front-end as much as the code that drives it.
You can checkout the new design below, but better yet, visit the Yellow Bird Project and support a great cause.
01 home
Yellowbird Project Product

Please note this blog is no longer maintained. Please visit CivilCode Inc - Custom Software Development.