Front-end stories from streamlining LP production at LINE

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

Be4518b119b8eb017625e0ead20f8fe7?s=128

LINE DevDay 2019

November 21, 2019
Tweet

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 -JNJU4FMFDUBCMF$PMPST -JNJU6TBCMF$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:(3JDI5FYU&EJUPS

  66. Ƃ 3. Focus on Intuitiveness Thoughts to Action 8:4*8:(&EJUJOH1BHF

  67. Ƃ 3. Focus on Intuitiveness Thoughts to Action (FOFSBUFE1BHF

  68. Ƃ 3. Focus on Intuitiveness Thoughts to Action .BLFUIJOHTMPPLMJLF UIFZEPXIBUUIFZEP

  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