Some Background

A short Compendium

Cobey Potter

Partner + Front-end/UX 

for Wellfire interactive

Cobey Potter

• Originally from Charlottesville, VA
• Been in DC Metro for 10 years
• Belong to a lovely wife and independent Shiba Inu
• Looking forward to seeing UVA win the Big Dance

Studied Cognitive Science at UVA

• how the brain processes, stores, and retrieves information
• concentrated in Human-Computer Interaction

at threespot media (2006), worked with

• School Breakfast Association
• Brookings Institute
• Paley Center for Media
• Peace Corps
• Washington National Cathedral

at Wellfire Interactive (2008), worked with

• American Frozen Food Institute
• FairVote.org
• Port City Brewing Company
• Center for Student Opportunity's I'm First 
• Communities In Schools

Strategy Tools

It all starts simply.

Users Aren't Dumb.

You

• Congratulations, you're human
• You think like a human
• You use the same basic tools as those around you
• What are your own good/bad experiences?

PAttern Libraries

• Use your previous successes
• Craft and maintain a pattern library:
  • oftentimes structures are mimicked site-to-site,
    its the visual layer thats different
• Books:
  • Curtis, Nathan. Modular Web Design
• Websites:
  • The Pattern Lab (patternlab.io)
  • MailChimp UX (ux.mailchimp.com)
  • Lonely Planet (rizzo.lonelyplanet.com)

Pen + Paper

• Formulate ideas and write them down.
• Keep these ideas in a notebook.
  • Dot-grid books (Behance, Baron Fig)
  • Field Notes
  • Moleskine Cahier Notebooks
  • even your old Trapper Keeper will work
• "Limitless paper in a paperless world"

Users STories / REquirements

• Kanban applications:
  • Trello (trello.com)
  • Asana (asana.com)
  • Pivotal Tracker (pivotaltracker.com)
  • ZenHub (zenhub.io)
• Evernote, Dropbox, Sharepoint

Development Tools

Now we're getting somewhere.

Design-style Tools

• Adobe Illustrator
• Bohemian Coding Sketch
• Affinity Designer
• (Adobe Fireworks)
• Adobe Indesign

Hybrid Design/Development

• Axure (axure.com)
• Adobe Edge Reflow (creative.adobe.com/products/reflow)
• Invision (invision.com)
• Webflow (webflow.com)
• Froont (froont.com)
• Blocs UI (blocsapp.com)
• Macaw (macaw.co)
• others: Antetype, UXPin, HotGloo, Brix, Adobe Muse

Framework Tools

• GitHub Bootstrap (getbootstrap.com)
• Zurb Foundation (foundation.zurb.com)
• Yahoo Pure CSS (purecss.io)
• Skeleton (getskeleton.com)
• Gumby (gumbyframework.com)
• Base (matthewhartman.github.io/base/)
• Roll Your Own 

User Testing

You mean we have to Talk to Someone?

Hosting Your Mocks

• Github Pages - Native to Repo
• Cloud Cannon (cloudcannon.com) - Dropbox
• Divshot (divshot.com) - sweet static site hosting

User Testing

• Client group
• In-house group
• Friends and Family
  • The Mom/Dad test

REmote (Random) User Testing

• Mechanical Turk
• UserTesting (usertesting.com)
• UserZoom (userzoom.com)
• HotJar (hotjar.com) - in beta

Don't get Discouraged

When the drawing board calls.

Performance

Plan for Engagement.

PLan for Launch

Why Wellfire Considers it UX

• Nobody likes to use a site that crashes their browser
  • oftentimes we're running multiple full-fledged apps
  • definitely multiple tabs
  • the dreaded "autoplay"
• Users not left with a bad taste in their mouth?
  • Happy users and return visits
  • The Coconut Wireless

Analytics / Metrics

• Google Analytics (google.com/analytics)
• Mixpanel (mixpanel.com)
• Kissmetrics (kissmetrics.com)
• Crazy Egg  (crazyegg.com) - Heatmaps
• Optimizely (optimizely.com) - A/B testing
• HotJar (hotjar.com) - all of it

Performance Issues

• >2-3 seconds causes users to leave
  • but it depends.
• Slow database queries
• Huge Images
• Too much Javascript
• Too much "flair"
• Overall Janky-ness

Sometimes you can't do anything about it.

Performance Apps

• New Relic APM (newrelic.com) - monitoring
• Pingdom (pingdom.com) - monitoring
• Raygun (raygun.io) - monitoring
• Sentry (getsentry.com) - exception tracking
• Your Hosting Platform:
  • Heroku (addons.heroku.com)
  • Rackspace
  • Divshot

Performance Homebrew

• BrowserStack - Browser / Mobile Testing
• Modern.ie - Localized Internet Explorer Testing
• Virtualization (Oracle VirtualBox)
  • crazy oddball browser sandboxes (television)
• checkgzipcompression.com
• Gulp/Grunt JS Testing frameworks
• Safari Dev Tools / Adobe Edge Inspect
  • Localized Mobile testing
• Chrome Dev Tools

Chrome Dev Tools

• Network Testing
  • disable cache!
• Profiles
  • show how JS memory is used
• Audits
  • general Webpage performance
• Responsive Design Mode
  • not just for testing visual layout
  • tests with network throttling

Accessibility

Yeah, IT's often the Last thing on the List

Why Wellfire Considers it UX

• Accessibility is not just for the handicapped, but also for the international market or those using older technology
• Even disregarding a large part of the populace that has physical hardships, convenience factors (keyboard controls) are a plus
• Progressive Enhancement / Mobile First Design
• Delight in the simple,  add on elegance and complexity
• Most accessibility is built into things you are already doing so go with it!

Accessibility tools

• Use your own eyes and hands
• Remember best practices
• Screen readers (free add-ons availabile through Chrome)
• Color contrast checker (http://bit.ly/18lnjpX)
• Color blindness (colororacle.org) (colorfilter.wickline.org)
• What does your site cost? (whatdoesmysitecost.com)

Security

Yeah, it matters.

Why Wellfire Considers it UX

• Trust yourself, would you go to a site that "lost":
  • your personal information
  • your credit card information
  • even your user profile?
• That dang Coconut Wireless again

A Lot of this is built in

• Wordpress has its own security features
• Django has a full fledged authorization module
• Most dev languages have hashes for storing sensitive data
• Use SSL and HTTPS

When in doubt, Offload it

• the most secure site is a static flat site, but...
• Login systems:
  • Google, Facebook, Twitter login systems
  • Yahoo just introduced passwordless login system
    • new, maybe too new, but seems promising
  • two-step authorization?
• Payment gateways:
  • Stripe, Google Checkout, Paypal, etc

But Pay attention!

News ORgs / Tech Blogs are a Saving Grace

(Heartbleed virus, any one?)

TAke-Aways

TL; DNLHYPMVY?

Use your human-ness to Your advantage.

The world is vast, Listen in.

.... and has built tools (some free) for you to use.

Build something... Find Friends to test it... Iterate. 

Performance. Accessibility. Security. UX too.

Iterate. and iterate some more.