Design Evolution
Since we had decided early on that we wanted a working product to be tested on real people, we jumped into code in January--even before we felt we had nailed the concept. We knew we wanted to convert bike rides into visualizations. But beyond that, we weren't really sure if we were building an eternal tracking application, or a 2-week game. All we knew was that this was not possible to build all on our own, and we got developer Yang on board.
The next few months had a good mix of sketching and coding in HTML/CSS and Processing. As we collaborated closely, we never created any clear deliverable document, but made decision on the fly, at a cafe on a napkin, or directly in the code. We simply knew that in mid March, we wanted to have something that could be tested on a group of people, and we worked hard to reach that goal.
Figuring out how to communicate the main concepts:
Primary sketch that directed the initial build of the gameboard:
Navigation concept:
Developing the navigation concept:
Ideating around visualizing data:
Imagining social media integration:
We started with the core of our product--the gameboard:
Our project is coming along! We are currently coding up the front-end using HTML, CSS, and Processing at paintyourcity.com/spoked. The rides you see on there are our recent rides drawn in Processing. Carrie is pink, I’m yellow. We’re battling with colors. Yeah! However, these rides are currently pulled from a static files.
Our awesome developer buddy Yang Yang has written some scripts and done other developer magic to pull all our rides from an email account into a database. Above you can peek into our data. Below you can see the first attempt to visualize our data directly from the database:
And finally, we have a splash page up at http://iamspoked.com. The model has such a beautiful bike. But shame on that girl for riding on the sidewalk!
Oh yes, our SPOKED site is seriously good-looking right now! We’re spoked and proud that we have a working thing. We owe all database and javascript magic to Yang Yang. We’re also super happy that a few of our classmates jumped in to donate data to us. It’s very valuable to have more rides than just mine and Carrie’s when figuring out how to visualize and animate the rides. Thank you to Allison, Guri and Tina for tracking rides and sending them into a black hole. Hopefully our developing cocoon will very soon become a colorful butterfly for all to see :)
We’ve developed different views when looking at the map. You can go to a certain profile, or you can see one person’s rides versus someone else’s, like above. Yes, Carrie is beating me. Arrgh.
We’re using the most amazing organization and collaboration tool, Trello. Totally addictive. So very satisfying to move the cards from To do to Doing to Done. And I think it’s even moving us forward in our process. So that’s good.
One would think that when we’re that deep into code, there’s no turning back. But there is. Sometimes, when new features add complexity, we need to use paper and yarn to make sense of it all. Does it make sense now? We hope so. Cause we’re launching a prototype test very, very soon.
When the gameboard was ready for onboarding, we made our first version of the web site front page:
We continued developing the front page. See more updated version in the Final design section.
