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

by positiveflat

Slide 1

Slide 1 text

CXϓϥοτϑΥʔϜKARTEͷϓϩμΫτվળ SmartHR x PLAID  ϓϩμΫτΧΠθϯNight  #kaizennight PLAID, Inc  Yohei Noda

Slide 2

Slide 2 text

2010-2014  IBMιϑτ΢ΣΞ։ൃݚڀॴʢిࢠ৘ใ։ࣔؔ࿈ͷιϑτ΢ΣΞ։ൃͳͲʣ  2015-  גࣜձࣾϓϨΠυʢKARTEͷ։ൃͳͲʣ #kaizennight @positiveﬂat Yohei Noda UIपΓͷϓϩάϥϛϯάͱɺ৽͍͠αʔϏεݟ͚ͭͯࢼ͢ͷ͕޷͖  Vue.js Japan User groupʢ11݄ʹVue Fes΍Γ·͢ʂʣ ࣗݾ঺հ

Slide 3

Slide 3 text

#kaizennight 11݄ʹVue Fes΍Γ·͢ʂ

Slide 4

Slide 4 text

#kaizennight Kaizen Cycle Team Product Topics

Slide 5

Slide 5 text

#kaizennight Product

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

#kaizennight CX ?

Slide 8

Slide 8 text

#kaizennight CX = Customer Experience ސ٬ମݧ

Slide 9

Slide 9 text

BtoB? BtoC? #kaizennight

Slide 10

Slide 10 text

#kaizennight ސ٬Λ஌Δ ސ٬ʹ߹ΘͤΔ

Slide 11

Slide 11 text

#kaizennight ސ٬Λ஌Δ ސ٬ʹ߹ΘͤΔ

Slide 12

Slide 12 text

#kaizennight αΠτʹ୭͕๚Ε͍ͯΔͷ͔

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

#kaizennight ސ٬Λ஌Δ ސ٬ʹ߹ΘͤΔ

Slide 15

Slide 15 text

#kaizennight ސ٬Λ஌Δ ސ٬ʹ߹ΘͤΔ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

KARTE Talk #kaizennight

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

#kaizennight

Slide 22

Slide 22 text

#kaizennight Team

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

#kaizennight ΤϯδχΞϦϯά૊৫࿦΁ͷট଴ ʙෆ࣮֬ੑʹ޲͖߹͏ࢥߟͱ૊৫ͷϦϑΝΫλϦϯάʙ  ޿໦େ஍ஶɹٕज़ධ࿦ࣾ ࢀߟ

Slide 28

Slide 28 text

#kaizennight ސ٬ͱͷؒͷ৘ใͷඇରশੑΛԼ͛Δ  ʢओʹϓϩμΫτ։ൃΛ௨ͯ͠ʣ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

#kaizennight ϓϩμΫτˠސ٬΋ͦ͏͕ͩ  ·ͣ͸ࣾ಺ʹ͋Δ৘ใͷඇରশੑΛ͍͔ʹղফ͢Δ͔ ϓϩμΫτͷํ޲ੑ طʹ͍࣋ͬͯΔސ٬͔Βಘͨ৘ใ

Slide 31

Slide 31 text

৘ใΛΦʔϓϯͳঢ়ଶʹ͢Δ  GitHub Slack esa Dropbox Paper    ͳͲ Ͱ͖Δ͚ͩ৘ใͷඇରশੑ͕ى͖ͳ͍Α͏ʹ͍ͯ͠Δ #kaizennight

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

#kaizennight ϓϩμΫτΛΧΠθϯͯ͠  ৘ใͷඇରশੑΛԼ͛ΒΕͳ͍͔ʁ ͋Δ͍͸୯७ʹ࢖͍΍͘͢ͳΒͳ͍͔ʁ

Slide 34

Slide 34 text

#kaizennight Kaizen  Cycle

Slide 35

Slide 35 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 36

Slide 36 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ KARTEͷސ٬͸ͲͷΑ͏ʹKARTEΛ࢖͍ͬͯΔͷ͔ʁ %PHGPPEJOH

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 41

Slide 41 text

ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ݩʑ͜ͷػೳ͸ͲͷΑ͏ʹ࢖ΘΕΔ΂͖ͳͷ͔ ͜ͷػೳ͸௕ظతͳϓϩμΫτͷํ޲ੑͰ͸ɺ͜ΜͳҐஔ͚ͮ kaizen-issues ސ٬͕͜ͷػೳΛεϜʔζʹ࢖͑ΔΑ͏ʹ͢Δ͜ͱͰɺ  ΤϯυϢʔβʔʹ͜ΜͳՁ஋͕͋Δ ͳͲ

Slide 42

Slide 42 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

#kaizennight ࢀߟ: Vue.js Single File Components Component୯ҐͰUIଆͷελΠϧɾίʔ σΟϯάɾػೳ࣮૷Λ͠΍͍͢    Web ComponentsͷCustom elementsͷ ࢓༷ʹԊ͍ͬͯͯɺCustom tagΛHTML্ ͰࢦఆͰ͖Δ scope΋੍ݶͰ͖Δ σβΠφʔͱΤϯδχΞͷڠۀ͕ ͠΍͍͢  ʢͱݸਓతʹ͸ࢥ͍ͬͯΔʣ

Slide 48

Slide 48 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

#kaizennight ސ٬ͷ࢖͍ํɾཁ๬Λ  ஌Δ ཧ૝ͷঢ়ଶʢ࢖ΘΕํʣ Λڍ͛Δ ཧ૝ͱݱ࣮ͷࠩ෼ΛຒΊ ΔղܾࡦΛߟ͑Δ σβΠϯɾ։ൃ ސ٬ʹ఻͑Δ Kaizen

Slide 51

Slide 51 text

ΤϯδχΞϦϯά͸ΤϯδχΞ͚ͩͷ࢓ࣄͰ͸ͳ͍ #kaizennight   ϓϩμΫτͷະདྷʹ޲͚ͯɺ৘ใͷෆ࣮֬ੑΛղফ͢Δಈ͖   ৘ใΛ͍࣋ͬͯΔਓ͕ղܾ͢Δͷ͕ૣ͍ ࢥ͍͕͋Δਓ͕ಈ͍ͯɺͦΕΛॿ͚߹͏ελΠϧ

Slide 52

Slide 52 text

#kaizennight ͨͱ͑͹

Slide 53

Slide 53 text

#kaizennight http://blog-plaid.com/try/4401/ ΤϯδχΞҎ֎΋ΤϯδχΞϦϯάΛߦ͏  ʢۃ୺ͳྫʣ

Slide 54

Slide 54 text

#kaizennight ·ͱΊ ࣗ෼ͨͪͰDogfooding͠ͳ͕Β։ൃ͢Δͱɺ৘ใ͕औΓ΍͍͢ Ϣʔβʔͷ࢖͍ํΛৄ͘͠஌͍ͬͯΔਓɺϢʔβʔΠϯλϥΫγϣϯΛߟ ͑ΒΕΔσβΠφʔɺ௚઀ϓϩμΫτΛΧΠθϯ͢ΔΤϯδχΞɺ͕ࠞ੒ ͰνʔϜΛ૊Ήͱɺ৘ใ͕ϦονʹͳΔ ·ͩϓϩμΫτΧΠθϯ͸͸͡·ͬͨ͹͔ΓͳͷͰɺ  ͍͔ʹαΠΫϧΛߴ଎ʹ·Θͯ͠ਫ਼౓ͷߴ͍վળΛߦ͑Δ͔͕উෛ ͕ͨͬͯ͠ɺൺֱతαΠΫϧΛ଎͘·Θͤͦ͏ ૊৫΍ϓϩμΫτΛগ͠ม͑ͯɺ৘ใͷඇରশੑΛղফ͢Δ