A Bit of Background

Cobey Potter

Partner + Front-end ARchitect 

for Wellfire interactive

• Originally from Charlottesville, VA
• Been in DC Metro for 12 years
• Studied Cognitive Science at UVA
  • how the brain process, stores, and retrieves information
  • concentrated in Human-Computer Interaction
• Worked professionally in the Web for 15 years
  • Educational Technology at UVA School of Medicine
  • Threespot Media
  • Wellfire Interactive (10 years!)
• Love getting away from the computer as much as possible
• Love watching and helping my 15 month old daughter grow up along with my lovely wife and overly-concerned Shiba Inu

• Communities In Schools
• Strive for College's I'm First
• mPowering Health
• National Consumers League
• FairVote
• American Frozen Food Institute
• BlueMercury
• Port City Brewing Company

AT WELLFIRE INTERACTIVE, We've WORKED WITH

A Bit of Background

Breathe New Life

The ProBlem At Hand

The ProBlem Challenge At Hand

The Challenge At Hand

• You've got a website
• It's feeling stale
• Let's Refresh!
• But let's also
  • lower timeframe, lower effort, lower stress
  • increase visibility, increase happiness, increase buy-in

Breathe New Life

The Web Today

The Web Today

• Your website, and websites in general, should no longer be thought of as "pages"
  • in terms of layout and construction
• Each block of functionality and content can be considered on its own
• JavaScript at the forefront of this idea:
  • React, AngularJS, VueJS, etc...
• CSS too!
  • Atomic CSS, Object-oriented CSS, BEM, SMACSS, etc..
• What about HTML?
  • officially Web Components (not here yet)

Breathe New Life

A Note ABOUT You

A Note About You

• You are a web developer, designer, project lead, stakeholder
• You are not just a code monkey, pixel pusher, TPS reporter, signer of checks
• You use the same basic tools as those around you
• Your experiences inform:
  • the path you take
  • what you know to avoid
  • what works best

Breathe New Life

Documentation

DocumenTation

• Look at how things are currently laid out and configured
• What works:
  • amazeballs
  • well
  • sliding by, just fine enough, meh
• What doesn't?
  • any dumpster fires?
• This will help you figure out where to center first
  • new branding?
  • site architecture?

Site Audit

Breathe New Life

DocumenTation

• Views are straight-forward, every website has them. They are pages or page templates, but we need to look at them in terms of overall functionality.
  • list view
  • detail view
  • form view
  • special view (map, charts, download)
• Components can be considered as exclave views
  • the user can view the data, but its included in a different location, such as 'cards'

User Views + User Flows

Breathe New Life

DocumenTation

• So,  how does your audience get there?
• Map out your proposed pathway to the content at hand
  • Not every way needs to be mapped out, just figure your main pathways that you've built for them
  • Users will find a way to surprise you; cowpaths will be paved
  • and Google / Bing may just link directly
• Users like browsing more than surfing (unless you are Amazon)
  • This should reinforce your site navigation and information architecture

User Views + User Flows

Breathe New Life

DocumenTation

Data Schemas

• What data is required for this view or component?
• This doesn't necessarily match the database
  • its what shows up on the front-end
• This helps show relationships in data between components
  • and it helps the team not forget anything!

Breathe New Life

DocumenTation

• Congrats, you've already got the content!
• This is the hardest part in any new project, so you're a step ahead
• The best designs are based on the content and data available
• The previous/current site iteration may have been built before there was content available
• now you can match form and function to the actual meta of the site
• content style or type going in a different direction?
  • get some solid examples before going down this path!

Content

Breathe New Life

DocumenTation

• Small bits and bobs of text:
  • calls-to-action
  • buttons
  • links
  • forms
  • any repeatable content
• Sometimes the smallest piece can be the toughest
  • This can help drive engagement and be a big plus to the refresh
• Book:
  • The Standardistas. A Pocket Guide to the Craft of Words, Part 2 - Microcopy

MicroCopy

Breathe New Life

DocumenTation

• Site audit
• Supported browser list
• Example copy and data schema for each component type
• Set of microcopy for interaction points
• At least 1 form schema!

Make Sure you End up with:

Breathe New Life

Pattern Libraries + Style Guides

"We are the [pattern] makers, and we are the dreamers of dreams"

Don't REinvent the Wheel.

AUGMENT IT.

Pattern Libraries + Style Guides

• You've been here before.
  • Use your previous successes
  • Use what works
• Craft and maintain a pattern library:
  • oftentimes, structures are mimicked site-to-site, its the visual layer thats different:
    • Cards
• Patterns may expand and contract depending on:
  • your content
  • your visual brand/ style
  • your supported "breakpoints"

Pattern Libraries

Breathe New Life

Pattern Libraries + Style Guides

Pattern Libraries

Breathe New Life

Pattern Libraries + Style Guides

• Style Guides are where your branding and visual style come into play
• They often encompass your Pattern Library as well
• You can look at your Pattern Library as the abstracts, or base and your Style Guide as showing the instances of the abstract.
  • Each instance may have the same shared pattern
  • May have a different visual "skin"
  • May have some small difference based on use or data representation

STyle Guides

Breathe New Life

Pattern Libraries + Style Guides

• Websites:

  • Lonely Planet (rizzo.lonelyplanet.com)

    Map Box (www.mapbox.com/base)

    Dropbox (www.dropbox.com/branding)

    Salesforce (www.lightningdesignsystem.com)

    Yelp (www.yelp.com/styleguide)

    DISQUS (disqus.com/pages/style-guide/)

    Deviant Art (spyed.deviantart.com)

    Mozilla (www.mozilla.org/en-US/styleguide)

    WeightWatchers (www.wwstyleguide.com)

STyle Guides

Breathe New Life

Pattern Libraries + Style Guides

Examples: styleguides.io

From this presentation: bit.ly/2sVyOIH

Styleguide maker: runwayapp.io

STyle Guides

Breathe New Life

Frameworks

Frameworks

• Great for rapid prototyping
  • Don't let them limit you
• Popularity contest:
  • 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

Breathe New Life

Frameworks

CSS Razor

(github.com/tscanlin/css-razor)

Breathe New Life

Component-Based Architecture

Component-Based Architecture

• A representation of your data and content model
• This is where the patterns start and where you can make the most out of semantics
• Most of your time spent will be here
• Think about using abstract templating that can be extended much like your pattern library
  • Wellfire uses a Jade/Pug templating base to extend patterns as needed
  • Gets pre-compiled with appropriate data mapping for Django Templates. 
  • This can easily be extended to other template languages

HTML

Breathe New Life

Component-Based Architecture

• Naming things is always going to be hard
  • Sometimes you just run out of ways to say "alternate"
• Consider f(CSS) -> functional CSS
  • Can seem like a dirty word, but it isnt
  • How does the object / element function
  • Combined with CSS Razor, you lose a lot of overhead
  • Functional classes are gzipped both in CSS and HTML
  • Namespacing (CSS selector attributes)

CSS

Breathe New Life

Component-Based Architecture

• React, AngularJS, VueJS
  • All view functionality through an HTML template and component model
• You might not need JQuery
  • Thinking in terms of data and components
  • Browsers have made significant headway
• Look at Vue's API/Guide for inspiration and understanding
• Vue-Loader (vue-loader.vuejs.org/en)
  • gives a great showcase of a new way at looking at the separations of concerns

JavaScript

Breathe New Life

Build Tools

Build Tools

• Too many out there to really discuss; can really depend on your stack
• Grunt, Gulp, Brunch, Broccoli, Webpack, Fusebox (brand new one!), etc
• Wellfire relies on a combo of MakeFiles, NPM/Yarn scripts, and Webpack
• Don't waste too much time here; tools change daily and you can really get sucked in
  • especially when they change versions with break changes (thanks, semver!)

Breathe New Life

Prototyping

ProtoTyping

• Get maximum buy-in before integrating into a db-based system
• Rapid iterations and updating with new ideas on the fly
• Less of  black-box for non-tech team
  • but you can safely keep it to yourself when you need to!
• Wellfire builds front-end prototypes and hosts them on Netlify for client walkthroughs
  • having something to poke & prod with the client is a plus
  • important: keep your domain authority

Breathe New Life

ProtoTyping

Hosting

• Other places to host:
  • Netlify (netlify.com)
  • Github pages - Native to repo (if using Github!)
  • Cloud Cannon (cloudcannon.com)
  • Dropbox
  • Amazon s3
  • Forge (getforge.com)
  • Paperplane (www.paperplane.io)
  • Figroll (www.figroll.io)
  • Surge (surge.sh)

Breathe New Life

ProtoTyping

User Testing

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

Breathe New Life

ProtoTyping

Remote (Random) User Testing

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

Breathe New Life

Don't get Discouraged

When the drawing board calls.

ProtoTyping

Breathe New Life

Punch-In / Punch-out Integration

Punch-In/Punch-Out Integration

• Terminology comes from music recording
  • Only change or update what you need without messing with the rest
  • Don't (overly) rock the boat
• Use your site audit, user flows, and user views to determine where to start and what is most important for engagement
• Full page/view implementation
• Component implementation on older pages
  • Namespacing
• Generally good for buy-in on longer/larger projects, but YMMV

Breathe New Life

CODA

CODA

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

Breathe New Life

CODA

Analytics + Metrics

• Don't overload your site with scripts!
• A/B test patterns, content that will be more "permanent"
  • depending on your timeframe, if it doesn't work, just try something else
  • remember what we're shooting for.

Breathe New Life

Lower Timeframe, lower effort, lower Stress

and yeah, lower cost too.

Breathe New Life

You have experience(s), Use it/Them.

Think of the web in terms of data + components, not pages

Pattern Libraries + Style Guides save Time and Effort

CSS Razor

Frameworks + Build Tools can be both confining and liberating.

"Public" prototyping enables buy-in from stakeholders

Punching-in for implementation

Breathe New Life

We are the music makers,

And we are the dreamers of dreams,

Wandering by lone sea-breakers,

And sitting by desolate streams;—

World-losers and world-forsakers,

On whom the pale moon gleams:

Yet we are the movers and shakers

Of the world for ever, it seems.

Arthur O'Shaughnessy (and Willy Wonka too)