- Eric Bell is a UX designer who attends hackathons to challenge himself, learn new skills, and meet new people outside of his normal work environment. - Typical hackathons are weekend events where participants form teams, pitch project ideas, have 24-36 hours to build a project, and present their work for prizes. They are generally free and focused on a particular theme. - As a designer at hackathons, Bell aims to take on roles like scoping, sketching, prototyping, and front-end design work. He has worked on projects related to data visualization and mobile applications. - Bell shares some of his experiences working on projects at hackathons and lessons learned around design

1. designers @ hackathons
Eric Bell
@ericthebell

2. @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

3. Hackathons 101

4. @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

5. @ericthebell #UXinSpace
themes
• solve a problem in an area
• do something with a tool/platform

6. @ericthebell #UXinSpace
attendees: who?
• predominantly developers (of all stripes)
• smattering of design, business types
• desired roles encouraged via event
tickets

7. @ericthebell #UXinSpace
attendees: why?
• learn something new
• meet people
• work on something interesting

8. As a designer

9. @ericthebell #UXinSpace
my desires
• something different, change of pace from
workweek design problems
• challenge of time constraints, evaluate +
execute minimal necessary process

10. @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)

11. @ericthebell #UXinSpace
my roles
• scoping
• sketching
• prototyping
• front end design/CSS
• wander around + advise UX

12. @ericthebell #UXinSpace
case: Big Data
PollWiser: 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 | State
Content of tweet goes here, up to full 140 characters
but display only text (no links)
Tweet details
12pt
normal weight
Tweet content
14pt
bold 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 Sans
http://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.

13. @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

14. @ericthebell #UXinSpace
case: Discover SF
POPOS: 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

15. @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

16. Resources

17. @ericthebell #UXinSpace
coming up
• June 1-2: SF Day of Civic hacking
• June 15-16: AngelHack SV
• June 23: API Hackday

18. @ericthebell #UXinSpace
find more
• Eventbrite (“hack*” near SF by date)
• Hackathon.io
• Hackerleague.org

19. Thanks.
Questions?
@ericthebell #UXinSpace