Human-first Web Design

F110c4153d9c4b1002e8fa49183ac761?s=47 Daniel Ryan
April 23, 2013

Human-first Web Design

Focussing on the needs of the real people using our websites.


Daniel Ryan

April 23, 2013


  1. 2.

    Daniel Ryan • Master’s and Bachelor’s in History & Media

    • Developing since 1998 • Background in the agency and freelance worlds • Director of Front-end Development at Obama for America 2012
  2. 3.

    My time at Obama for America • First responsive campaign

    website in political history • Developed systems that engaged hundreds of thousands of volunteers • Registered over 1 million voters online • We raised over $690 million online, $125+ million as a result of optimization and testing
  3. 4.
  4. 5.

    What is human-first web design? • Putting the needs of

    viewers above the needs of the organization • Reducing barriers to consumption and engagement • Employing a multi-screen strategy to reach people where they are • Preferring “better” over “more”
  5. 7.

    Jakob Nielsen [] One of usability's most hard-earned lessons is

    that "you are not the user." ... Design to optimize the user experience for outsiders, not insiders.
  6. 8.

    Know your audience • You don’t know anything if you

    don’t have data to demonstrate the facts • Gather data with web analytics, visitor surveys and A/B testing • Your audience isn’t a monolith
  7. 9.

    Get better information architecture • IA should be informed by

    clear goals for the site • Segment your site structure by either the top-level personas in your audience or by top-level actions that people want to take • No matter how well organized your site is, it’s hard to beat good search
  8. 19.

    Reduce barriers • The more actions you give users to

    choose from, the less likely they are to do any of them • Having one, clear call-to-action is the most effective way to drive conversions • Use what you already know about a person to reduce friction • Nothing beats compelling content for driving engagement
  9. 20.

    Target your content Use what you already know about a

    person to help focus their attention
  10. 25.

    Reach users where they are • A multi-screen strategy is

    no longer a luxury • Mobile web usage will overtake desktop usage, as early as next year* • Your strategy should take a holistic approach combining SMS, email, social networks and the web Source: Chitika Insights []
  11. 26.

    Making the case for mobile- first, responsive web design 0

    5,000,000 10,000,000 15,000,000 20,000,000 25,000,000 30,000,000 Apr 2011 Jul 2011 Oct 2011 Jan 2012 Apr 2012 Jul 2012 Oct 2012 Mobile traffic trippled over the course of the 2012 campaign Source: OFA Google Analytics
  12. 27.

    Smart phone ownership amongst teen- and college-aged Americans 22% 37%

    41% Age 12-17 7% 65% 28% Age 18-29 Source: Pew Research Center [] Source: Pew Research Center [] Owns feature phone Owns smartphone No cell phone
  13. 28.

    Source: Pew Research Center [] Nearly one quarter of Americans

    under 30 access the Internet mostly from their phone
  14. 30.

    Case Study: Planning to Vote Email SMS Social Phone Submit

    Plan Thank you Reminder night before Reminder two hours before Polling place lookup Invite friends to commit Alerts about changes Did you vote? Tell person to vote Do you need a ride? Voted Open Graph action
  15. 33.
  16. 34.

    1% of all visitors clicked any item in the carousel

    Source: Erik Runyon, Director of Web Communications, University of Notre Dame []
  17. 36.

    Negative space is your biggest positive impact • Whitespace around

    paragraphs can increase comprehension by 20% [] • Text attracts attention before graphics [] • Whitespace defines the visual narrative of the page []
  18. 38.

    Steve Jobs It's in Apple's DNA that technology alone is

    not enough — it's technology married with liberal arts, married with the humanities…
  19. 39.

    Thank you so much Daniel Ryan | @dryan Deck

    available at