Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How To Speak Unicorn: Translating Design for the Digital Age

How To Speak Unicorn: Translating Design for the Digital Age

In order to be effective, a designer needs to do more than simply provide visual solutions to predefined problems. Digital design sits at a crossroads between multiple disciplines – both within an organization (project managers, developers, technologists, stakeholders, copywriters) and outside the organization (audiences, clients, investors, users). We must embrace our role as Translators of Ideas in order to advocate for the value of design in an increasingly technical world. Conversely, we as designers can also gain insight from the constant iteration and incremental improvements of programming methodologies. Michelle will share the lessons she’s learned as a designer, translator, and communicator along her journey from design to frontend development. But this isn’t just a storytelling session – you will walk away with practical insights into using your design thinking skills to create effective solutions for the digital space, bridge gaps between disciplines, avoid the struggle of miscommunication, and develop empathy and understanding for your colleagues and your audience alike.

Michelle Schulp Hunt

October 04, 2019
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

  1. How To Speak
    Unicorn
    Translating Design for
    the Digital Age

    View full-size slide

  2. @marktimemedia
    What is
    DESIGN?
    What is a
    DESIGNER?

    View full-size slide

  3. @marktimemedia
    Design is bigger than
    “DESIGN”

    View full-size slide

  4. @marktimemedia
    Student of process and principles
    Connector of patterns and people
    Translator of ideas and emotions
    Researcher of systems and solutions
    Educator of theory and application
    Advocate of value and practice

    View full-size slide

  5. @marktimemedia
    The Design
    UNICORN
    A mythical, all-powerful design
    creature with a deep knowledge of
    every part of the project life cycle

    View full-size slide

  6. @marktimemedia
    Becoming fluent in the language and
    concepts of multiple disciplines, in
    order to reach across silos, solve
    problems creatively, and add value
    SPEAKING
    UNICORN

    View full-size slide

  7. @marktimemedia
    Adorable badass.
    Carefully curated spontaneity.
    Master suitcase packer & dedicated
    maker of fancy tacos.
    Lover of lists & purveyor of process.
    Chronic imposter syndrome.
    Definitely a Ravenclaw.
    Designer & Developer
    Conference speaker & organizer
    AIGA MN Director of Technology
    HI, I’M
    MICHELLE.
    actually not coffee

    View full-size slide

  8. @marktimemedia
    Anxious alicorn.
    Master of magic & dedicated scholar.
    Lover of lists & purveyor of process.
    Chronic imposter syndrome.
    Definitely a Ravenclaw.
    Princess of Friendship
    Leader of the Mane Six
    Head of the School of Friendship
    THIS IS
    TWILIGHT
    SPARKLE

    View full-size slide

  9. @marktimemedia
    The
    UNICORN’S
    JOURNEY
    Cyclical
    Purposeful
    Transformative

    View full-size slide

  10. @marktimemedia
    THE HERO’S
    JOURNEY
    https://blog.reedsy.com/heros-journey/
    Literary storytelling technique
    following the main character's
    initiation, trials, and triumph
    over adversary

    View full-size slide

  11. @marktimemedia
    THE
    SCIENTIFIC
    METHOD
    A problem is identified,
    relevant data is gathered, a
    hypothesis is formulated from
    this data, and the hypothesis is
    empirically tested

    View full-size slide

  12. @marktimemedia
    THE
    DESIGN
    THINKING
    PROCESS
    https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process
    https://www.interaction-design.org/literature/article/what-is-design-thinking-and-why-is-it-so-popular

    View full-size slide

  13. @marktimemedia
    https://designfuckingthinking.tumblr.com/

    View full-size slide

  14. @marktimemedia
    THE
    DESIGN
    ABILITIES
    NON-
    PROCESS
    https://medium.com/stanford-d-school/lets-stop-talking-about-the-design-process-7446e52c13e8
    Navigate
    ambiguity
    Learn from
    others
    Synthesize
    information
    Rapidly
    experiment
    Move between
    concrete &
    abstract
    Build & craft
    intentionally
    Communicate
    deliberately
    Design your
    design work

    View full-size slide

  15. @marktimemedia
    Student
    Connector
    Translator
    Researcher
    Educator
    Advocate

    View full-size slide

  16. @marktimemedia
    PHASE 1:
    Designer as
    Student
    “Always Learning”

    View full-size slide

  17. @marktimemedia
    The Student of Friendship

    View full-size slide

  18. @marktimemedia
    DESIGN SKILLS
    Curiosity
    Synthesizing Information
    https://medium.com/stanford-d-school/lets-stop-talking-about-the-design-process-7446e52c13e8

    View full-size slide

  19. @marktimemedia
    UNICORN TOOL:
    A Design Library
    Favorite design resources
    • Don’t Make Me Think – Steve Krug
    • The Strategic Designer – David Holston
    • designbetter.co/design-thinking
    • deardesignstudent.com
    • The A List Apart library

    View full-size slide

  20. @marktimemedia
    UNICORN TOOL:
    A Design Library
    Favorite non-design resources
    • You Are A Badass – Jen Sincero
    • The Four Agreements – Don Miguel Ruiz
    • How To Make Sense of Any Mess – Abby Covert
    • Atomic Habits – James Clear
    • Anything by Brené Brown

    View full-size slide

  21. @marktimemedia
    PHASE 2:
    Designer as
    Connector
    “People over Process over Tools”

    View full-size slide

  22. @marktimemedia
    Friendship challenges in Ponyville

    View full-size slide

  23. @marktimemedia
    DESIGN SKILLS
    Understanding
    Synthesizing Information
    Build & Craft Intentionally

    View full-size slide

  24. @marktimemedia
    UNICORN TOOL:
    The Five Whys
    “The 5 whys get from the initial problem
    question to a true underlying cause through
    deduction, ending with a concrete action
    item/counter-measure.”

    View full-size slide

  25. @marktimemedia
    UNICORN TOOL:
    The Five Whys
    • Can be a single flow, or multiple flows
    • Best if you have a team highly familiar
    with the subject
    • Not to assign blame, but to find
    incremental solutions

    View full-size slide

  26. @marktimemedia
    USING 5 WHYS
    • Troubleshooting existing
    problems
    • Investigate something
    unexpected
    • Partner with “5 Hows”
    (counter measures for each
    revealed problem)

    View full-size slide

  27. @marktimemedia

    View full-size slide

  28. @marktimemedia
    PHASE 3:
    Designer as
    Translator
    “Stop, Collaborate, and Listen”

    View full-size slide

  29. @marktimemedia
    The Princess of Friendship

    View full-size slide

  30. @marktimemedia
    https://www.interaction-design.org/literature/article/design-thinking-getting-started-with-empathy
    DESIGN SKILLS
    Empathy
    Learning from Others
    Communicating Deliberately

    View full-size slide

  31. @marktimemedia
    UNICORN TOOL:
    Non-Violent
    Communication
    Expressing and Hearing feedback without
    blame or criticism, using ‘I’ statements

    View full-size slide

  32. @marktimemedia
    UNICORN TOOL:
    Non-Violent
    Communication
    Observation, Feelings, Needs, Request
    “When I see/hear… I feel… because I
    need/value… Would you be willing to…?”

    View full-size slide

  33. @marktimemedia
    UNICORN TOOL:
    Active Listening
    Active listening comprises both a desire to
    comprehend as well as to offer support and
    empathy to the speaker. It differs from critical
    listening, in that you are not evaluating the
    message of the other person with the goal of
    offering your own opinion.

    View full-size slide

  34. @marktimemedia
    UNICORN TOOL:
    Active Listening
    • Yes: Neutral, patient, asking open
    ended questions & getting clarification,
    summarizing/reflecting, eye contact
    • No: Interrupting, ignoring, one-upping,
    waiting until you can say "your part"

    View full-size slide

  35. @marktimemedia
    PHASE 4:
    Designer as
    Researcher
    “How To Know What You Don’t Know”

    View full-size slide

  36. @marktimemedia
    Quests of the Friendship Map

    View full-size slide

  37. @marktimemedia
    https://www.interaction-design.org/literature/article/stage-2-in-the-design-thinking-process-define-the-problem-
    and-interpret-the-results
    DESIGN SKILLS
    Defining
    Navigating Ambiguity
    Moving from Abstract
    to Concrete

    View full-size slide

  38. @marktimemedia
    UNICORN TOOL:
    Atomic Design
    All designs can be broken down into
    foundational elements that can be
    assembled into any number of larger
    and more complex components

    View full-size slide

  39. @marktimemedia
    ATOMIC DESIGN
    BRAD FROST

    View full-size slide

  40. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS

    View full-size slide

  41. @marktimemedia
    http://zqsmm.qiniucdn.com/data/20110511083224/index.html

    View full-size slide

  42. @marktimemedia
    MOLECULES
    UNIQUE COMBINATIONS
    OF ATOMS

    View full-size slide

  43. @marktimemedia

    View full-size slide

  44. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION

    View full-size slide

  45. @marktimemedia

    View full-size slide

  46. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS

    View full-size slide

  47. @marktimemedia

    View full-size slide

  48. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT

    View full-size slide

  49. @marktimemedia

    View full-size slide

  50. @marktimemedia
    UNICORN TOOL:
    Atomic Design
    Use Case: Designing a system
    • Designing rules rather than screens
    • Designing puzzle pieces
    • Designing from small to large, general
    to specific

    View full-size slide

  51. @marktimemedia
    UNICORN TOOL:
    Atomic Design
    Use Case: Designing for the unknown
    • Designing for content that doesn’t exist
    • Leveraging pattern finding to build
    future content types
    http://atomicdesign.bradfrost.com/
    https://www.designbetter.co/design-systems-handbook

    View full-size slide

  52. @marktimemedia
    PHASE 5:
    Designer as
    Educator
    “Learning by Teaching”

    View full-size slide

  53. @marktimemedia
    Opening a school

    View full-size slide

  54. @marktimemedia
    https://www.interaction-design.org/literature/article/stage-3-in-the-design-thinking-process-ideate
    DESIGN SKILLS
    Ideating & Prototyping
    Rapidly Experimenting
    Learning from Others

    View full-size slide

  55. @marktimemedia
    UNICORN TOOL:
    Pair Programming
    Two people working together on the
    same problem at the same station,
    usually with different roles, but
    offering equal collaboration

    View full-size slide

  56. @marktimemedia
    UNICORN TOOL:
    Pair Programming
    Use Case: Working Together
    • Mentorship and onboarding
    • Brainstorming and collaboration
    https://uxdesign.cc/three-models-of-pair-design-f75e3b29a51a
    https://medium.com/product-labs/how-designers-and-developers-
    can-pair-together-to-create-better-products-e4b09e3ca096

    View full-size slide

  57. @marktimemedia
    PHASE 5:
    Designer as
    Advocate
    “Building Bridges”

    View full-size slide

  58. @marktimemedia
    Ambassador to other kingdoms

    View full-size slide

  59. @marktimemedia
    DESIGN SKILLS
    Build & Craft Intentionally
    Designing your Design Work

    View full-size slide

  60. @marktimemedia
    UNICORN TOOL:
    DesignOps/DevOps
    The combination of cultural philosophies,
    practices, and tools that increases an
    organization’s ability to deliver well-
    designed, high-quality applications and
    services that meet people’s needs, while
    working at high velocity

    View full-size slide

  61. @marktimemedia
    UNICORN TOOL:
    DesignOps/DevOps
    The design of best-practice processes,
    developing unified values and workflow across
    teams, disciplines, and roles
    https://www.uxmatters.com/mt/archives/2018/09/designops.php
    https://www.designbetter.co/designops-handbook
    https://uxdesign.cc/designops-the-questions-youre-probably-
    asking-yourself-now-fdac491bfe4f

    View full-size slide

  62. @marktimemedia
    PHASE 7:
    Designer as
    Student (again)
    “Get Comfortable Being Uncomfortable”

    View full-size slide

  63. @marktimemedia
    New challenges await

    View full-size slide

  64. @marktimemedia
    DESIGN SKILLS
    The Design Cycle
    Learning from Others
    Designing your Design Work

    View full-size slide

  65. @marktimemedia
    UNICORN TOOL:
    Agile Principles
    Individuals and interactions over processes and tools
    Working software over comprehensive documentation
    Customer collaboration over contract negotiation
    Responding to change over following a plan
    http://agilemanifesto.org/principles.html

    View full-size slide

  66. @marktimemedia

    View full-size slide

  67. @marktimemedia

    View full-size slide

  68. @marktimemedia
    Student
    Connector
    Translator
    Researcher
    Educator
    Advocate

    View full-size slide

  69. @marktimemedia
    QUESTIONS?
    Here’s how to
    get in touch:
    Michelle Schulp
    [email protected]
    @marktimemedia
    michelleschulp.pink
    bit.ly/digital-unicorn
    WHERE TO FIND ME NEXT:
    ONLINE:
    Various podcasts (do you
    have one? Want a guest?)
    Fitness & Freelance blog
    EVENTS:
    Cocktails with Creatives
    Solopreneurs meetup
    The Draw In
    SPEAKING:
    WordCamp US

    View full-size slide