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

How design happens at GitHub (Osaka, 2014)

How design happens at GitHub (Osaka, 2014)

Here are the slides for a talk I gave in Osaka, Japan, in 2014, about how design happens at GitHub.

Coby Chapple

June 03, 2014
Tweet

More Decks by Coby Chapple

Other Decks in Design

Transcript

  1. ! cobyism — Osaka, 2014
    HOW
    DESIGN
    HAPPENS
    AT GITHUB

    View full-size slide

  2. ࢲ͸GitHubͷσβΠφʔͱ։ൃऀͰ͢

    View full-size slide

  3. GitHub͸ɺαϯϑϥϯγείʹڌ఺Λஔ͕͘ɺࢲ
    ͸๺ΞΠϧϥϯυʹॅΜͰ͍·͢

    View full-size slide

  4. ࢲ͸ɺϦϞʔτͰಇ͘ଟ͘ͷࣾһͷதͷҰਓͰ͢

    View full-size slide

  5. ໿60ˋ͕ϦϞʔτͰ͢ɻ

    View full-size slide

  6. DESIGN
    How it works at GitHub
    ํ๏ઃܭ͸GitHubͷ࣌ʹى͜Γ·͢

    View full-size slide

  7. σβΠϯ͸ɺίʔυ಺Ͱൃੜͨ͠

    View full-size slide

  8. σβΠϯ͸ɺϓϧཁٻͰൃੜ

    View full-size slide

  9. Pull Requests help
    settle arguments.
    ϓϧཁٻ͸ɺҾ਺Λղܾ͢Δखॿ͚

    View full-size slide

  10. Pull Requests
    keep you grounded
    in reality.
    ϓϧཁٻ͸ɺ͋ͳ͕ͨݱ࣮ʹয఺Λ౰͓ͯͯ͘

    View full-size slide

  11. Design happens
    in ...
    σβΠϯ͸ɺϒϥ΢βͰى͜Δ

    View full-size slide

  12. Design here
    is real.
    ϒϥ΢βʔ಺Ͱߦ͏σβΠϯ͸ݱ࣮ɻ

    View full-size slide

  13. Design it once,
    not twice
    ઃܭҰ౓ɺೋ౓Ͱ͸ͳ͍

    View full-size slide

  14. Design here is
    always current.
    ϒϥ΢βͰߦ͏ઃܭ͸ৗʹ࠷৽Ͱ͋Δɻ

    View full-size slide

  15. Just commit.
    ίϛοτɺ͓ΑͼͦΕ͕଎͘ͳΔ

    View full-size slide

  16. big

    picture
    Focus on
    the first
    ࠷ॳ͸શମ૾͔Βݟ·͠ΐ͏

    View full-size slide

  17. Design happens
    with prototyping.
    σβΠϯ͸ϓϩτλΠϓΛ͍ͬͺ͍࡞Δ͜ͱʹΑͬͯߦΘΕΔ

    View full-size slide

  18. [ REDACTED ]
    ൿີ!

    View full-size slide

  19. Design happens
    with lorem ipsum

    dolor sit amet.
    ϓϨʔεϗϧμςΩετ?

    View full-size slide

  20. Design happens
    with real data.
    σβΠϯʹ͸ຊ౰ͷσʔλ͕ඞཁ

    View full-size slide

  21. Design happens
    hidden behind
    feature flags.
    σβΠϯ͸ػೳϑϥάͰӅͯ͠ຊ൪؀ڥͰςετ͞Ε͍ͯΔɻ

    View full-size slide

  22. def new_feature_enabled?

    end

    View full-size slide

  23. def new_feature_enabled?
    preview_features?
    end

    View full-size slide

  24. def new_feature_enabled?
    preview_features? &&
    team_access?(:some_team)
    end

    View full-size slide

  25. def new_feature_enabled?
    true
    end

    View full-size slide

  26. Beware of

    feature flags.
    ػೳϑϥάΛ࢖͏ͱԿΛӅ͍ͯͯ͠Կ͕ग़ՙ͞Εͯ
    ͍Δ͔͕Θ͔Βͳ͘͜ͱ΋͋Δɻ

    View full-size slide

  27. Dogfooding is
    powerful, but it
    has it’s limits.
    ࣗ෼Ͱࣗ෼ͷϓϩμΫτΛςετ͢Δͷڧྗ͚ͩͲɺݶք΋͋Δ

    View full-size slide

  28. Design happens
    with feedback.
    ϑΟʔυόοΫ͕͋ͬͯͦ͜σβΠϯ͸ى͜Δ

    View full-size slide

  29. Design happens
    with quantitative
    feedback.
    σβΠϯ͸ɺఆྔతͳϑΟʔυόοΫͰൃੜ

    View full-size slide

  30. Design happens
    with qualitative
    feedback.
    σβΠϯ͸ɺఆੑతͳϑΟʔυόοΫͰൃੜ

    View full-size slide

  31. Design is
    everyone’s
    responsibility.
    σβΠϯ͸ΈΜͳͷ੹೚ɻ

    View full-size slide

  32. Design often
    begins without
    any designer input.
    σβΠϯ͸݁ߏසൟʹσβΠφʔ͕ؔΘΒͳͯ͘΋࢝·Δɻ

    View full-size slide

  33. Beware of design
    by committee.
    ҕһձʹΑΔσβΠϯ͸͚͞·͠ΐ͏ʂ

    View full-size slide

  34. Beware of

    drive-by comments.
    ௨ߦਓ͔Βͷίϝϯτʹ͸஫ҙ͍ͯͩ͘͠͞

    View full-size slide

  35. Design should be
    an open process.
    σβΠϯ͸ɺಁ໌ͳϓϩηεͰ͋Δ΂͖

    View full-size slide

  36. Open design
    is the future.
    ಁ໌σβΠϯ͸ະདྷ͕͋Δ

    View full-size slide

  37. Open design
    is really hard.
    ಁ໌ੑͷ͋ΔσβΠϯ͸࣮ݱ͢Δͷ͸ຊ౰ʹ೉͍͠

    View full-size slide

  38. Open design
    requires making at
    paradigm shift.
    ಁ໌ͳσβΠϯ͸ɺύϥμΠϜγϑτ͕ඞཁͰ͢

    View full-size slide

  39. Open design
    means showing
    work early.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸ૣ͍ஈ֊ʹσβΠϯΛݟͤΔ
    ඞཁ͕͋Γ·͢ɻ

    View full-size slide

  40. Open design
    means accepting
    imperfection.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸׬ᘳͰ͸ͳ͍͜ͱΛड͚
    ೖΕΔඞཁ͕͋Δɻ

    View full-size slide

  41. Open design helps
    build empathy.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸ڞײ͋͑͠Δؔ܎Λߏங
    ͢Δඞཁ͕͋Δ

    View full-size slide

  42. Open design
    means articulating
    design decisions.
    σβΠϯʹࢸΔҙࢥܾఆΛ໌֬ʹදݱͰ͖Δ
    ඞཁ͕͋Δɻ

    View full-size slide

  43. Open design
    means sacrificing
    your pride.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸ࣗ෼ͷϓϥΠυΛࣺͯΔ
    ඞཁ͕͋Δɻ

    View full-size slide

  44. Open design means
    trusting people.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸νʔϜϝʔτΛ৴པ͢Δ
    ඞཁ͕͋Δɻ

    View full-size slide

  45. Open design means
    being respectful.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸ϑΟʔυόοΫΛ
    ݴ͏࣌ʹ૬खΛଚॏ͢Δඞཁ͕͋Δɻ

    View full-size slide

  46. Open design takes
    constant work.
    ಁ໌ੑͷ͋ΔσβΠϯʹ͸ৗʹ౒ྗͯ͠վળ
    ͢Δඞཁ͕͋Δɻ

    View full-size slide

  47. Thank you!
    [email protected]
    @cobyism

    Ͳ͏΋͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View full-size slide