From the very onset of the project with Scribe Labs, we knew we would be working with an awesome team, and in doing so, would produce one super awesome website. It's funny... After getting a years' worth of site builds under my belt as the "new guy" at Good Dog Design, I'm only now figuring out how much influence a client's attitude can have on the outcome of a project.

Starting with lunch at the Presidio Social Club, in San Francisco's Presidio, I knew this was going to be a fun one. The whole basis of the project would be to figure out how to combine the quantification of running as a sport, with the analytics and tech "nerdiness" that surrounds the up and coming field of wearable technology. Really, trying to find the intersection of sport and science. 

Our approach would be an iterative one, since we were given the freedom to explore, mainly in the realm of CSS and Javascript animations. Our goal was to develop a certain movement to the website that would portray this fusion of science with sport, in a playful but very analytical manner.  Initial wireframes were rough, but set the framework for what would become tools to actually "play" with the data... because, after all, thats what it's all about!

runscore-gif

 

Rather than following the standard Photoshop to HTML route, we chose to design in the browser. This approach was great in that it put code into my hands much sooner, and allowed us to start working on the UI elements and animations in their native browser environment in week 1. The immediate drawback to this approach is the lack of traditional design tools that photoshop prides itself on. Considering we didn't really know what the final product would look like anyways, hindsight says that we picked the proper route for this particular project. 

Nailing down the animations proved to be fairly tricky. We pretty much started from wanting everything on the site to animate as you scrolled passed, but eventually decided that excessive animations would tip the scales too far away from the science/analytical side. Again, striking a balance between the motion and movement of sport with the number-crunching science was key! The end result was a nice combination of interesting element motion without becoming overly flashy.

container-animation 

run-compare

 

Overall I think that the combination of animating UI elements AND data analysis tools blends the beautiful design that Good Dog Design prides itself on, with the actual analysis that users of the runScribe expect. I am tremendously excited to see the next step in the proliferation of wearable technology coming to life, and I'm very thankful to be a part of the latest and greatest in running tech!

-Alex