一貫したUXをつくるためのプロセス

NEWT Tech Talk vol.5 Design LT！スマートな海外旅行の体験を作るために
https://reiwatravel.connpass.com/event/301052/
こちらで話した内容です。

Transcript

1. © 2023 Reiwa Travel, Inc. UX
2. © 2023 Reiwa Travel, Inc. UI/UX BCG Digital Ventures BCG X 2 : NEWT UI/UX Designer PdM 2 rena kanahama
3. © 2023 Reiwa Travel, Inc. NEWT Product 3 KGI Designer PdM ઓུݕ౼ϓϩηεʢPOʣ ઓུ ࡦఆ ϩʔυ Ϛοϓ ཁٻ (UserStory) ࢓༷ݕ౼ UI ఆٛ
4. © 2023 Reiwa Travel, Inc. NEWT 4
5. © 2023 Reiwa Travel, Inc. 5
6. © 2023 Reiwa Travel, Inc. 6
7. © 2023 Reiwa Travel, Inc. 7 ɾNEWTͷσβΠϯΛ͑͞͞Δ;ͨͭͷ౔୆ ɾΞ΢τϓοτΛ͏Έͩ͢ϓϩηε ɾ·ͱΊ
8. © 2023 Reiwa Travel, Inc. NEWT
9. © 2023 Reiwa Travel, Inc. Brand philosophy 1
10. © 2023 Reiwa Travel, Inc. 10 Brand philosophy NEWTͷσβΠϯΛ͑͞͞Δ;ͨͭͷ౔୆
11. © 2023 Reiwa Travel, Inc. 11 Brand philosophy NEWTͷσβΠϯΛ͑͞͞Δ;ͨͭͷ౔୆ 👌
12. © 2023 Reiwa Travel, Inc. 12 Brand philosophy NEWTͷσβΠϯΛ͑͞͞Δ;ͨͭͷ౔୆ ઐ໳༻ޠ͸࢖Θͳ͍ ࣍ͷߦಈΛΘ͔Γ΍͘͢هࡌ ίϛϡχέʔγϣϯʹ͔͋ͨͨ͞Λ
13. © 2023 Reiwa Travel, Inc. 13 Brand philosophy NEWT NEWT
14. © 2023 Reiwa Travel, Inc. Design system 2
15. © 2023 Reiwa Travel, Inc. 15 Design system NEWT
16. © 2023 Reiwa Travel, Inc. 16 Design system NEWT
17. © 2023 Reiwa Travel, Inc. 17 Design system NEWT
18. © 2023 Reiwa Travel, Inc. NEWT UI Style component 18 Design system NEWT
19. © 2023 Reiwa Travel, Inc. NEWT Brand philosophy NEWT Design system NEWT UI /
20. © 2023 Reiwa Travel, Inc. Brand philosophy Design system
21. © 2023 Reiwa Travel, Inc. Brand philosophy Design system ·ͣ͜Ε͕େࣄ
22. © 2023 Reiwa Travel, Inc. 🚀
23. © 2023 Reiwa Travel, Inc.
24. © 2023 Reiwa Travel, Inc. NEWT Product 24 KGI Designer PdM ઓུݕ౼ϓϩηεʢPOʣ ઓུ ࡦఆ ϩʔυ Ϛοϓ ཁٻ (UserStory) ࢓༷ݕ౼ UI ఆٛ
25. © 2023 Reiwa Travel, Inc. 25 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε
26. © 2023 Reiwa Travel, Inc. 26 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε σβΠϯίϯηϓτܾఆ·ͰʣݴޠԽ & εϐʔυ✍
27. © 2023 Reiwa Travel, Inc. 27 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε σβΠϯHandOff·Ͱʣ ͨ͘͞Μٞ࿦🙌
28. © 2023 Reiwa Travel, Inc. 28 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε ϦϦʔε·Ͱʣ ख໭ΓΛڪΕͳ͍🙏
29. © 2023 Reiwa Travel, Inc. 29 σβΠϯίϯηϓτܾఆ·ͰʣݴޠԽ & εϐʔυ✍ σβΠϯHandOff·Ͱʣͨ͘͞Μٞ࿦🙌 ϦϦʔε·Ͱʣख໭ΓΛڪΕͳ͍🙏 1 2 3
30. © 2023 Reiwa Travel, Inc. & ✍ 1
31. © 2023 Reiwa Travel, Inc. 31 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε
32. © 2023 Reiwa Travel, Inc. 32 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε ͠Β΂Δ ͭ͘Δ ૬ஊ͢Δ
33. © 2023 Reiwa Travel, Inc. 33 & ✍ 👩💻 ...
34. © 2023 Reiwa Travel, Inc. 👁 👁 34 & ✍
35. © 2023 Reiwa Travel, Inc. 35 & ✍
36. © 2023 Reiwa Travel, Inc. 36 & ✍
37. © 2023 Reiwa Travel, Inc. 37 & ✍
38. © 2023 Reiwa Travel, Inc. 38 & ✍
39. © 2023 Reiwa Travel, Inc. 39 & ✍ Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε 🗒 Top of TopΛࢀߟʹ͢Δ ͳʹ͕࿦఺ʹͳΓͦ͏͔ߟ͑ͯ৮Δ ද૚͡Όͳͯ͘ίϯηϓτΛΈΔ 1 2 3
40. © 2023 Reiwa Travel, Inc. 40 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε ͠Β΂Δ ͭ͘Δ ૬ஊ͢Δ 🙆 & ✍ Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
41. © 2023 Reiwa Travel, Inc. 41 & ✍
42. © 2023 Reiwa Travel, Inc. 42 & ✍
43. © 2023 Reiwa Travel, Inc. 43 & ✍
44. © 2023 Reiwa Travel, Inc. 44 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε ͠Β΂Δ ͭ͘Δ ૬ஊ͢Δ 🙆 🙆 ʢͬ͘͟Γʣ & ✍ Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
45. © 2023 Reiwa Travel, Inc. 45 & ✍
46. © 2023 Reiwa Travel, Inc. 46 & ✍
47. © 2023 Reiwa Travel, Inc. 47 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε ͠Β΂Δ ͭ͘Δ ૬ஊ͢Δ 🙆 🙆 ʢͬ͘͟Γʣ 🙆 & ✍ Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
48. © 2023 Reiwa Travel, Inc. 48 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε & ✍ Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
49. © 2023 Reiwa Travel, Inc. Hand off 🙌 2
50. © 2023 Reiwa Travel, Inc. 50 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε 🙌 Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
51. © 2023 Reiwa Travel, Inc. 51 🙌 ͜Μͳײ͡ʹ͍ͨ͠Ͱ͢ʂ
52. © 2023 Reiwa Travel, Inc. 52 🙌
53. © 2023 Reiwa Travel, Inc. 53 🙌 ը໘൒෼ʹݮͬͨʂʂʂʂ
54. © 2023 Reiwa Travel, Inc. 54 🙌 😭 ෳࡶͳग़͠෼͚ʹͳͬͯ͠·͍ͬͯͨ ॲཧͷλΠϛϯά͕ඍົͰ࣮૷͠ʹ͍͘࢓༷ʹͳ͍ͬͯͨ ίϯϙʔωϯτͷఆٛͷೝ͕ࣝ߹͍ͬͯͳ͔ͬͨ
55. © 2023 Reiwa Travel, Inc. 55 🙌 😭 ෳࡶͳग़͠෼͚ʹͳͬͯ͠·͍ͬͯͨ ॲཧͷλΠϛϯά͕ඍົͰ࣮૷͠ʹ͍͘࢓༷ʹͳ͍ͬͯͨ ίϯϙʔωϯτͷఆٛͷೝ͕ࣝ߹͍ͬͯͳ͔ͬͨ
56. © 2023 Reiwa Travel, Inc. 56 🙌 ͜ͷΫΤϦ͸ ͲͷλΠϛϯάͰୟ͘ʁ APIΤϥʔͷͱ͖ʹ Ͳ͏ॲཧ͢Δ͔ʁ ͜ͷσʔλͷ؅ཧ͸ ΫϥΠΞϯτʁBEʁ 🤔
57. © 2023 Reiwa Travel, Inc. 57 🙌 ͜ͷΫΤϦ͸ ͲͷλΠϛϯάͰୟ͘ʁ APIΤϥʔͷͱ͖ʹ Ͳ͏ॲཧ͢Δ͔ʁ ͜ͷσʔλͷ؅ཧ͸ ΫϥΠΞϯτʁBEʁ ࡉ͔͍UXʹᴥᴪ͕ग़ͯ͠·ͬͯ ʮຊ౰͸͜͏͔ͨͬͨ͠ͷʹɾɾɾʯͷൃੜ
58. © 2023 Reiwa Travel, Inc. 58 🙌 ͜ͷΫΤϦ͸ ͲͷλΠϛϯάͰୟ͘ʁ APIΤϥʔͷͱ͖ʹ Ͳ͏ॲཧ͢Δ͔ʁ ͜ͷσʔλͷ؅ཧ͸ ΫϥΠΞϯτʁBEʁ ແཧ😇
59. © 2023 Reiwa Travel, Inc. 59 🙌 ͜ͷΫΤϦ͸ ͲͷλΠϛϯάͰୟ͘ʁ APIΤϥʔͷͱ͖ʹ Ͳ͏ॲཧ͢Δ͔ʁ ͜ͷσʔλͷ؅ཧ͸ ΫϥΠΞϯτʁBEʁ ͜͏ͨ͠৔߹͜͜ͷମݧͬͯͲ͏ͳΓ·͔͢ʁ ͜͏ͳΔͷͰɺ͜͏͍ͨ͠৔߹͸͕ͬͪ͜Αͦ͞͏
60. © 2023 Reiwa Travel, Inc. 60 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε 🙌 Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε 👀
61. © 2023 Reiwa Travel, Inc. 🙏 3
62. © 2023 Reiwa Travel, Inc. 62 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε 🙏 Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε
63. © 2023 Reiwa Travel, Inc. 63 🙏
64. © 2023 Reiwa Travel, Inc. 64 🙏
65. © 2023 Reiwa Travel, Inc. 65 🙏
66. © 2023 Reiwa Travel, Inc. 66 🙏 ؾ͍͕ͮͨ࣌Ұ൪ই͕ઙ͍ख໭ΓλΠϛϯά
67. © 2023 Reiwa Travel, Inc. 67 🙏 👀 & QA
68. © 2023 Reiwa Travel, Inc. 68 🙏 🙏
69. © 2023 Reiwa Travel, Inc. 69 🙏 Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε 🗒 Ձ஋ఏڙ͕࠷༏ઌʹͳ͍ͬͯΔ͔ʁ ख໭Γ͸͠ͳ͍ํ͕ઈରૣ͍ 1 2
70. © 2023 Reiwa Travel, Inc. 70 🙏 🥺 ×
71. © 2023 Reiwa Travel, Inc. 71 ཁٻ ࿦఺ ચ͍ग़͠ ଞࣾࣄྫ ௐࠪ Prototype ࡞੒ ٞ࿦ σβΠϯ ίϯηϓτ ܾఆ UIઃܭ ࣮૷νʔϜ ͱٞ࿦ σβΠϯ HandOff ࣮૷ QA ϦϦʔε 🙏 Ξ΢τϓοτΛ͏Έͩ͢ϓϩηε UX 🙏
72. © 2023 Reiwa Travel, Inc.
73. © 2023 Reiwa Travel, Inc. ϓϩηεΛେࣄʹ͢Δ
74. © 2023 Reiwa Travel, Inc. 74 σβΠϯίϯηϓτܾఆ·ͰʣݴޠԽ & εϐʔυ ✍ σβΠϯHandOff·Ͱʣͨ͘͞Μٞ࿦🙌 ϦϦʔε·Ͱʣख໭ΓΛڪΕͳ͍🙏 1 2 3
75. © 2023 Reiwa Travel, Inc. Brand philosophy΍Design system ϓϩηεΛେࣄʹ͢Δ
76. © 2023 Reiwa Travel, Inc. Brand philosophy΍Design system ϓϩηεΛେࣄʹ͢Δ
77. © 2023 Reiwa Travel, Inc. 77