Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Killer Landing Page Design: How to Turn Your Site's Traffic into Paying Customers

10,271 views

Published on

If you’re like most most indie developers, your landing pages are your sales team. However, without stellar design, landing pages only convert 5% to 15% of traffic into customers. Not too good for your bottom line. In this workshop, you’ll learn the critical elements of page design and apply them to your own site for an in-workshop review. You’ll leave with the tools you need to boost your conversion rate to upwards of 50%, plus a sketch of your own site to get started with.

Killer Landing Page Design: How to Turn Your Site's Traffic into Paying Customers

  1. 1. KILLER LANDING PAGE DESIGN How to Turn Your Site’s Traffic into Paying Customers © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  2. 2. EMMY JONASSEN Founder, Indie Game Girl @IndieGameGirl emmy@indiegamegirl.com www.indiegamegirl.com Hi, I’m Emmy! I help indie game developers build adoring fanbases with free marketing instruction. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  3. 3. WHAT IS A LANDING PAGE? A website page with one purpose: to convert visitors into customers. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  4. 4. AN EXAMPLE by Campaign Monitor •  Placement of one clickable button makes intended action obvious © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  5. 5. ANOTHER EXAMPLE by American Bullion •  Ditto, but with a form in addition to one clickable button © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  6. 6. FACT Average landing pages convert between 5% to 15% of visitors. - HubSpot © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  7. 7. FACT Killer landing pages convert between 35% to 50% of visitors. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  8. 8. IMPORTANT TERMINOLOGY Relevant marketing you need to know. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  9. 9. FOLD An invisible line on a web page that separates visible content from content visible only after scrolling. Usually, the fold is 600 pixels from the top of the page. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  10. 10. CALL-TO-ACTION BUTTON (CTA) A button on your landing page that solicits the intended action from the visitor. E.g., buy or download. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  11. 11. CONVERSION RATE (CVR) The percentage of landing page visitors who perform the page’s intended action. E.g., buy or download. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  12. 12. CRITICAL LANDING PAGE ELEMENTS What you need (and don’t need) to create a winning design. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  13. 13. NAVIGATION Best Practices: 1.  Remove navigation completely 2.  Keep company logo in the top left as the only navigable item - Landing page design by Dawn of Play © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  14. 14. SOCIAL SHARING ICONS Best Practices: 1.  Make it easy for visitors to share your page with their social network, A.K.A., free marketing 2.  Include at least Facebook, Twitter, LinkedIn, Google+ and email sharing options - Landing page design by Owlchemy Labs © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  15. 15. STRONG HEADLINE Best Practices: 1.  Make your headline relevant to your audience by using it to communicate your game’s primary benefit 2.  Keep it short and clear - Landing page design by Dawn of Play © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  16. 16. CTA BUTTON Best Practices: 1.  Make your CTA button stand out from the rest of the page using color, size, shape and white space 2.  Use action verbs - Landing page design by Goodhustle Studios, Inc. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  17. 17. TRAILER VIDEO Best Practices: 1.  Keep your trailer to 90 seconds or less 2.  Use an attentiongrabbing intro and music/sound effects to set the mood 3.  Show in-game footage and reviews (if possible) 4.  Point the ending CTA to your lander’s CTA button - Landing page design by Owlchemy Labs © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  18. 18. SCREENSHOTS Best Practices: 1.  Treat screenshots like art: make them at a high resolution, with beautiful composition, well lit and capture an engaging scene 2.  Include at least five screenshots 3.  Add text to screenshots to give context - Landing page design by Owlchemy Labs © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  19. 19. BULLETED BENEFITS LIST Best Practices: 1.  List benefits, NOT features 2.  List benefits in a bulleted list, rather than a paragraph of text 3.  Keep bullets clear, relevant and short - Landing page design by Goodhustle Studios, Inc. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  20. 20. TESTIMONIALS & REVIEWS Best Practices: 1.  Include player testimonials and/or site reviews 2.  Use photos and/or logos representing each testimonial and/or review to add a touch of personalization or brand recognition - Landing page design by Dawn of Play © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  21. 21. CONTACT & PRESS KIT FOR THE MEDIA Best Practices: 1.  Make it easy for the press to contact you and/or get the info it needs to write about your game with contact and press kit buttons/ links - Landing page design by Cloud Kid © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  22. 22. OTHER CONSIDERATIONS Additional factors that matter. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  23. 23. What to Keep Above the Fold: 1.  Logo 2.  Social sharing icons 3.  Headline 4.  Trailer video 5.  CTA button 6.  Screenshots (partially) © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  24. 24. Other Factors that Influence Conversion: 1.  The word “free” 2.  Number of fields in registration forms 3.  Security icons/badges © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  25. 25. ASSIGNMENT Applying what you learned to a real-world example. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  26. 26. Landing Page Assignment: 1.  Form teams of three people. 2.  Select 1 member’s landing page to use for this assignment. 3.  Using the best practices reviewed and paper/markers provided, sketch out how you would revise the landing page you selected. 4.  You will have 30 minutes to complete this task. 5.  Each team will have 10 minutes to present its current landing page and revised design. Be sure to explain your reasoning behind each design change. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  27. 27. A/B TESTING The secret to optimizing your landing page. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  28. 28. WHAT IS A/B TESTING? A simple way to test changes you make to your landing page against the current design and determine which changes produce positive results. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  29. 29. How to Correctly Perform A/B Tests: 1.  Publish your landing page variations 2.  Push an equal amount of traffic to each variation 3.  Measure each variation’s performance over the same period of time 4.  Implement your winning variation 5.  Repeat Quick Tip Check out Optimizely for an awesome and affordable A/B testing solution. © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  30. 30. Five Critical A/B Tests: 1.  CTA button 2.  Headline 3.  Layout and style 4.  Pricing and promotional offers 5.  Trailer video and screenshots © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  31. 31. CTA BUTTON TEST Color Download Now vs Download Now Placement Download Now Verbiage Download Now Free Download Size Download Now vs vs vs Download Now © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com Download Now
  32. 32. HEADLINE TEST Benefit Get 60 hours of real-time strategy fun. Loss Aversion Get 60 hours of real-time strategy fun right now. Question Do you want to get 60 hours of real-time strategy fun? © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  33. 33. LAYOUT AND STYLE TEST Option A Option B © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com
  34. 34. PRICING AND PROMOTIONAL OFFERS TEST Option A Option B Buy Now $9.99 Buy Now $4.99 Buy Now $9.99 Buy Now $9.99 Today o n © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com ly $4.99
  35. 35. TRAILER VIDEO AND SCREENSHOTS TEST Option A Option B Trailer (version 1) © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com Trailer (version 2)
  36. 36. THANK YOU! For more free, step-by-step marketing instruction, visit indiegamegirl.com. Happy marketing! © Indie Game Girl | Build Adoring Fanbases with Marketing | www.indiegamegirl.com

×