Front-end stories from streamlining LP production at LINE

Daichi Nishida
LINE Growth Technology Frontend Engineer
https://linedevday.linecorp.com/jp/2019/sessions/S2-15

Transcript

1. 2019 DevDay Front-End Stories From Streamlining LP Production at LINE > Daichi Nishida > LINE Growth Technology Frontend Engineer
2. Before I Start…
3. I Will Be Talking About an Internal Tool Called LPGen From the Frontend Perspective
4. There Will Be Another Presentation About LPGen Right After This One!
 (From an Architectural Perspective)
5. End of my Advertisement…
 and Back to the Actual Presentation!
6. Agenda > LP Production Tool: LPGen > LP Production: How It Was and How LPGen Helped > What I Focused on the Most When Creating LPGen > There is Always Room for Improvement
7. LP Production Tool: LPGen
8. Landing Page Generator
9. LPGen Is a LP Production Tool for Non-Engineers
10. LP Production Flow: How It Was
11. LP Production Flow: How It Was Plan Deploy Code QA Design
12. Very Tedious and Took About a Month Plan Deploy Code QA Design
13. How Does LPGen Help With This Flow? Plan Deploy Code QA Design
14. Plan Deploy Code QA Design Code and Deploy Without an Engineer
15. Minimize Time Spent in Design and QA Plan Deploy Code QA Design
16. Cool, So Let’s See This LPGen
17. Simple Introduction of LPGen
18. Simple Introduction of LPGen $PNQPOFOU
    -JTU
19. Simple Introduction of LPGen $BOWBT
20. Simple Introduction of LPGen 1SPQFSUJFT
21. Simple Introduction of LPGen 5PPMCBS
22. Simple Introduction of LPGen
23. Ƃ Page Created Using LPGen It’s Responsive!
24. What I Focused on the Most
 When Creating LPGen
25. User Experience
26. Why I Believe User Experience Is Important
27. Because I Hate Things With Horrible User Experience
28. That’s It
29. So What Points Did I Follow To Increase User Experience?
30. User Experience: My 3 Points
31. User Experience: My 3 Points 1. Know your users
32. User Experience: My 3 Points 1. Know your users 2. Keep it simple
33. User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple
34. User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple
35. Sounds Easy? Easier Said Than Done
36. User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple
37. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO
38. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO
39. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO
40. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO
41. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO but no practical knowledge in design
42. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO but no practical knowledge in design
43. My Thought Process 1. Know Your Users Who are my target users? Mostly Non-Engineers who want to build and manage LPs How much knowledge do they have in building LPs? Very basic HTML/CSS/JS and a bit about SEO but no practical knowledge in design - Use basic HTML/CSS/JS terminologies, nothing too technical - Don’t complicate things that can be done - Display information that will help users only if necessary
44. User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple
45. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
46. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
47. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
48. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
49. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
50. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
51. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
52. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously
53. My Thought Process 2. Keep It Simple Are the users aiming to make complex state-of-the-art LPs? No, just simple ones Are there design rules to be followed? Yes, quite a lot Are there security policies to be followed? Yes, obviously - No component nesting - Limit user options - Minimize user custom code(html/css/js)
54. Ƃ 2. Keep It Simple Thoughts to Action
55. Ƃ 2. Keep It Simple Thoughts to Action /P
    $PNQPOFOU
    /FTUJOH
    
56. Ƃ 2. Keep It Simple Thoughts to Action -JNJU
    4FMFDUBCMF
    $PMPST -JNJU
    6TBCMF
    $PNQPOFOUT
57. User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple
58. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely, who doesn’t use the web nowadays?
59. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely, who doesn’t use the web nowadays?
60. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely, who doesn’t use the web nowadays?
61. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely, who doesn’t use the web nowadays?
62. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely. Who doesn’t use the web nowadays?
63. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely. Who doesn’t use the web nowadays?
64. My Thought Process 3. Focus on Intuitiveness Is knowing the end result important? Yes, very important Are the users familiar with common web design? Most likely. Who doesn’t use the web nowadays? - WYSIWYG where ever possible - Make objects look like they do what they do
65. Ƃ 3. Focus on Intuitiveness Thoughts to Action 8:4*8:(
    3JDI
    5FYU
    &EJUPS
66. Ƃ 3. Focus on Intuitiveness Thoughts to Action 8:4*8:(
    &EJUJOH
    1BHF
67. Ƃ 3. Focus on Intuitiveness Thoughts to Action (FOFSBUFE
    1BHF
68. Ƃ 3. Focus on Intuitiveness Thoughts to Action .BLF
    UIJOHT
    MPPL
    MJLF
    UIFZ
    EP
    XIBU
    UIFZ
    EP
69. Am I saying LPGen Has Perfect User Experience?
70. Obviously NO
71. There Is Always Room for Improvement
72. There Is Always Room for Improvement Too Many Component Properties! Certain components are complex by nature and have A LOT of properties. The Current max is 61, and it’s very hard to tell which property changes what. Changing this is a must in my to-do list Just To List a Few…
73. There Is Always Room for Improvement Components Are Too Big Components on the page are too large and hard to see. You have to scroll a lot and squint your eyes to see the boundary of the components. Maybe being able to view things in “compact mode” would be nice? Just To List a Few…
74. There Is Always Room for Improvement 2 Types of Previews? 1. Preview to view LPs before saving 2. Preview to share LPs with others They look the same but are not interchangeable. They have different entrances and are implemented differently. Merge them into one? Or Just change the name? Just To List a Few…
75. Thank You