We had the folks from Facebook join us at SVA for a workshop Saturday morning. So, with the help of our classmate, Benjamin Gadbaw, we imagined how SPOKED could be shared through a Facebook app.

SPOKED Choose your color. Track your bike rides.
See your snazzy patterns emerge on your city map.

In her Facebook timeline, Kristin sees a comparison chart between she and her friend Carrie. While she has been consistently riding, she notices that Carrie has been consistently slacking. It hasn’t even been raining lately. She wonders what’s keeping her off.

Kristin comments on the chart to encourage Carrie saying, “Holy Cow! Carrie, you should ride tomorrow! It’s going to be sunny and beautiful!

When Carrie sees the message, she goes to the SPOKED website to see what’s been happening on the streets of New York lately. Her friends have been taking their typical commutes to work and it looks like a few rides to the park, but her personal map is completely blank. She thumbs through some archives, because she knows she’s done better in the past.

The next morning, even though she’s fallen off the boat, Carrie is determined to make some marks on her city. She ditches the subway and the coffee routine she recently fell in love with, and wrestles her bike out of her tiny apartment.

She starts tracking on her SPOKED app before taking off. She’s got to prove to Kristin that she can do it. While she’s had a couple weeks off, she feels pretty good to be on two wheels again. Not to mention, the two hours of fresh air, make her so happy!

Kristin sees in her ticker that Erin is on her bike cranking up miles across the Brooklyn Bridge. She smiles and sends some encouragement her way.

Later that day, SPOKED shares with the biking community that Kristin and Carrie both biked over the Brooklyn Bridge this morning. The story is paired with a photo of their paths.

Dave, a former colleague takes notice. He wonders, “What is SPOKED?” He actually sees that a lot of his friends are riding bicycles and tracking on SPOKED. He decides to join and give it a try.

[Work happens]

The next day, Carrie sees a notification that Dave joined SPOKED. She’s excited, and writes to him the next day, “Hey! You’re biking! Are you still riding from Chelsea? I’m heading home to Carroll Gardens at 7pm. Ride together?”

Carrie and Dave ride home together that evening. Mid-ride, while stopped at a red light, Dave gets a message from Paul. “Hey! You should stop by the Spotted Pig for a beer and burger. They are both deliciously fabulous there.”

They decide to stop and reminisce on the good ‘ole sleep-deprived days of grad school, and toast to having a life again.

FEB 16
I have a basic processing sketch rendering in the browser (Firefox). However, the geo-data is not rendering in the browser yet. The solution? Start with a very simple processing sketch that plots one ride, then start building from there. Also, call Yang, Amit or Jer Thorp.

FEB 15
- learn how canvas works
- sprinkle in codeacademy tuts
- get one ride rendered in processing to show in the browser (data?)

Resources:
Loading processing sketches
Processing.js example, Ask Ken, doing much of what we want on the front-end
Elevation processing code
Basics of Canvas—Processing.js is a framework for canvas, so we shouldn’t have to do additional things in the web-browser defining the canvas; it’s all done in processing.

FEB 14
Simple processing sketch works in Firefox and Safari
Note: sketch does not work in Chrome, but could later with some troubleshooting with the help of ErisDS; for now, we will test primarily in Firefox.

In dropbox >> thesis >> processing >> hello_web >> hello-web.html

One map image is ready to test in processing.
Does not display the image when image is native to the processing file. Need to research. (I think the image should be displayed in HTML)

Next steps:
- get image to display

- get canvas element to display over the entire background
scale canvas element to fit page: Stackoverflow, Automatically scale the HTML5 canvas element to fit the page
related: Stackoverflow, Center both vertically and horizontally

- start experimenting with width and height options to size with browser size (determined in processing or in canvas markup)
Possibly something like this in Processing:
size(DeviceSettings.view_width,DeviceSettings.view_height);

- look into centering the map on the page

Notes per our conversation
February 2, 2012, NY & Company

VALUES
Call out the key principles/values that our audience stands for. (ex: lifestyle, pleasure)

State the value propositions:
For riders
- document of bike trips
- share your data for bike advocacy
- engine for exploration and curiosity (needs to be better stated)
Business
- data to advocate for and inform placement of bike lanes
- (more)

The string on the handlebars—a grassroots signifier of riders being involved (using the product) and tracking

NAME
Consider the order and architecture of the language we’re using
Is everything mapped to an artistic act?
What do you call your users?

STYLE GUIDE ELEMENTS
title
logo
tagline (baby)

service offering
copy nuggets (commentary)
- weather
- how you’re doing
- what your friends are doing
- neighborhood facts

weather (right now in New York)

style guide
- buttons
- sliders
- profiles
- callouts

color palette
- background
- text, etc
- color guide for riders

map
- neighborhoods
- photo share

poster
- data comparisons
- statistics
- over time
- distance
- hood info
- progress over time

global elements
- header
- footer

Brand name: The name of your company or service.
–

Overview: A short overview of your brand‘s personality. What makes your brand personality unique?
–

Personality image: This is an actual image of a person that embodies the traits you wish to include in your brand. This makes the personality less abstract. Pick a famous person, or a person with whom your team is familiar. If your brand has a mascot or representative that already embodies the personality, use that instead. Describe the attributes of the mascot that communicate the brand’s personality.
–curious, charming, practical, quirky, playfully competitive, approachable, unassuming, classic, simple, intriguing, in touch with the city as a local with facts, witty, chill, driven, respectful, Bill Cunningham, Stephen Fry, Jamie Oliver, Anthony Bordain (Eataly), daring, Gorilla coffee, sophisticated.
Not: Intense, bossy, show-offy, insistent, two moon.

Brand traits: List five to seven traits that best describe your brand along with a trait that you want to avoid. This helps those designing and writing for this design persona to create a consistent personality while avoiding the traits that would take your brand in the wrong direction.

Personality map: We can map personalities on an X / Y axis. The X axis represents the degree to which the personality is unfriendly or friendly; the Y axis shows the degree of submissiveness or dominance.

Voice: If your brand could talk, how would it speak? What would it say? Would it speak with a folksy vernacular or a refined, erudite clip? Describe the specific aspects of your brand’s voice and how it might change in various communication situations. People change their language and tone to fit the situation, and so should your brand’s voice.

Copy examples: Provide examples of copy that might be used in different situations in your interface. This helps writers understand how your design persona should communicate.

Visual lexicon: If you are a designer creating this document for yourself and/or a design team, you can create a visual lexicon in your design persona that includes an overview of the colors, typography, and visual style that conveys your brand‘s personality. You can be general about these concepts, or include a mood board.

Engagement methods: Describe the emotional engagement methods you might use in your interface to support the design persona and create a memorable experience. We‘ll learn more about these in the next chapter.