CXプラットフォームKARTEのプロダクト改善

【SmartHR × プレイド】プロダクトカイゼンNight

Transcript

1. CXϓϥοτϑΥʔϜKARTEͷϓϩμΫτվળ
   SmartHR x PLAID

   ϓϩμΫτΧΠθϯNight

   #kaizennight
   PLAID, Inc

   Yohei Noda
   

   View Slide

2. 2010-2014

   IBMιϑτ΢ΣΞ։ൃݚڀॴʢిࢠ৘ใ։ࣔؔ࿈ͷιϑτ΢ΣΞ։ൃͳͲʣ

   2015-

   גࣜձࣾϓϨΠυʢKARTEͷ։ൃͳͲʣ
   #kaizennight
   @positiveflat
   Yohei Noda
   UIपΓͷϓϩάϥϛϯάͱɺ৽͍͠αʔϏεݟ͚ͭͯࢼ͢ͷ͕޷͖

   Vue.js Japan User groupʢ11݄ʹVue Fes΍Γ·͢ʂʣ
   ࣗݾ঺հ
   

   View Slide

3. #kaizennight
   11݄ʹVue Fes΍Γ·͢ʂ
   

   View Slide

4. #kaizennight
   Kaizen Cycle
   Team
   Product
   Topics
   

   View Slide

5. #kaizennight
   Product
   

   View Slide

6. #kaizennight
   “CXϓϥοτϑΥʔϜKARTE”
   

   View Slide

7. #kaizennight
   CX ?
   

   View Slide

8. #kaizennight
   CX = Customer Experience
   ސ٬ମݧ
   

   View Slide

9. BtoB? BtoC?
   #kaizennight
   

   View Slide

10. #kaizennight
    ސ٬Λ஌Δ
    ސ٬ʹ߹ΘͤΔ
    

    View Slide

11. #kaizennight
    ސ٬Λ஌Δ
    ސ٬ʹ߹ΘͤΔ
    

    View Slide

12. #kaizennight
    αΠτʹ୭͕๚Ε͍ͯΔͷ͔
    

    View Slide

13. #kaizennight
    ݱࡏɾաڈʹͲͷΑ͏ͳߦಈΛ͍ͯ͠Δͷ͔
    

    View Slide

14. #kaizennight
    ސ٬Λ஌Δ
    ސ٬ʹ߹ΘͤΔ
    

    View Slide

15. #kaizennight
    ސ٬Λ஌Δ
    ސ٬ʹ߹ΘͤΔ
    

    View Slide

16. αΠτ಺ɾαΠτ֎Ͱͷ”ΞΫγϣϯ”Ͱ͓΋ͯͳ͠
    #kaizennight
    

    View Slide

17. ΞΫγϣϯΛΧελϚΠζ
    #kaizennight
    

    View Slide

18. KARTE Talk
    #kaizennight
    

    View Slide

19. KARTEΛKARTEࣗମʹಋೖͯ͠

    υοάϑʔσΟϯάΛ͠ͳ͕Β
    ސ٬ମݧͷ޲্Λ໨ࢦ͍ͯ͠Δ
    #kaizennight
    

    View Slide

20. View Slide

21. #kaizennight
    

    View Slide

22. #kaizennight
    Team
    

    View Slide

23. #kaizennight
    #J[EFW %FW
    ,BJ[FO
    (SPXUI
    "DDFMFSBUPS
    Our team
    

    View Slide

24. Our team
    #kaizennight
    #J[EFW %FW
    ,BJ[FO
    (SPXUI
    "DDFMFSBUPS
    

    View Slide

25. Development Team
    #kaizennight
    #J[EFW
    %FW
    ,BJ[FO
    ϓϩμΫτΞ΢τͳ։ൃ
    KARTEͷج൫ͷ্Ͱɺ࣍ͷϏδωεΛ࡞Δ։ൃ
    ΫϥΠΞϯτͷUXվળ
    

    View Slide

26. #kaizennight
    #J[EFW
    %FW
    ,BJ[FO
    ະདྷʹର͢Δ৘ใͷෆ࣮֬ੑΛԼ͛Δ
    ސ٬ͱͷؒͷ৘ใͷඇରশੑΛԼ͛Δ
    Development Team
    

    View Slide

27. #kaizennight
    ΤϯδχΞϦϯά૊৫࿦΁ͷট଴
    ʙෆ࣮֬ੑʹ޲͖߹͏ࢥߟͱ૊৫ͷϦϑΝΫλϦϯάʙ

    ޿໦େ஍ஶɹٕज़ධ࿦ࣾ
    ࢀߟ
    

    View Slide

28. #kaizennight
    ސ٬ͱͷؒͷ৘ใͷඇରশੑΛԼ͛Δ

    ʢओʹϓϩμΫτ։ൃΛ௨ͯ͠ʣ
    

    View Slide

29. #kaizennight
    ࣮͸఻Θ͍ͬͯͳ͍ػೳɺ࢖͍ํ
    ࣮͸औΓ͖Ε͍ͯͳ͍ɺސ٬ͷཁ๬
    

    View Slide

30. #kaizennight
    ϓϩμΫτˠސ٬΋ͦ͏͕ͩ

    ·ͣ͸ࣾ಺ʹ͋Δ৘ใͷඇରশੑΛ͍͔ʹղফ͢Δ͔
    ϓϩμΫτͷํ޲ੑ
    طʹ͍࣋ͬͯΔސ٬͔Βಘͨ৘ใ
    

    View Slide

31. ৘ใΛΦʔϓϯͳঢ়ଶʹ͢Δ

    GitHub
    Slack
    esa
    Dropbox Paper

    

    ͳͲ
    Ͱ͖Δ͚ͩ৘ใͷඇରশੑ͕ى͖ͳ͍Α͏ʹ͍ͯ͠Δ
    #kaizennight
    

    View Slide

32. Kaizen Team
    #kaizennight
    ,BJ[FO
    σβΠφʔ
    Ϗδωε
    ΤϯδχΞ
    ͷࠞ੒νʔϜ
    ༷ʑͳ৘ใ͕ू·ΔνʔϜ
    

    View Slide

33. #kaizennight
    ϓϩμΫτΛΧΠθϯͯ͠

    ৘ใͷඇରশੑΛԼ͛ΒΕͳ͍͔ʁ
    ͋Δ͍͸୯७ʹ࢖͍΍͘͢ͳΒͳ͍͔ʁ
    

    View Slide

34. #kaizennight
    Kaizen

    Cycle
    

    View Slide

35. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

36. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

37. ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    KARTEΛؚΉ༷ʑͳखஈΛ࢖ͬͯ৘ใΛಘΔ
    request-issues
    Ӧۀ׆ಈ΍αϙʔτͰͷސ٬ͱͷର࿩ɺࣾ಺ϝϯόʔ͔Βͷཁ๬
    KARTEΛސ٬͕Ͳ͏࢖͍ͬͯΔ͔ΛɺKARTEΛ࢖ͬͯ஌Δ
    ʢDogfoodingʹΑΓɺ৽ͨͳrequest͕ࣾ಺͔Βੜ·ΕΔʣ
    ৘ใ͕଍Γͳ͚Ε͹௚઀ސ٬ͷݩ΁
    

    View Slide

38. ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    KARTEͷސ٬͸ͲͷΑ͏ʹKARTEΛ࢖͍ͬͯΔͷ͔ʁ
    %PHGPPEJOH
    

    View Slide

39. ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    αϙʔτνϟοτ: KARTEͷސ٬͸Կʹରͯٙ͠໰Λ͔࣋ͭɺཁ๬͕͋Δ͔
    %PHGPPEJOH
    

    View Slide

40. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

41. ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ݩʑ͜ͷػೳ͸ͲͷΑ͏ʹ࢖ΘΕΔ΂͖ͳͷ͔
    ͜ͷػೳ͸௕ظతͳϓϩμΫτͷํ޲ੑͰ͸ɺ͜ΜͳҐஔ͚ͮ
    kaizen-issues
    ސ٬͕͜ͷػೳΛεϜʔζʹ࢖͑ΔΑ͏ʹ͢Δ͜ͱͰɺ

    ΤϯυϢʔβʔʹ͜ΜͳՁ஋͕͋Δ
    ͳͲ
    

    View Slide

42. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

43. ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    IssueΛ࡞ͬͯ৬छԣஅͰٞ࿦
    kaizen-issues
    ͭ·͖ͮϙΠϯτΛղফ
    ͋Δ΂͖1SPEVDU૾Λ௥ٻ
    ੠ʹͳΒͳ͍࢖༻্ͷετϨεΛܰݮ
    #kaizennight
    ৬छ໰ΘͣgithubΛ࢖͍ͬͯΔͷͰ՝୊೺Ѳɾٞ࿦͕εϜʔζ
    ͦΕͧΕ͕࣋ͭސ٬΍ϓϩμΫτʹؔ͢Δ৘ใΛ࣋ͪدΔ
    

    View Slide

44. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

45. #kaizennight
    σβΠϯɾ։ൃ
    UI Design discussion
    σβΠϯΛInVision্ʹuploadͯ͠ίϝϯτ͠߹͏
    kaizen-issues
    Github্΍ର໘ͰσΟεΧογϣϯ
    

    View Slide

46. #kaizennight
    σβΠϯɾ։ൃ
    ίʔσΟϯάɾػೳ։ൃ
    σβΠφʔ͕templateΛ࡞ΓɺstyleΛ౰ͯΔ
    Vue.jsͷSingle File ComponentsΛ࢖ͬͯɺHTML templateͱstyle෦෼Λهड़
    ΤϯδχΞ͕όοΫΤϯυɾϑϩϯτΤϯυͷͭͳ͗͜Έ෦෼Λ࣮૷
    ओʹnode.jsͰbackendɺVue.jsͰϑϩϯτΤϯυΛ࣮૷
    దٓؔ܎͢Δϝϯόʔʹ૬ஊ
    

    View Slide

47. #kaizennight
    ࢀߟ: Vue.js Single File Components
    Component୯ҐͰUIଆͷελΠϧɾίʔ
    σΟϯάɾػೳ࣮૷Λ͠΍͍͢

    

    Web ComponentsͷCustom elementsͷ
    ࢓༷ʹԊ͍ͬͯͯɺCustom tagΛHTML্
    ͰࢦఆͰ͖Δ
    scope΋੍ݶͰ͖Δ
    σβΠφʔͱΤϯδχΞͷڠۀ͕
    ͠΍͍͢

    ʢͱݸਓతʹ͸ࢥ͍ͬͯΔʣ
    

    View Slide

48. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

49. #kaizennight
    ʣ
    ސ٬ʹ఻͑Δ
    ΧΠθϯΛɺ఻͍͑ͨސ٬ʹ͖Ίࡉ΍͔ʹ఻͑Δ
    KARTEͷ઀٬αʔϏεͰɺ৽ػೳɾΧΠθϯϙΠϯτΛ௨஌
    αϙʔταΠτͷߋ৽
    %PHGPPEJOH
    

    View Slide

50. #kaizennight
    ސ٬ͷ࢖͍ํɾཁ๬Λ

    ஌Δ
    ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ
    Λڍ͛Δ
    ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ
    ΔղܾࡦΛߟ͑Δ
    σβΠϯɾ։ൃ
    ސ٬ʹ఻͑Δ
    Kaizen
    

    View Slide

51. ΤϯδχΞϦϯά͸ΤϯδχΞ͚ͩͷ࢓ࣄͰ͸ͳ͍
    #kaizennight
    

    ϓϩμΫτͷະདྷʹ޲͚ͯɺ৘ใͷෆ࣮֬ੑΛղফ͢Δಈ͖
    

    ৘ใΛ͍࣋ͬͯΔਓ͕ղܾ͢Δͷ͕ૣ͍
    ࢥ͍͕͋Δਓ͕ಈ͍ͯɺͦΕΛॿ͚߹͏ελΠϧ
    

    View Slide

52. #kaizennight
    ͨͱ͑͹
    

    View Slide

53. #kaizennight
    http://blog-plaid.com/try/4401/
    ΤϯδχΞҎ֎΋ΤϯδχΞϦϯάΛߦ͏

    ʢۃ୺ͳྫʣ
    

    View Slide

54. #kaizennight
    ·ͱΊ
    ࣗ෼ͨͪͰDogfooding͠ͳ͕Β։ൃ͢Δͱɺ৘ใ͕औΓ΍͍͢
    Ϣʔβʔͷ࢖͍ํΛৄ͘͠஌͍ͬͯΔਓɺϢʔβʔΠϯλϥΫγϣϯΛߟ
    ͑ΒΕΔσβΠφʔɺ௚઀ϓϩμΫτΛΧΠθϯ͢ΔΤϯδχΞɺ͕ࠞ੒
    ͰνʔϜΛ૊Ήͱɺ৘ใ͕ϦονʹͳΔ
    ·ͩϓϩμΫτΧΠθϯ͸͸͡·ͬͨ͹͔ΓͳͷͰɺ

    ͍͔ʹαΠΫϧΛߴ଎ʹ·Θͯ͠ਫ਼౓ͷߴ͍վળΛߦ͑Δ͔͕উෛ
    ͕ͨͬͯ͠ɺൺֱతαΠΫϧΛ଎͘·Θͤͦ͏
    ૊৫΍ϓϩμΫτΛগ͠ม͑ͯɺ৘ใͷඇରশੑΛղফ͢Δ
    

    View Slide

55. #kaizennight
    Join us!
    

    View Slide

56. Thank you!
    

    View Slide