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

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

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

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