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

グローバルサービスでのデザインリニューアルプロセス

DaiTorii
February 08, 2019

 グローバルサービスでのデザインリニューアルプロセス

2019年2月8日にTECH PLAY Shibuya で行われた [ スタディサプリ/Quipper Product Meetup #2 〜64万人が利用する教育サービスを作る技術と育てる技術〜 ] のイベント登壇資料です。

## 概要
受験サプリからスタディサプリへの移行、グローバル展開するQuipperとのシステム統合を経てさまざまな負債を抱えたプロダクト。増改築を繰り返した家のような構造にはデザイン面での制約も多くありました。
言語やコンテンツ構造の異なるプロダクトでどのように設計していったのか、デザインシステムへの考え方、グローバルメンバーとの協業など、エモい話を中心にお送りします。

DaiTorii

February 08, 2019
Tweet

More Decks by DaiTorii

Other Decks in Design

Transcript

  1. άϩʔόϧαʔϏεͰͷ
    σβΠϯϦχϡʔΞϧϓϩηε
    4UVEZ4BQVSJ2VJQQFS 1SPEVDU.FFUVQ

    @daitorii

    View Slide

  2. TBQVSJNFFUVQ
    2VJQQFS-JNJUFE
    69%FTJHO-FBE
    ௗډ େ
    !EBJUPSJJ
    ੍࡞ձ͔ࣾΒલ৬ࣄۀձࣾ΁σβΠφʔͱͯ͠ೖ
    ࣾޙɺ৽نࣄۀ੹೚ऀʹɻͦͷޙσβΠϯ૊৫Ϛ
    ωʔδϟʔΛܦͯ೥݄ 2VJQQFS΁ೖࣾɻ
    69%FTJHO-FBEͱ͍ͯ͠Ζ͍Ζ୲౰ɻ
    όϯυʢ"5"5"ʣͰ͸ΪλʔΛ୲౰ɻ

    View Slide

  3. TBQVSJNFFUVQ

    View Slide

  4. TBQVSJNFFUVQ
    .JOJ"MCVN<+0:>
    3FMFBTF
    %.4*c ZFO
    'VMM"MCVN<"5"5">
    3FMFBTF
    %.4*c ZFO
    %7%<>
    3FMFBTF
    %.4*c ZFO
    ޿ࠂ

    View Slide

  5. TBQVSJNFFUVQ
    ϦχϡʔΞϧͷഎܠ
    ΰʔϧͷઃఆ
    ઃܭϓϩηε
    ͜Ε͔Βͷ࿩
    ࠓ೔͓࿩͢Δ͜ͱ

    View Slide

  6. TBQVSJNFFUVQ
    ϦχϡʔΞϧͷഎܠ
    σβΠϯϦχϡʔΞϧϓϩηε

    View Slide

  7. TBQVSJNFFUVQ
    ݱࡏͷ8FCΞϓϦ
    ૑ۀ౰͔࣌Βͷίʔυϕʔεͷ্ʹαʔϏε͕ཚཱ
    ૝ఆ͍ͯ͠ͳ͔ͬͨػೳ͕૿͑ͨͨΊઃܭ͕ద੾Ͱ͸ͳ͍
    Quipper (for school users) Study Sapuri (for Coaching users) Study Sapuri (for School users)

    View Slide

  8. TBQVSJNFFUVQ
    • ଟ͘ͷਓͷ༷ʑͳཁ๬ʹ͸౴͑ͨ
    • ෦԰ʢػೳʣࣗମ͸૿͑ͨ
    • جૅ͸ݹ͍··

    ݐ෺ʹྫ͑Δͱɺɺɺ
    ˞ୠ͜͠Ε͸֤஍ͷϩʔΧϥΠζΛ͔ͬ͠Γͨ͠ͱ͍͏͜ͱ
    Ͱ΋͋Γɺ2VJQQFS͕ւ֎Ͱड͚ೖΕΒΕͨഎܠͰ΋͋Δɻ

    View Slide

  9. TBQVSJNFFUVQ
    ݱঢ়ͷࠜຊతͳ՝୊Ͱ͋Δ
    ʮ ػೳ͕ޓ͍ʹׯবͯ͠͠·͏͜ͱ ʯ
    ʮϑϩϯτΤϯυͷϨΨγʔԽ ʯ
    Λղܾ͢Δͱ͍͏఺Ͱݕ౼
    ʢ ͱ͸͍͑શͯΛ࡞Γ௚͢ࣄ͸࣌ؒతʹ΋೉͍͠ʜ ʣ

    View Slide

  10. TBQVSJNFFUVQ
    ΰʔϧͷઃఆ
    σβΠϯϦχϡʔΞϧϓϩηε

    View Slide

  11. TBQVSJNFFUVQ
    ΰʔϧ

    ֤ࠃͰվળ͕͠΍͍͢ঢ়ଶʹ͠
    ֶशޮ཰ͷվળֶྗ޲্΁د༩

    View Slide

  12. TBQVSJNFFUVQ
    ϑϩϯτΤϯυ
    ͷվम
    αΠτߏ଄
    ৘ใߏ଄
    ͷ࠶ઃܭ
    ղܾͷΞϓϩʔν

    View Slide

  13. TBQVSJNFFUVQ
    ઃܭϓϩηε
    σβΠϯϦχϡʔΞϧϓϩηε

    View Slide

  14. TBQVSJNFFUVQ
    ͷલʹɺ
    ઃܭ͍ͯ͘͠தͰؾ͍ͮͨ࿩

    View Slide

  15. TBQVSJNFFUVQ
    • ࠃ͝ͱʹจࣈྔ͕ҟͳΔ
    • ίϯςϯπͷߏ଄͕ҟͳΔ
    • ϢʔβʔλΠϓ ༗ྉϓϥϯ

    ͕ଟذʹ౉Δ
    • ͦΕͧΕͷࠃಛ༗ͷػೳ࢓༷͕͋Δ
    ͳͲͳͲɺ͜ΕΒ΋ಉ࣌ʹ੔ཧղܾ͍ͨ͠

    ౰ࣾάϩʔόϧαʔϏεͷ৔߹

    View Slide

  16. TBQVSJNFFUVQ
    ແཧ
    ˜͍Β͢ͱ΍

    View Slide

  17. TBQVSJNFFUVQ
    ํ਑

    ͢΂ͯΛਖ਼͍͠ܗʹ͢ΔͷͰ͸ͳ͘
    ࠓ͋Δ΋ͷͰ࠶ઃܭ͢Δ

    View Slide

  18. TBQVSJNFFUVQ
    ೥݄
    ೥݄
    ೥݄
    ೥݄
    ೥݄
    999
    λΠϜϥΠϯ
    ϓϩδΣΫτνʔϜԽ
    ௗډδϣΠϯɺຊ֨࢝ಈ
    ߏ଄ઃܭͷେ࿮֬ఆɺ͜ΕҎ߱σβΠϯ։ൃฒߦ࡞ۀ
    Ұ෦Ϣʔβʔ΁ػೳ੍ݶͯ͠ϕʔλϦϦʔε
    ελσΟαϓϦશϢʔβʔ΁ਖ਼ࣜϦϦʔε༧ఆ
    ໿೥ϲ݄
    άϩʔόϧϦϦʔε༧ఆ

    View Slide

  19. TBQVSJNFFUVQ
    νʔϜମ੍
    Product Manager
    Lead Designer
    Lead Engineer
    JP Office Engineer
    PH, ID Office Engineer
    JP Office Designer
    ID Office Designer
    JP Office Engineer
    ϦχϡʔΞϧνʔϜ
    ࣌ظʹΑͬͯͷϔϧϓ֤ࣄۀॴଐͷΤϯδχΞ

    View Slide

  20. TBQVSJNFFUVQ
    ௐࠪɾධՁ ෼ੳ ػೳ੔ཧ ઃܭ
    • Ϗδωε෼ੳ
    • ࢢ৔෼ੳ
    • ڝ߹෼ੳ
    • ސ٬෼ੳ
    • Ϧαʔνσʔλ෼ੳ
    • ߦಈσʔλ෼ੳ
    • Ϣʔεέʔεચ͍ग़͠
    • ϑϩʔνϟʔτ֬ೝ
    • ࣗࣾϓϩμΫτධՁ
    • Ϣʔβʔผػೳ੔ཧ
    • 6TBHFௐࠪ
    • ৘ใͷߏ଄Խɾઃܭ
    • ಋઢઃܭ
    • ϓϩτλΠϐϯά
    • ը໘ઃܭ
    • 6*ઃܭ
    ઃܭϓϩηε

    View Slide

  21. TBQVSJNFFUVQ
    ϢʔβʔετʔϦʔ΍
    ϑϩʔνϟʔτΛ΋ͱʹ
    ߏ଄ͷ՝୊఺Λݕূ
    ˞ௗډͷೖࣾલ͔ΒਐΜͰ͍ͨͨΊɺ
    ͦΕ·ͰਐΊ͍ͯͨ΋ͷ͔ΒΠϯϓοτͨ͠

    View Slide

  22. TBQVSJNFFUVQ
    ϢʔβʔετʔϦʔ΍
    ϑϩʔνϟʔτΛ΋ͱʹ
    ߏ଄ͷ՝୊఺Λݕূ
    ˞ௗډͷೖࣾલ͔ΒਐΜͰ͍ͨͨΊɺ
    ͦΕ·ͰਐΊ͍ͯͨ΋ͷ͔ΒΠϯϓοτͨ͠

    View Slide

  23. TBQVSJNFFUVQ
    ௐࠪɾධՁ ෼ੳ ػೳ੔ཧ ઃܭ
    • Ϗδωε෼ੳ
    • ࢢ৔෼ੳ
    • ڝ߹෼ੳ
    • ސ٬෼ੳ
    • Ϧαʔνσʔλ෼ੳ
    • ߦಈσʔλ෼ੳ
    • Ϣʔεέʔεચ͍ग़͠
    • ϑϩʔνϟʔτ֬ೝ
    • ࣗࣾϓϩμΫτධՁ
    • Ϣʔβʔผػೳ੔ཧ
    • 6TBHFௐࠪ
    • ৘ใͷߏ଄Խɾઃܭ
    • ಋઢઃܭ
    • ϓϩτλΠϐϯά
    • ը໘ઃܭ
    • 6*ઃܭ

    View Slide

  24. TBQVSJNFFUVQ
    <ߏ଄ઃܭ >
    ػೳผʹߏ଄Λ෼͚Δ
    ༷ʑͳಋઢΛՄೳʹ

    View Slide

  25. TBQVSJNFFUVQ
    <ϓϩτλΠϐϯά >
    खॻ͖ϞοΫΞοϓͰɺ
    ༷ʑͳύλʔϯΛݕূ
    ࣮ػͰ৮Γ֬ೝ

    View Slide

  26. TBQVSJNFFUVQ
    <ը໘ઃܭ >
    खॻ͖ϞοΫΛਗ਼ॻ͠௚
    ͠ɺ͞Βʹ૝૾͠΍͍͢
    ܗʹམͱ͠ࠐΈݕূ

    View Slide

  27. TBQVSJNFFUVQ
    <6*ઃܭ >
    ίϯϙʔωϯτ͔ΒͰ͸
    ͳ͘ɺશମσβΠϯͱί
    ϯϙʔωϯτσβΠϯΛ
    ߦ͖དྷ͢Δܗʹͨ͠

    View Slide

  28. TBQVSJNFFUVQ
    ը໘ઃܭϑϩʔ

    खॻ͖ϞοΫ࡞੒ ϓϩτλΠϐϯά ϞοΫΞοϓ࡞੒
    όʔδϣϯ؅ཧ
    ίϯϙʔωϯτ؅ཧ
    %FWͱͷڞ༗

    View Slide

  29. TBQVSJNFFUVQ
    820

    View Slide

  30. TBQVSJNFFUVQ
    ࠓճ࡞ͬͨσβΠϯσʔλͷຕ਺
    820

    View Slide

  31. TBQVSJNFFUVQ
    • σβΠϯσʔλʹ࢓༷ʹͳΓσβΠϯྔ͕๲େʹͳͬͨ
    • ϑΝΠϧ໊ͷӳޠϧʔϧ͕൥ࡶ
    • 0SHBOJTNT ͕σβΠϯσʔλ্Ͱҟৗʹॏ͘ͳͬͯ͠·ͬͨ
    • "CTUSBDUͷϓϩδΣΫτ (MPCBMͱ෼͚ͳ͖ΌΑ͔ͬͨ
    ͳͲͳͲʜ

    ࠓճͷ൓ল఺

    View Slide

  32. TBQVSJNFFUVQ
    ͏·͘ϫʔΫ͔ͨ͠ͳͱࢥ͏͜ͱ

    [FQMJOʹΑΔ
    $PNQPOFOU؅ཧ

    View Slide

  33. TBQVSJNFFUVQ
    ֤ϖʔδΛηΫγϣϯͰ؅ཧ

    View Slide

  34. TBQVSJNFFUVQ
    ίϯϙʔωϯτ΋֊૚Խͯ͠؅ཧ

    View Slide

  35. TBQVSJNFFUVQ
    ίϯϙʔωϯτͷ࢖༻ϖʔδ͕Θ͔Δ
    ͜ͷίϯϙʔωϯτΛ
    ࢖༻͍ͯ͠Δϖʔδ

    View Slide

  36. TBQVSJNFFUVQ
    ͜Ε͔Βͷ࿩
    ͍͞͝ʹ

    View Slide

  37. TBQVSJNFFUVQ
    ϦχϡʔΞϧલ
    ϦχϡʔΞϧޙ

    View Slide

  38. TBQVSJNFFUVQ
    ϦχϡʔΞϧલ
    ϦχϡʔΞϧޙ

    View Slide

  39. TBQVSJNFFUVQ
    ֶशϝιουͱαʔϏεσβΠϯ͸ҧ͏
    ڭҭͱ͍͏αʔϏε෼໺

    View Slide

  40. TBQVSJNFFUVQ
    ϓϩμΫτͷ࢖໋

    ͍͔ʹֶͯ͠शϝιουΛ਱ߦͯ͠
    ஌ࣝΛ஌ܙʹม͍͚͑ͯΔ͔

    View Slide

  41. TBQVSJNFFUVQ
    ఏڙ͢΂͖͜ͱ

    श׳Խɺ੒௕࣮ײɺࠩผԽಉ࣭Խ
    ετϨεͷͳ͍ମݧ

    View Slide

  42. TBQVSJNFFUVQ
    ϦχϡʔΞϧ ΰʔϧ

    View Slide

  43. TBQVSJNFFUVQ
    վળͰ͖Δ౔୆͕Ͱ͖ͨঢ়ଶ

    View Slide

  44. TBQVSJNFFUVQ
    ΰʔϧ

    ֤ࠃͰվળ͕͠΍͍͢ঢ়ଶʹ͠
    ֶशޮ཰ͷվળֶྗ޲্΁د༩

    View Slide

  45. TBQVSJNFFUVQ

    View Slide

  46. TBQVSJNFFUVQ
    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    !EBJUPSJJ

    View Slide