Tweet
Tweet

Slide 1

Slide 1 text

2019 DevDay Front-End Stories From Streamlining LP Production at LINE > Daichi Nishida > LINE Growth Technology Frontend Engineer

Slide 2

Slide 2 text

Before I Start…

Slide 3

Slide 3 text

I Will Be Talking About an Internal Tool Called LPGen From the Frontend Perspective

Slide 4

Slide 4 text

There Will Be Another Presentation About LPGen Right After This One!
 (From an Architectural Perspective)

Slide 5

Slide 5 text

End of my Advertisement…
 and Back to the Actual Presentation!

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

LP Production Tool: LPGen

Slide 8

Slide 8 text

Landing Page Generator

Slide 9

Slide 9 text

LPGen Is a LP Production Tool for Non-Engineers

Slide 10

Slide 10 text

LP Production Flow: How It Was

Slide 11

Slide 11 text

LP Production Flow: How It Was Plan Deploy Code QA Design

Slide 12

Slide 12 text

Very Tedious and Took About a Month Plan Deploy Code QA Design

Slide 13

Slide 13 text

How Does LPGen Help With This Flow? Plan Deploy Code QA Design

Slide 14

Slide 14 text

Plan Deploy Code QA Design Code and Deploy Without an Engineer

Slide 15

Slide 15 text

Minimize Time Spent in Design and QA Plan Deploy Code QA Design

Slide 16

Slide 16 text

Cool, So Let’s See This LPGen

Slide 17

Slide 17 text

Simple Introduction of LPGen

Slide 18

Slide 18 text

Simple Introduction of LPGen $PNQPOFOU-JTU

Slide 19

Slide 19 text

Simple Introduction of LPGen $BOWBT

Slide 20

Slide 20 text

Simple Introduction of LPGen 1SPQFSUJFT

Slide 21

Slide 21 text

Simple Introduction of LPGen 5PPMCBS

Slide 22

Slide 22 text

Simple Introduction of LPGen

Slide 23

Slide 23 text

Ƃ Page Created Using LPGen It’s Responsive!

Slide 24

Slide 24 text

What I Focused on the Most
 When Creating LPGen

Slide 25

Slide 25 text

User Experience

Slide 26

Slide 26 text

Why I Believe User Experience Is Important

Slide 27

Slide 27 text

Because I Hate Things With Horrible User Experience

Slide 28

Slide 28 text

That’s It

Slide 29

Slide 29 text

So What Points Did I Follow To Increase User Experience?

Slide 30

Slide 30 text

User Experience: My 3 Points

Slide 31

Slide 31 text

User Experience: My 3 Points 1. Know your users

Slide 32

Slide 32 text

User Experience: My 3 Points 1. Know your users 2. Keep it simple

Slide 33

Slide 33 text

User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple

Slide 34

Slide 34 text

User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple

Slide 35

Slide 35 text

Sounds Easy? Easier Said Than Done

Slide 36

Slide 36 text

User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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)

Slide 54

Slide 54 text

Ƃ 2. Keep It Simple Thoughts to Action

Slide 55

Slide 55 text

Ƃ 2. Keep It Simple Thoughts to Action /P$PNQPOFOU/FTUJOH

Slide 56

Slide 56 text

Ƃ 2. Keep It Simple Thoughts to Action -JNJU4FMFDUBCMF$PMPST -JNJU6TBCMF$PNQPOFOUT

Slide 57

Slide 57 text

User Experience: My 3 Points 1. Know your users 3. Focus on intuitiveness 2. Keep it simple

Slide 58

Slide 58 text

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?

Slide 59

Slide 59 text

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?

Slide 60

Slide 60 text

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?

Slide 61

Slide 61 text

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?

Slide 62

Slide 62 text

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?

Slide 63

Slide 63 text

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?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Ƃ 3. Focus on Intuitiveness Thoughts to Action 8:4*8:(3JDI5FYU&EJUPS

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Ƃ 3. Focus on Intuitiveness Thoughts to Action (FOFSBUFE1BHF

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Am I saying LPGen Has Perfect User Experience?

Slide 70

Slide 70 text

Obviously NO

Slide 71

Slide 71 text

There Is Always Room for Improvement

Slide 72

Slide 72 text

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…

Slide 73

Slide 73 text

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…

Slide 74

Slide 74 text

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…

Slide 75

Slide 75 text

Thank You