designers @ hackathons

designers @ hackathonsEric Bell

@ericthebell

@ericthebell #UXinSpace

Just a guy

• UX team-of-one at Addvocate

• Moved to Bay Area last summer

• Tokyo and Seattle previously

• Design by way of info science + HCI

• A fan of platypodes

Hackathons 101

@ericthebell #UXinSpace

typical hackathon

• weekend event, Sat-Sun

• some focus/theme + rules/prizes

• pitches, teams form, 24~36 hrs of hacking

• food, sometimes overnight venue

• generally free, sponsor-covered

@ericthebell #UXinSpace

themes• solve a problem in an area

• do something with a tool/platform

@ericthebell #UXinSpace

attendees: who?

• predominantly developers (of all stripes)

• smattering of design, business types

• desired roles encouraged via event tickets

@ericthebell #UXinSpace

attendees: why?

• learn something new

• meet people

• work on something interesting

As a designer

@ericthebell #UXinSpace

my desires

• something different, change of pace from workweek design problems

• challenge of time constraints, evaluate + execute minimal necessary process

@ericthebell #UXinSpace

my benefits

• hone existing skills/process

• practice new/different skills (you are what you label yourself)

• meet + work with new people(ideal for job hunting)

@ericthebell #UXinSpace

my roles

• scoping

• sketching

• prototyping

• front end design/CSS

• wander around + advise UX

@ericthebell #UXinSpace

case: Big DataPollWiser: Mapping election poll results to candidate-specific tweet sentiment.

role: front end design and CSS

learned about some nifty tools and databases

Visualization

Hover option 1: display most popular positive and negative tweet for one candidate simultaneously

Hover option 2: only display most popular tweet, color based on pos/neg sentiment

Hover option 3: show most popular tweet for each candidate simultaneously

Y axis: display Y axis only between max and min values of visible data

Tweet display:

ProcessFunctionality

PollWiser

Audience: Data-centric

What interesting things did we do with the data? Explain our process and back end, discoveries, points of interest.

Goal: explaining our process

Overall goals

Our overarching goal is to present to a much larger audience.

They will be a similar type of audience as the hackathon, but with higher expectations.

Audience: Info viz

Visual polish of what we are displaying. New insights that this gives us.

Goal: visual polish

Presenting at DataWeek keynote Thursday AM

Audience: Laymen

Many people will just want to play with it as a tool.

Goal: URL with a minimally functional tool

Popular positive Romney tweet of the day

Popular negative tweet (either candidate)

Popular negative tweet (either candidate)

Popular positive Obama tweet of the day

Aug 12 Sep 3

Most popular Obama tweet only (color by pos/neg)

Aug 12

Most popular Romney tweet of the day

Most popular Obama tweet of the day

Aug 12 Easier to compare tweet info

Mouseover anywhere on day vertical

50%

60

40

Timeframe (x axis): some cheap but elegant way to adjust the timeframe. Zoom links below are acceptable, as are sliders. Avoid anything that has to be expanded before it can be selected (pulldowns, accordion behavior).

@username Real Name | mon dd hh:mm | StateContent of tweet goes here, up to full 140 characters but display only text (no links)

Tweet details 12pt normal weight

Tweet content14ptbold weight

Pick a decent web font like PT Sans http://www.google.com/webfonts/specimen/PT+Sans

positive Romney tweet

positive Obama tweet

negative tweet

Googlehttp://pollwiser.info

PollWiser

Graph area

PollWiserBringing granular contextual insights to election poll data

List of states

Credits… data sources, Angelhack, other shout-outs

timeframe controls

webfont: Open Sanshttp://www.google.com/webfonts#UsePlace:use/Collection:Open+Sans

Overall layout

Fill window if possible

All details up for debate and ease-of-coding

Ability to drill down by state

Since we have state data, this should be easy.

Overlaying on a map would be cool, but choosing from a list is better than nothing.

If we weight each state's data using its electoral votes (proportional to population) we can even use that to generate our nation-wide poll data.

domain

We need a domain. Somewhere to put this for visitors to play with, and a URL to point to at the very end of our presentation.

@ericthebell #UXinSpace

Frood: Avoiding text entry [for food] on mobile devices at all costs.

role: IA, IxD, prototyping

learned that prototyping in code makes for better demos

check it out: bit.ly/froodhealth

case: Health 2.0

@ericthebell #UXinSpace

case: Discover SFPOPOS: Discover SF’s hidden public spaces.

role: Not my project. By Connie Yeh, Wendy Fong, and Lily Chandrasekher

Being spoken about at tonight’s Urban Tech SF (right now).

check it out: sfpopos.com

@ericthebell #UXinSpace

my lessons

• overall design strategy

• problem scoping, build what you need

• think through task flows, storyboards

• mock up + prototype broader concept

• presentation strategy + design

Resources

@ericthebell #UXinSpace

coming up

• June 1-2: SF Day of Civic hacking

• June 15-16: AngelHack SV

• June 23: API Hackday

@ericthebell #UXinSpace

find more

• Eventbrite (“hack*” near SF by date)

• Hackathon.io

• Hackerleague.org

Thanks.Questions?

@ericthebell #UXinSpace