Notes from Rustbelt Refresh 2017

September 21st, 2017

Selling Design Systems

  • Every redesign requires users to relearn how to do certain tasks, how to navigate etc.
  • Style tiles & element collages instead of building whole mock
  • Build tiny bootstrap-like frameworkds for every client

What to read

  • Read Project Management for Humans by Brett Harned book
  • Read Content Strategy for Mobile by Karen McGrane about content

Benefits

  • Promotes consistency and cohesion: more conversions and more money
  • Faster production: roll out more features and iterations faster than ever
  • Design System: more of an internal tool than customer style tool
  • Shared vocabulary: more time collaborating and less time in meetings
  • Easier to test: more responsive, performant and accessible experiences
  • Useful reference: essential resource and hub for best practices
  • Future-friendly foundation: modify, extend, and improve upon over time

Lay of the Land

These sites help you get an idea of the different styles, colors and components being used on your current site.

Interface inventory

  1. Round up all all the stakeholders. This helps get shared languages started. More people involved sparks collaboration.
  2. interfaceinventory
  3. Screenshot Exercise, go through and find all the different patterns.

Benefits of doing an interface inventory

  • Documents your interface design patterns
  • Points out inconsistencies
  • Helps get buy-in from organization or client
  • Establishes scope of work
  • Is the genesis of shared vocabulary
  • Lays the groundwork for a future pattern library

Interface Inventory Categories

  • Global images types
  • Icons
  • Navigation
  • Forms
  • Buttons
  • Interactive components
  • Media
  • Headings
  • Blocks
  • Lists, collections and tables
  • 3rd party, embedded videos, "like" buttons
  • Advertising
  • Messaging, modals, alerts, thank you pages etc
  • Animation, anything that's moving
  • Colors

Performance Check

Perforance is a part of design. It shouldn't be overlooked

  • Webpagetest.org, can also test against your competitors.
  • wpostats.com, case studies that show business stats based on UX changes.

Kickoffs

Kickoffs usually result in main stake holders dominating conversations, people going off on tangents

User Research

  • Just Enough Research by Erica Hall
  • Find the pain points of the overall design dev process.
  • What does success look like?
  • Find anyone who is responsible for success and talk about workflow and pain points. Then you can go to the Kickoff with lots of insight from the interviews.
  • Good Kick Off Meetings is a solid resource for activities and exercises to generate ideas and conversation.

During the Kickoff Meeting

  • Create a list of project goals, then prioritize them by voting.

Priorities Workshop

  • Discuss emerging themes from interviews and introduce potential principles and tactics
  • Give each person 5 votes for principles they care most about
  • Picking People, Parts and Process (FIND THE LINK FOR THIS)

  • Do a 20-Second Gut Test

    1. Take existing sites, some are competitors, some are cool examples
    2. Photoshop the logo in and show the mockup for 20 seconds
    3. Ask people to vote

Design Brief

  • Defines goals, principles and project scope for design system
  • Goals: Spells out business and user needs
  • Definition: What exactly will be
  • Make the best thing the easiest thing
  • Design for grab it quick efficiency
  • Design for contribution and community
  • Crowd proof the markup
  • Fit the workflow
  • Just enough documentation
  • Tech agnostic
  • Embed the brand in the code
  • consistent not homogenous
  • Opinionated defaults
  • Make people smarter just by using it

Misc quotes or ideas

  • Building the whole and parts of the whole simultaneously.
  • More of a mental model instead. step 1 atom, step 2 molecule.
  • A design system is like an operating system for your brand.
  • You can re-skin bootstrap, but it's still not a part of the codebase. The design created needs to be integrated
  • The sweet-spot is a project that has been conceptualized, and needs to be done, but code hasn't been written for it yet.
  • Two sets of design principles: One is the process and the other is the product

Definitions

  • Design System: The formal story of how your organization does digital work.
  • Style Guide: A place for all the ingredients of the design system.
  • Pattern Library: A set of UI compontents. How do we do design and development, in a URL

Methodology

You have a pile of legos, you can start building the product. Or you can organize the pieces, then create the end product and save time.

Style Guide Stuff