Slide 1
Slide 1 text
DESIGNED TO SELL
The Huge Impact of
Small Decisions
Slide 2
Slide 2 text
@marktimemedia
I
Design
& BUILD
HI, I’M
MICHELLE.
WEBSITES
Slide 3
Slide 3 text
@marktimemedia
KNOW YOUR
AUDIENCE
Slide 4
Slide 4 text
@marktimemedia
WHY ARE THEY
VISITING YOUR
WEBSITE?
Slide 5
Slide 5 text
@marktimemedia
KNOW
YOURSELF
Slide 6
Slide 6 text
@marktimemedia
WHAT IS YOUR
PRIMARY WIN?
Slide 7
Slide 7 text
@marktimemedia
THE PROBLEM:
FRICTION
Slide 8
Slide 8 text
@marktimemedia
LOSE
CONVERSIONS
Slide 9
Slide 9 text
@marktimemedia
8 SECOND
RULE
Slide 10
Slide 10 text
@marktimemedia
THE $300 MILLION
BUTTON
“SIGN UP”
Slide 11
Slide 11 text
@marktimemedia
THE
SOLUTION:
REMOVE
FRICTION
Slide 12
Slide 12 text
@marktimemedia
THE ZERO
INTERFACE
Slide 13
Slide 13 text
@marktimemedia
SIMPLIFY & FOCUS
CONTENT
Slide 14
Slide 14 text
@marktimemedia
REMOVE VISUAL CLUTTER
Fewer elements with more breathing room
VS
Slide 15
Slide 15 text
@marktimemedia
DECISIONS,
NOT OPTIONS
Slide 16
Slide 16 text
@marktimemedia
GOOD DESIGN
PRINCIPLES
Slide 17
Slide 17 text
@marktimemedia
RULE OF THIRDS
Slide 18
Slide 18 text
@marktimemedia
COLOR
Pick 2-3 Colors plus neutrals
Slide 19
Slide 19 text
@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
Slide 20
Slide 20 text
@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.
Slide 21
Slide 21 text
@marktimemedia
READABILITY
VS
Easily Scannable, Directed, & Precise
Slide 22
Slide 22 text
@marktimemedia
VISUAL HIERARCHY
VS
Which Element is Most Important?
Slide 23
Slide 23 text
@marktimemedia
VISUAL HIERARCHY
VS
Which Element is Most Important?
Slide 24
Slide 24 text
@marktimemedia
F-SHAPE MOVEMENTS
Slide 25
Slide 25 text
@marktimemedia
MENTAL MODELS
Slide 26
Slide 26 text
@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
Slide 27
Slide 27 text
@marktimemedia
CLEAR CALLS TO
ACTION
Slide 28
Slide 28 text
@marktimemedia
ENCAPSULATION
Slide 29
Slide 29 text
@marktimemedia
DIRECTIONAL CUES
Slide 30
Slide 30 text
@marktimemedia
AFFORDANCE &
CLICKABILITY
Slide 31
Slide 31 text
@marktimemedia
CONVERT FROM
ANYWHERE
Slide 32
Slide 32 text
@marktimemedia
PROVIDE
CONTEXT
Slide 33
Slide 33 text
@marktimemedia
EXPLORATION
& ORGANIC
DISCOVERY
Slide 34
Slide 34 text
@marktimemedia
BREADCRUMBS
Slide 35
Slide 35 text
@marktimemedia
TAXONOMIES
Slide 36
Slide 36 text
@marktimemedia
FILTERING
Slide 37
Slide 37 text
@marktimemedia
DEFINITIVE
Slide 38
Slide 38 text
@marktimemedia
SEARCH (+AUTOCOMPLETE)
Slide 39
Slide 39 text
@marktimemedia
FORM
DESIGN
Slide 40
Slide 40 text
@marktimemedia
COST/BENEFIT
ANALYSIS
Slide 41
Slide 41 text
@marktimemedia
MINIMAL FIELDS
VS
Easy To Use & Not Asking Too Much
Slide 42
Slide 42 text
@marktimemedia
CONTEXTUAL ERRORS
Slide 43
Slide 43 text
@marktimemedia
AVOID BAD PATTERNS
Slide 44
Slide 44 text
@marktimemedia
MULTIPLE CALLS
TO ACTION
Slide 45
Slide 45 text
@marktimemedia
UNCERTAINTY
Slide 46
Slide 46 text
@marktimemedia
OVERZEALOUS
FORMS
Slide 47
Slide 47 text
@marktimemedia
ANTIPATTERNS
Slide 48
Slide 48 text
@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/