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

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

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

Transcript

1. άϩʔόϧαʔϏεͰͷ σβΠϯϦχϡʔΞϧϓϩηε 4UVEZ4BQVSJ2VJQQFS 1SPEVDU
   .FFUVQ
     @daitorii
2. TBQVSJNFFUVQ 2VJQQFS
   -JNJUFE 69
   %FTJHO
   -FBE ௗډ େ !EBJUPSJJ ੍࡞ձ͔ࣾΒલ৬ࣄۀձࣾ΁σβΠφʔͱͯ͠ೖ ࣾޙɺ৽نࣄۀ੹೚ऀʹɻͦͷޙσβΠϯ૊৫Ϛ ωʔδϟʔΛܦͯ೥݄ 2VJQQFS
   ΁ೖࣾɻ 69
   %FTJHO
   -FBE
   ͱ͍ͯ͠Ζ͍Ζ୲౰ɻ όϯυʢ"5"5"ʣͰ͸ΪλʔΛ୲౰ɻ
3. TBQVSJNFFUVQ
4. TBQVSJNFFUVQ .JOJ
   "MCVN
   <
   +0:
   > 
   3FMFBTF %.4*
   c
    ZFO 'VMM
   "MCVN
   <
   "5"5"
   > 
   3FMFBTF %.4*
   c
    ZFO %7%
   <
   
   > 
   3FMFBTF %.4*
   c
    ZFO ޿ࠂ
5. TBQVSJNFFUVQ  ϦχϡʔΞϧͷഎܠ  ΰʔϧͷઃఆ  ઃܭϓϩηε  ͜Ε͔Βͷ࿩ ࠓ೔͓࿩͢Δ͜ͱ
6. TBQVSJNFFUVQ ϦχϡʔΞϧͷഎܠ σβΠϯϦχϡʔΞϧϓϩηε 
7. TBQVSJNFFUVQ ݱࡏͷ8FCΞϓϦ ૑ۀ౰͔࣌Βͷίʔυϕʔεͷ্ʹαʔϏε͕ཚཱ ૝ఆ͍ͯ͠ͳ͔ͬͨػೳ͕૿͑ͨͨΊઃܭ͕ద੾Ͱ͸ͳ͍ Quipper (for school users) Study Sapuri (for Coaching users) Study Sapuri (for School users) 
8. TBQVSJNFFUVQ • ଟ͘ͷਓͷ༷ʑͳཁ๬ʹ͸౴͑ͨ • ෦԰ʢػೳʣࣗମ͸૿͑ͨ • جૅ͸ݹ͍··  ݐ෺ʹྫ͑Δͱɺɺɺ ˞
   ୠ͜͠Ε͸֤஍ͷϩʔΧϥΠζΛ͔ͬ͠Γͨ͠ͱ͍͏͜ͱ Ͱ΋͋Γɺ2VJQQFS͕ւ֎Ͱड͚ೖΕΒΕͨഎܠͰ΋͋Δɻ
9. TBQVSJNFFUVQ  ݱঢ়ͷࠜຊతͳ՝୊Ͱ͋Δ ʮ ػೳ͕ޓ͍ʹׯবͯ͠͠·͏͜ͱ ʯ ʮϑϩϯτΤϯυͷϨΨγʔԽ ʯ Λղܾ͢Δͱ͍͏఺Ͱݕ౼ ʢ ͱ͸͍͑શͯΛ࡞Γ௚͢ࣄ͸࣌ؒతʹ΋೉͍͠ʜ ʣ
10. TBQVSJNFFUVQ ΰʔϧͷઃఆ σβΠϯϦχϡʔΞϧϓϩηε 
11. TBQVSJNFFUVQ ΰʔϧ  ֤ࠃͰվળ͕͠΍͍͢ঢ়ଶʹ͠ ֶशޮ཰ͷվળֶྗ޲্΁د༩
12. TBQVSJNFFUVQ  ϑϩϯτΤϯυ ͷվम αΠτߏ଄ ৘ใߏ଄ ͷ࠶ઃܭ  ղܾͷΞϓϩʔν 
13. TBQVSJNFFUVQ ઃܭϓϩηε σβΠϯϦχϡʔΞϧϓϩηε 
14. TBQVSJNFFUVQ ͷલʹɺ ઃܭ͍ͯ͘͠தͰؾ͍ͮͨ࿩ 
15. TBQVSJNFFUVQ • ࠃ͝ͱʹจࣈྔ͕ҟͳΔ • ίϯςϯπͷߏ଄͕ҟͳΔ • ϢʔβʔλΠϓ ༗ྉϓϥϯ ͕ଟذʹ౉Δ • ͦΕͧΕͷࠃಛ༗ͷػೳ࢓༷͕͋Δ ͳͲͳͲɺ͜ΕΒ΋ಉ࣌ʹ੔ཧղܾ͍ͨ͠  ౰ࣾάϩʔόϧαʔϏεͷ৔߹
16. TBQVSJNFFUVQ ແཧ ˜
    ͍Β͢ͱ΍
17. TBQVSJNFFUVQ ํ਑  ͢΂ͯΛਖ਼͍͠ܗʹ͢ΔͷͰ͸ͳ͘ ࠓ͋Δ΋ͷͰ࠶ઃܭ͢Δ
18. TBQVSJNFFUVQ  ೥݄ ೥݄ ೥݄ ೥݄ ೥݄ 999 λΠϜϥΠϯ ϓϩδΣΫτνʔϜԽ ௗډδϣΠϯɺຊ֨࢝ಈ ߏ଄ઃܭͷେ࿮֬ఆɺ͜ΕҎ߱σβΠϯ։ൃฒߦ࡞ۀ Ұ෦Ϣʔβʔ΁ػೳ੍ݶͯ͠ϕʔλϦϦʔε ελσΟαϓϦશϢʔβʔ΁ਖ਼ࣜϦϦʔε༧ఆ ໿೥ϲ݄ άϩʔόϧϦϦʔε༧ఆ
19. TBQVSJNFFUVQ  νʔϜମ੍ Product Manager Lead Designer Lead Engineer JP Office Engineer PH, ID Office Engineer JP Office Designer ID Office Designer JP Office Engineer ϦχϡʔΞϧνʔϜ ࣌ظʹΑͬͯͷϔϧϓ֤ࣄۀॴଐͷΤϯδχΞ
20. TBQVSJNFFUVQ  ௐࠪɾධՁ ෼ੳ ػೳ੔ཧ ઃܭ • Ϗδωε෼ੳ • ࢢ৔෼ੳ • ڝ߹෼ੳ • ސ٬෼ੳ • Ϧαʔνσʔλ෼ੳ • ߦಈσʔλ෼ੳ • Ϣʔεέʔεચ͍ग़͠ • ϑϩʔνϟʔτ֬ೝ • ࣗࣾϓϩμΫτධՁ • Ϣʔβʔผػೳ੔ཧ • 6TBHFௐࠪ • ৘ใͷߏ଄Խɾઃܭ • ಋઢઃܭ • ϓϩτλΠϐϯά • ը໘ઃܭ • 6*ઃܭ ઃܭϓϩηε
21. TBQVSJNFFUVQ  ϢʔβʔετʔϦʔ΍ ϑϩʔνϟʔτΛ΋ͱʹ ߏ଄ͷ՝୊఺Λݕূ ˞
    ௗډͷೖࣾલ͔ΒਐΜͰ͍ͨͨΊɺ ͦΕ·ͰਐΊ͍ͯͨ΋ͷ͔ΒΠϯϓοτͨ͠
22. TBQVSJNFFUVQ  ϢʔβʔετʔϦʔ΍ ϑϩʔνϟʔτΛ΋ͱʹ ߏ଄ͷ՝୊఺Λݕূ ˞
    ௗډͷೖࣾલ͔ΒਐΜͰ͍ͨͨΊɺ ͦΕ·ͰਐΊ͍ͯͨ΋ͷ͔ΒΠϯϓοτͨ͠
23. TBQVSJNFFUVQ  ௐࠪɾධՁ ෼ੳ ػೳ੔ཧ ઃܭ • Ϗδωε෼ੳ • ࢢ৔෼ੳ • ڝ߹෼ੳ • ސ٬෼ੳ • Ϧαʔνσʔλ෼ੳ • ߦಈσʔλ෼ੳ • Ϣʔεέʔεચ͍ग़͠ • ϑϩʔνϟʔτ֬ೝ • ࣗࣾϓϩμΫτධՁ • Ϣʔβʔผػೳ੔ཧ • 6TBHFௐࠪ • ৘ใͷߏ଄Խɾઃܭ • ಋઢઃܭ • ϓϩτλΠϐϯά • ը໘ઃܭ • 6*ઃܭ
24. TBQVSJNFFUVQ  <
    ߏ଄ઃܭ > ػೳผʹߏ଄Λ෼͚Δ ༷ʑͳಋઢΛՄೳʹ
25. TBQVSJNFFUVQ  <
    ϓϩτλΠϐϯά > खॻ͖ϞοΫΞοϓͰɺ ༷ʑͳύλʔϯΛݕূ ࣮ػͰ৮Γ֬ೝ
26. TBQVSJNFFUVQ  <
    ը໘ઃܭ > खॻ͖ϞοΫΛਗ਼ॻ͠௚ ͠ɺ͞Βʹ૝૾͠΍͍͢ ܗʹམͱ͠ࠐΈݕূ
27. TBQVSJNFFUVQ  <
    6*ઃܭ > ίϯϙʔωϯτ͔ΒͰ͸ ͳ͘ɺશମσβΠϯͱί ϯϙʔωϯτσβΠϯΛ ߦ͖དྷ͢Δܗʹͨ͠
28. TBQVSJNFFUVQ ը໘ઃܭϑϩʔ  खॻ͖ϞοΫ࡞੒ ϓϩτλΠϐϯά ϞοΫΞοϓ࡞੒ όʔδϣϯ؅ཧ ίϯϙʔωϯτ؅ཧ %FW
    ͱͷڞ༗
29. TBQVSJNFFUVQ  820
30. TBQVSJNFFUVQ ࠓճ࡞ͬͨσβΠϯσʔλͷຕ਺ 820
31. TBQVSJNFFUVQ • σβΠϯσʔλʹ࢓༷ʹͳΓσβΠϯྔ͕๲େʹͳͬͨ • ϑΝΠϧ໊ͷӳޠϧʔϧ͕൥ࡶ • 0SHBOJTNT ͕σβΠϯσʔλ্Ͱҟৗʹॏ͘ͳͬͯ͠·ͬͨ • "CTUSBDU
    ͷϓϩδΣΫτ (MPCBM
    ͱ෼͚ͳ͖ΌΑ͔ͬͨ ͳͲͳͲʜ  ࠓճͷ൓ল఺
32. TBQVSJNFFUVQ ͏·͘ϫʔΫ͔ͨ͠ͳͱࢥ͏͜ͱ  [FQMJO
    ʹΑΔ $PNQPOFOU
    ؅ཧ
33. TBQVSJNFFUVQ  ֤ϖʔδΛηΫγϣϯͰ؅ཧ
34. TBQVSJNFFUVQ  ίϯϙʔωϯτ΋֊૚Խͯ͠؅ཧ
35. TBQVSJNFFUVQ  ίϯϙʔωϯτͷ࢖༻ϖʔδ͕Θ͔Δ ͜ͷίϯϙʔωϯτΛ ࢖༻͍ͯ͠Δϖʔδ
36. TBQVSJNFFUVQ ͜Ε͔Βͷ࿩ ͍͞͝ʹ
37. TBQVSJNFFUVQ ϦχϡʔΞϧલ ϦχϡʔΞϧޙ
38. TBQVSJNFFUVQ ϦχϡʔΞϧલ ϦχϡʔΞϧޙ
39. TBQVSJNFFUVQ ֶशϝιουͱαʔϏεσβΠϯ͸ҧ͏ ڭҭͱ͍͏αʔϏε෼໺
40. TBQVSJNFFUVQ ϓϩμΫτͷ࢖໋  ͍͔ʹֶͯ͠शϝιουΛ਱ߦͯ͠ ஌ࣝΛ஌ܙʹม͍͚͑ͯΔ͔
41. TBQVSJNFFUVQ ఏڙ͢΂͖͜ͱ  श׳Խɺ੒௕࣮ײɺࠩผԽಉ࣭Խ ετϨεͷͳ͍ମݧ
42. TBQVSJNFFUVQ ϦχϡʔΞϧ 
    ΰʔϧ
43. TBQVSJNFFUVQ վળͰ͖Δ౔୆͕Ͱ͖ͨঢ়ଶ
44. TBQVSJNFFUVQ ΰʔϧ  ֤ࠃͰվળ͕͠΍͍͢ঢ়ଶʹ͠ ֶशޮ཰ͷվળֶྗ޲্΁د༩
45. TBQVSJNFFUVQ
46. TBQVSJNFFUVQ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !
    EBJUPSJJ