サインアップフロー改修のデザインプロセス

Androidエンジニアデザイン部 #1

Transcript

1. 2018.3.28 | ©2018 wakwak3125
   αΠϯΞοϓϑϩʔվमͷ
   σβΠϯϓϩηε
   σβΠφʔͱ΍͍ͬͯ͘΍Γ͔ͨ
   AndroidΤϯδχΞσβΠϯ෦ #1
   @wakwak3125 from Wantedly People
   

   View Slide

2. 2018.3.28 | ©2018 wakwak3125
   2
   About me
   Ryo Sakaguchi
   @wakwak3125
   • Wantedly, Inc (2017/2~)
   • Wantedly People͍ͬͯ͏ΞϓϦ࡞ͬͯ·͢
   • Kotlin޷͖
   • Kotlin޷͖
   • UI/UXߟ͑Δͷ޷͖(ಘҙͩͱ͸ݴ͍ͬͯͳ͍)
   • ௼ΓͱΪλʔͱεϊʔϘʔυ͕޷͖
   

   View Slide

3. 2018.3.28 | ©2018 wakwak3125
   3
   Wantedly People?
   ໊ࢗΛ؅ཧ͢ΔΞϓϦ
   ਓ຺Λϙʔλϒϧʹ࣋ͪา͜͏
   • ͺͺͬͱෳ਺ຕҰׅऔΓࠐΈ
   • ͙͢ʹσʔλԽ͞ΕΔ
   • ಡΈऔ໊ͬͨࢗʹؔ࿈͢Δ࿩୊͕Έ͔ͭΔ
   • WantedlyϢʔβʔͷ໊ࢗΛऔΓࠐΜͩΒͦͷ৘ใ
   ΋෇༩͞ΕΔ
   • OCR + Machine Learning
   

   View Slide

4. 2018.3.28 | ©2018 wakwak3125
   4
   αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε
   ࠓ೔࿩͢͜ͱ
   ΞϓϦͷαΠϯΞοϓϑϩʔվमͷϓϩηε͕ϝΠϯ
   • վળϓϩηε
   • ͏·͍ͬͨ͘ࢪࡦ
   • ͏·͍͔͘ͳ͔ͬͨࢪࡦ
   • ·ͱΊ
   

   View Slide

5. 2018.3.28 | ©2018 wakwak3125
   5
   վળϓϩηε
   

   View Slide

6. 2018.3.28 | ©2018 wakwak3125
   6
   վળϓϩηε
   ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
   ؆ུԽͨ͠΋ͷ
   

   View Slide

7. 2018.3.28 | ©2018 wakwak3125
   7
   ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
   վળϓϩηε ࣗ෼ʢΤϯδχΞʣͷ୲౰ྖҬ
   

   View Slide

8. 2018.3.28 | ©2018 wakwak3125
   8
   վળϓϩηε
   ମݧΛߟ͑Δ σβΠϯ ࣮૷ ݕূ
   σβΠφʔͷ୲౰ྖҬ
   

   View Slide

9. 2018.3.28 | ©2018 wakwak3125
   9
   վળϓϩηε
   
   جຊతʹίΞͳ෦෼Ҏ֎͸ڞ௨ྖҬ
   

   View Slide

10. 2018.3.28 | ©2018 wakwak3125
    10
    վળϓϩηε
    
    HOW?
    

    View Slide

11. 2018.3.28 | ©2018 wakwak3125
    11
    վળϓϩηε
    ମݧΛߟ͑Δ
    ڞ௨ʹཧղͰ͖Δ΋ͷͱͯ͠ɺUIFlowΛ࡞Δ
    • ςΩετϕʔεͷUIFlow͕͋Ε͹ίϛϡχέʔ
    γϣϯ͠΍͍͢
    • ࣗ෼͸guiflowͱ͍͏πʔϧΛ࢖ͬͨ
    • ৄࡉ·Ͱ݁ߏ٧ΊΔ
    • Τϥʔൃੜ࣌ͷڍಈ΍ϑΥʔϧόοΫઌؚΉ
    • ͦΕΛݩʹɺσβΠφʔ͕ϥϑͳϓϩτλΠϓΛ
    ࡞Δ
    • νʔϜʹڞ༗ͯ͠ݕূ
    • Αͦ͞͏ͳΒσβΠϯϓϩηεʹਐΉ
    HOW?
    

    View Slide

12. 2018.3.28 | ©2018 wakwak3125
    12
    վળϓϩηε
    σβΠϯ
    σβΠφʔ͕ΧοίΠΠཧ૝Λ࡞ͬͯ͘ΕΔ
    • ·ͣ͸׬શʹཧ૝ϕʔεͰ࠷ߴʹΧοίΠΠ΋ͷ
    Λ࡞ͬͯ΋Β͏
    • Sketch -> Zeplin
    • ͔ͦ͜Βௐ੔͍ͯ͘͠
    • ͜Ε͸ͻͱͦΕͧΕ΍Γํ͕͋Δ͔΋͠Εͳ͍
    • ઐ໳ྖҬͰ͸ͳ͍ͷͰ͝ΊΜͳ͍͞
    HOW?
    

    View Slide

13. 2018.3.28 | ©2018 wakwak3125
    13
    վળϓϩηε
    ࣮૷
    มߋʹ଱͑͏Δ͍͍ײ͡ͷઃܭͰ΍ͬͨ
    • ৽نొ࿥ͷը໘ભҠ͸ΦʔτϚτϯΛ׆༻͍ͯ͠
    ͍ײ͡ʹͨ͠ɻ
    • มߋͱςετ͕͠қ͍ͷͰ࢓༷มߋʹ଱͑ΕΔ
    • A/Bςετ΋΍ͬͨ
    • ϓογϡ௨஌ͷࢪࡦ΋ಉ࣌ʹߦͬͨͷͰɺαʔόʔ
    αΠυͷ؆୯ͳ࣮૷΋ߦͬͨɻ
    • ظ೔ͱ͔Ͱݫͦ͠͏ͳͱ͜Ζʹؔͯ͠͸దٓ૬ஊ
    ͯ͠࡟ͬͨΓ
    HOW?
    

    View Slide

14. 2018.3.28 | ©2018 wakwak3125
    14
    վળϓϩηε
    ݕূ
    σβΠφʔ΋ࢀՃ͠΍͘͢ɺՄࢹԽΛॏࢹ
    • Wantedly͸͍Ζ͍ΖͳϩάΛBigQueryʹͨΊ͍ͯ
    Δ
    • ͦͷϩάΛDOMOͱ͍͏BIπʔϧͰՄࢹԽ͢Δ
    • ࠓճ͸αΠϯΞοϓϑϩʔͷϑΝωϧΛࣗલͰ
    ΫΤϦॻ͍ͯɺDOMOʹ൓өͨ͠
    • جຊతʹσβΠϯ͸ఆੑతͳ΋ͷͱଊ͑ΒΕ͍ͯ
    ΔͷͰɺΤϯδχΞ͕͖ͪΜͱ਺஋Խͯ͠ՄࢹԽ
    ͢Δ͜ͱͰɺఆྔతʹଊ͑Δ͜ͱ͕Ͱ͖Δɻ
    • ͜͜Ͱྑ͘ͳ͍ݸॴΛݟ͚ͭͯ࣍ʹ׆͔͢
    HOW?
    ʴ
    

    View Slide

15. 2018.3.28 | ©2018 wakwak3125
    15
    վળϓϩηε
    
    ͱ͍͏ϓϩηεΛ͙Δ͙Δճ͢
    

    View Slide

16. 2018.3.28 | ©2018 wakwak3125
    16
    ͏·͍ͬͨ͘ࢪࡦ
    

    View Slide

17. 2018.3.28 | ©2018 wakwak3125
    17
    ͏·͍ͬͨ͘ࢪࡦ
    ը໘਺͸ۃྗݮΒ͢
    1ը໘ຖʹ20%͸཭୤
    

    View Slide

18. 2018.3.28 | ©2018 wakwak3125
    18
    αΠϯΞοϓΛඞਢʹ͠ͳ͍
    αʔϏεʹΑΔ

    ࣗ෼ͷαʔϏε͸Ͳ͏͔ͰܾΊͯ΄͍͠
    ͏·͍ͬͨ͘ࢪࡦ
    

    View Slide

19. 2018.3.28 | ©2018 wakwak3125
    19
    ίΞͳମݧΛؚΊΔ
    Wantedly People͸໊ࢗࡱӨମݧ͕Ұ൪ڻ͖ͱײಈ
    Λ༩͑ΒΕΔͷͰɺ໊ࢗࡱӨ͚ͩͰ৽نొ࿥Ͱ͖
    ΔΑ͏ʹͨ͠
    ͏·͍ͬͨ͘ࢪࡦ
    

    View Slide

20. 2018.3.28 | ©2018 wakwak3125
    20
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    

    View Slide

21. 2018.3.28 | ©2018 wakwak3125
    21
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    ௕Ίͷ΢ΥʔΫεϧʔ
    LottieΛ࢖͔͍͍ͬͯͬ͜΍ͭΛ࡞͚ͬͨͲ
    ͦ͜Ͱ͏·͘ັྗΛ఻͑ΒΕͳ͔ͬͨɻ
    ମݧͯ͠΋ΒΘͳ͍ͱܧଓ཰΋ొ࿥཰΋ѱ͍
    

    View Slide

22. 2018.3.28 | ©2018 wakwak3125
    22
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    ೖྗ߲໨Λࡉ͔͘ը໘ʹ෼͚ͨ
    ը໘਺ͷ૿ՃʹΑΓɺ཭୤͕ଟ͘ͳͬͯ͠·ͬͨ
    

    View Slide

23. 2018.3.28 | ©2018 wakwak3125
    23
    ͏·͍͔͘ͳ͔ͬͨࢪࡦ
    αΠϯΞοϓํ๏Λબ͹ͤͨ
    Facebook/Wantedly/Email
    ͜ΕΛબ୒͢Δஈ֊ͰϢʔβʔ͸཭୤
    

    View Slide

24. 2018.3.28 | ©2018 wakwak3125
    24
    αΠϯΞοϓϑϩʔվमͷσβΠϯϓϩηε
    ·ͱΊ
    • ମݧΛ࡞Δɾߟ͑Δͷ͸σΟϨΫλʔ΍σβΠφʔ
    ͚ͩͷ࢓ࣄ͡Όͳ͍
    • ͦͷ্ͰΤϯδχΞͱͯ͠ͷڧΈΛ׆͔ͯ͠ڞಉ
    ࡞ۀ͍͖͍ͯͨ͠
    • αΠϯΞοϓʹؔͯ͠͸αʔϏε͝ͱʹཁ͕݅͋
    Δͱ͜ΖͳͷͰɺ࣌ؒΛ͔͚ͯͬ͘͡Γվળͯ͠
    ͍͘ͷ͕๬·͍͠
    
    

    View Slide