SNAPMapper Takes Third Place at Alameda County Hackathon

SNAPMapper, our mobile "Yelp for food stamp users" app, took third (out of 24) at the Alameda County hackathon last weekend. There was a fantastic amount of creativity and great ideas, all geared towards improving services and access to services for the residents of this huge urban and suburban area.

Currently, people on the state CalFresh and Federal SNAP food assistance programs can find only the location of stores that accept this payment service; the data says nothing about quality, service, availability of fresh food, etc. (that is, the nearest three places may be liquor stores and gas stations). SNAPMapper allows users to locate, rate, and give other feedback about these stores, helping all users learn where they can find healthy, fresh, and inexpensive food for their families. We also hope that this would provide incentive for stores to stock healthier food.

(Our research confirms that a majority of the population in question has access to a smart phone; these phones may, in fact, be their only source of internet access.)

Our data can easily be scraped for the county to match against its own demographic data about CalFresh and SNAP users, to track the efficiency and availability of services.

Since the data we used is nationwide, SNAPMapper could easily be adopted by every county across the United States.

We look forward to working with the county to make SNAPMapper a fully functional web and native app.

Partial Victory in Public Interest Project

View fullsize

There's still a lot to do on just this desktop web app (adding a slider for number of months of interest computed, labels, cleaning up CSS, responsive), but broke through some JavaScript/JQuery issues and it's functional so far. [caption id="attachment_823" align="aligncenter" width="300"] Basic credit card interest calculator -- part of a larger project[/caption]

The live version of this is here.

Once I add the slider (and get it working), then comes: changing it all to JQuery Mobile, customizing the styling and theme (are those substantially different terms?), and starting to learn Phone Gap.

The ultimate goal: This will be part of a public-good project that offers mobile phone users easy tools for visualizing how much each purchase will cost when credit card interest is factored in, for helping users learn how to pay down credit card debt, and about credit card terms and conditions.

New Article at UXMag.com

Belated notice on this, but go read my new(ish) article about the design challenges facing the iPad as an e-reader. It's up at UXMag.com.

What I Did Last Weekend (WSJ Data Transparency Edition)

I was lucky enough to attend the Wall Street Journal Data Transparency Weekend hosted at NYU and work with a fantastic team led by Prof. Ed Felten of Princeton (and the FTC). The project was very data-driven, so the UX work came at the very beginning and the very end: If our concern was surfacing privacy and surveillance issues to users, how can we build the needed database and then present the relevant information? Could we assign a letter grade to sites based on our desired criteria of third-party cookie use, adherence to Do Not Track requests, and allowing users to opt out? Looking at the user needs, we didn't want to provide a site or app that users had to visit separately, load a URL, see the results, and then decide whether to continue or not their everyday browsing and interactions. We realized we could build this as a browser extension; this would be unobtrusive but persistent, and could be hidden or exposed (we later added automated presentation of the site's "grade" in the extension icon, so users could immediately see the site's letter grade). This, we hypothesized, would more powerfully link the experience of visiting a site with knowledge of the site's privacy attitude. It was our hope that this would more likely spur user action based on a state of information, making our extension an effective sousveillance tool.

We crawled the top 500 Alexa sites on 4/14/12 and we logged all cookie downloads that resulted from those crawls. We performed three different crawls:

* first, with a clean-sate browser without any opt-out cookies or do not track requests * second, with the BeefTaco extension active (which downloads most opt-out cookies) * third, with the "Do Not Track" request option selected in the browser

We performed these different crawls to analyze if the sites honored opt out cookies and/or “Do Not Track” requests from the headers. Based on these crawls, we graded the top 500 Alexa sites and relevant third-party networks. Raw data from the crawls will be located at trackingcookie.info in the future for reference.

The resulting privacy grade (from A to F) for sites is based on what they do with their users' data. These grades reflect how well or how poorly that sites utilize their users' data.   We give stellar grades to first-party sites that: • do not allow a large amount of third-party networks to be called on their site (and do not let a lot of third-party networks to download tracking cookies on the visitor's browser) • honor both “opt-out” cookies and “do not track” requests

We give poor grades to first-party sites that: • call a lot of third-party networks and then those third-party networks download multiple tracking cookies on the user's browser • call third-party networks which have poor quality scores themselves (because the third parties do not allow for cookie opt out or do not honor "Do Not Track" requests) • continue to track users online behavior even after the users opt-out of online tracking through the use of “opt-out” cookies • continue to track users online behavior if the user turns on the “Do Not Track” option in their browsers

The current iteration of the extension presents this data in a three-pane column view. The left column shows the first-party site name, favicon, Yes/No to the presence of third-party cookies, and a graphic summing up the grade for the first-party site. The center column lists the names and companies of the third-parties (if any): even if users aren't interested in seeing details, a quick glance gives visual indication whether there are any, a few, or many. More advances users can click on any name listed in the center column to progressively reveal more data about each third-party, including details how it scored on our grading criteria. And, as said above, non-technical users can still see, even with the extension hidden, the letter grade as highlighted in the extension icon in the browser's status bar.

More information and the download link for the current extension are available here and here.

We also sketched out future direction. We'd like to incorporate a subset of the Mozilla Collusion plug-in to replace the center column with a graphical representation of the discovered third parties that shows their scope and relationships. Users would still be able to progressively disclose or ignore details in the third column.

#DigitalWe is Whee

Frankly, I just don't have enough exposure and experience to figure out when something is a workshop, a conference, or a meetup. They are all very cool, in that you get to see great work being done and learn a lot. It's just that the taxonomy is a bit arcane. In any case, I was lucky enough to attend last week's Digital We from the Social Apps Lab at CITRIS at UC Berkeley. There were fantastic presentations from a range of people within and across disciplines, all with a common interest in increasing people's participation in social causes and society. The participants ranged from a social scientist trying to come up with a "phylogeny of forms" of participation (I'll steal Alenda Chang's links to Kelty's works: “Birds of the Internet” and Two Bits: The Cultural Significance of Free Software) to undergraduates implementing a very Crowdmap-like tool for tracking and combating the spread of dengue fever (sorry, no direct link, but background here).

(You can see more updates by searching the Twitter hashtag #DigitalWe.)

Two notes -- one personal and one professional.

The professional is that one of the overarching themes of the day, sometimes stated explicitly, is that neither technology nor social science would be sufficient to save the day. Not only are both necessary, but both working together (sorry, those who dream of entirely computer-generated products) are needed for designing products, tools, processes that are efficient, effective, and engaging. Hearing this as an I School grad, it was very, very cool to hear that the way we were thinking about things there isn't totally off-base, or limited to our own little world.

The personal is that I would love to work in this sort of environment. Or this environment. So many of the skills we learned at the I School can be and are applied in these projects, though the sharing of expertise, research, and background is still far from transparent and frictionless. Researching how people think of doing things, what their actual problems are, and ways to help them naturally and engagingly make themselves and the world a better place. What can I say? I'm a sucker for the campfire rule.

Campagnolo, Logos, and the Jet Age

Christian Annyas is, apparently, a bike as well as typographic geek. On his blog he takes a look at jersey design and component logos in the most recent Tour de France. How did Christian know how to entice me with two of my favorite things? I will admit to being a bit confused by his judging that this year's jerseys are "possibly the best designed of all time." This is in part because he savages most of the designs while the few he lauds... well, I just don't see Leopard-Trek as particularly good layout and color. Granted, there are none of the truly weird designs of the past such as the Carrera bib shorts or the not-so-slimming-stripes of Atala (one year they were helical like a barber's pole), but the class of 2011 seem to diverge between carelessly gaudy (Saur-Sojasun, I'm looking at you) and plain (Team Radioshack and, again, Leopard-Trek). Team Sky does manage to pull off the understated, in part because of the black base but also, I think, due to the higher placement of the green band; this means the black flows over the breastbone-to-belly area, which is problematic when most people are in a proper cycling position. In contrast, the Leopard-Trek jersey just looks like it gave up at some point and lacks balance. I agree with Annyas on AG2R La Mondiale, BMC, and Garmin, but three good design solutions out of 22, with a few in-betweeners -- would your company take that as a win?

But what I want to get to specifically is the Campagnolo logo, as it changed between 1960 and 1974. I'd love to Christian to address this (and the other logos), because I'm sure he could add comments that would be a hundredfold more historically and typographically insightful. I'd also love to hear from any people with experience in this area.

Let's look at the 1960 version:

The image Christian found looks to be a slightly decayed sample, or scanned off of a porous surface such as a cardboard component box; an older but cleaner version can be seen on the Velo-Retro site (it's to Christian's credit that Google searches for "Campagnolo 1960" returns his site pretty high up in the results). So we can see that the radiant lines around the globe and the letter shadows aren't meant to look distressed by design (though that may have been how most people saw it on shirts, boxes, paper, given the print technology of the day). But the logo does look to be of a time: I look at it and see a newspaper masthead or a movie studio sign from a day when men wore hats and women wore gloves. The globe signifies "worldwide", but at that time travel was hard, the world as a whole wasn't accessible, and so the idea of seeing the globe as a whole was new, like a rising sun.

The revamp Christian next shows has a vastly simplified globe (still with latitude and longitude lines), fewer rays, and no drop shadow to the lettering.

I don't really feel qualified to comment on the font change -- there's a slight modification of stroke width, letter height, and something new with the "g" -- but the overall sense is one of lifting off from layers of cruft, of more abstraction from the earth, which is by 1974 something everyone has seen from satellite photos. What else has happened? Two words: Pan Am.

In 1957, Pan Am moved from a "globe and wing" logo to the modern version (some images and unverified background). You can see a possible influence on Campagnolo's later change in the stripping of real features from the globe, the recognition of recognition of the planet as an icon. Pan Am's influence around the Western world was deep and wide: its modern HQ broke the Manhattan skyline in 1963, and even before Apollo 11 Pan Am was seen as the logical way to get into space (note: the historical "Clipper" or Orion Space Plane is currently in collection at the Sci-Fi Airshow).

Of course, chronology does not mean copying. The point I mean to make is that it could be that similar influences and perceptions led Campagnolo towards a certain direction. Years passed between Pan Am's major redesign effort (which included years of research) and Campagnolo's simplification. In fact, I'm asking all of you who know more about design work from that period to chime in.

And this isn't to say Campagnolo was full speed ahead to the Space Age and modernist design. These two designs for frame stickers are dated by Velo-Retro as coming from 1953 and 1967. Both seem to use the pre-1970-redesign font, though the latter seems to have done away with the longitude lines, probably due to the small size of the sticker, which was to go onto one or more of the tubes of a bike frame. Both have the World Championship "rainbow" colors across the globe, though.

And how did Campagnolo move into the future past the Space Age, post 1970s? By simply abstracting out the globe entirely. The brand isn't just worldwide, it is the world.