Designed to Sell: The Huge Impact of Small Decisions

Retailers and web designers alike can get caught up in the look and functionality of a store’s website, forgetting that every decision made needs to be made with your business and your user in mind. In this session, we will learn how to identify your website’s primary call to action and create online experiences that encourage conversion. Discover the design principles that have a huge impact on how people interact with and understand your website—and how that can affect your company’s bottom line.

Transcript

1. DESIGNED TO SELL
   The Huge Impact of
   Small Decisions
   

   View Slide

2. @marktimemedia
   I
   Design
   & BUILD
   HI, I’M
   MICHELLE.
   WEBSITES
   

   View Slide

3. @marktimemedia
   KNOW YOUR
   AUDIENCE
   

   View Slide

4. @marktimemedia
   WHY ARE THEY
   VISITING YOUR
   WEBSITE?
   

   View Slide

5. @marktimemedia
   KNOW
   YOURSELF
   

   View Slide

6. @marktimemedia
   WHAT IS YOUR
   PRIMARY WIN?
   

   View Slide

7. @marktimemedia
   THE PROBLEM:
   FRICTION
   

   View Slide

8. @marktimemedia
   LOSE
   CONVERSIONS
   

   View Slide

9. @marktimemedia
   8 SECOND
   RULE
   

   View Slide

10. @marktimemedia
    THE $300 MILLION
    BUTTON
    “SIGN UP”
    

    View Slide

11. @marktimemedia
    THE
    SOLUTION:
    REMOVE
    FRICTION
    

    View Slide

12. @marktimemedia
    THE ZERO
    INTERFACE
    

    View Slide

13. @marktimemedia
    SIMPLIFY & FOCUS
    CONTENT
    

    View Slide

14. @marktimemedia
    REMOVE VISUAL CLUTTER
    Fewer elements with more breathing room
    VS
    

    View Slide

15. @marktimemedia
    DECISIONS,
    NOT OPTIONS
    

    View Slide

16. @marktimemedia
    GOOD DESIGN
    PRINCIPLES
    

    View Slide

17. @marktimemedia
    RULE OF THIRDS
    

    View Slide

18. @marktimemedia
    COLOR
    Pick 2-3 Colors plus neutrals
    

    View Slide

19. @marktimemedia
    CONTRAST
    Make sure it’s legible
    Lorem ipsum
    dolor sit amet
    consectetur
    Lorem ipsum
    dolor sit amet
    consectetur
    Lorem ipsum
    dolor sit amet
    consectetur
    Lorem ipsum
    dolor sit amet
    consectetur
    

    View Slide

20. @marktimemedia
    TYPOGRAPHY
    Pick fonts that are not too similar
    This is My Heading Font
    This is my body font, which needs to work well in paragraphs at smaller sizes. Remember to
    evaluate this for legibility when used within larger blocks of text.
    This is My Heading Font
    This is my body font, for use in normal paragraphs at smaller sizes. Body fonts are generally set at
    16px with 1.6 line-height to be readable on a large variety of devices.
    

    View Slide

21. @marktimemedia
    READABILITY
    VS
    Easily Scannable, Directed, & Precise
    

    View Slide

22. @marktimemedia
    VISUAL HIERARCHY
    VS
    Which Element is Most Important?
    

    View Slide

23. @marktimemedia
    VISUAL HIERARCHY
    VS
    Which Element is Most Important?
    

    View Slide

24. @marktimemedia
    F-SHAPE MOVEMENTS
    

    View Slide

25. @marktimemedia
    MENTAL MODELS
    

    View Slide

26. @marktimemedia
    MENTAL MODELS
    Header: navigation, logo
    Footer: extra navigation, contact info, terms/conditions
    Contact Us: page/form easily accessible
    Search: let people find things their way
    Scrolling, Swiping: behave normally, don’t hijack
    Clicking: affordance, knowing something is “clickable"
    Icons & Metaphors: map pin, social icons, mail icon, etc
    

    View Slide

27. @marktimemedia
    CLEAR CALLS TO
    ACTION
    

    View Slide

28. @marktimemedia
    ENCAPSULATION
    

    View Slide

29. @marktimemedia
    DIRECTIONAL CUES
    

    View Slide

30. @marktimemedia
    AFFORDANCE &
    CLICKABILITY
    

    View Slide

31. @marktimemedia
    CONVERT FROM
    ANYWHERE
    

    View Slide

32. @marktimemedia
    PROVIDE
    CONTEXT
    

    View Slide

33. @marktimemedia
    EXPLORATION
    & ORGANIC
    DISCOVERY
    

    View Slide

34. @marktimemedia
    BREADCRUMBS
    

    View Slide

35. @marktimemedia
    TAXONOMIES
    

    View Slide

36. @marktimemedia
    FILTERING
    

    View Slide

37. @marktimemedia
    DEFINITIVE
    

    View Slide

38. @marktimemedia
    SEARCH (+AUTOCOMPLETE)
    

    View Slide

39. @marktimemedia
    FORM
    DESIGN
    

    View Slide

40. @marktimemedia
    COST/BENEFIT
    ANALYSIS
    

    View Slide

41. @marktimemedia
    MINIMAL FIELDS
    VS
    Easy To Use & Not Asking Too Much
    

    View Slide

42. @marktimemedia
    CONTEXTUAL ERRORS
    

    View Slide

43. @marktimemedia
    AVOID BAD PATTERNS
    

    View Slide

44. @marktimemedia
    MULTIPLE CALLS
    TO ACTION
    

    View Slide

45. @marktimemedia
    UNCERTAINTY
    

    View Slide

46. @marktimemedia
    OVERZEALOUS
    FORMS
    

    View Slide

47. @marktimemedia
    ANTIPATTERNS
    

    View Slide

48. @marktimemedia
    ADDITIONAL RESOURCES
    • https://onextrapixel.com/10-peculiarities-of-
    successful-internet-retail-website-designs/
    • https://vwo.com/blog/design-principles-
    increase-conversions/
    • https://optinmonster.com/11-web-design-
    principles-that-will-boost-your-conversion-
    rate/
    • https://blog.kissmetrics.com/psychological-
    principles-converting-website/
    • https://blog.kissmetrics.com/what-converting-
    websites-do/
    • https://www.invisionapp.com/blog/high-
    converting-landing-pages/
    • https://www.sitepoint.com/forget-ux-focus-
    conversion-centered-design/
    • https://hbr.org/2006/06/more-isnt-always-
    better
    • https://www.smashingmagazine.com/2012/02/
    redefining-hicks-law/
    • http://3.7designs.co/blog/2010/07/ten-laws-
    to-design-by/
    • http://3.7designs.co/blog/2012/08/10-
    psychological-principles-to-design-with/
    • https://unbounce.com/conversion-rate-
    optimization/design-principles-increase-
    conversions/
    

    View Slide

49. @marktimemedia
    QUESTIONS?
    Michelle Schulp
    michelle@marktimemedia.com
    @marktimemedia
    

    View Slide