This page is a work in progress...
There seems to be a standard pattern for SaaS product marketing sites.
I've gone through a collection marketing sites for SaaS apps that were recommended for their UI/UIX goodness and tried to reverse-engineer the common structural qualities. What I've found is a structural pattern (or design pattern, if you will) that represents what I think must be the current best practices for marketing product-type web services.
Fundamental structure of a SaaS product marketing site
Header
- logo
- primary navigation menu
- search bar
- login area
- top third to half of the page
- A clear and easily understood statement of what the product is -
- freeagentcentral.com - 'Accounting software, simplified.'
- campaignmonitor.com - 'Email marketing software for designers and their clients'
- zferral.com - 'Easily create, track and manage custom referral programs (with zferral.com)'
- A place for a picture of the product (or video, or slideshow)
- A clearly dominant 'signup' or 'plans & pricing' button (this is usually green)
- second third or bottom half of page, but allowing some of next section to be visible
- A set of secondary value proposition statements / explanatory paragraphs.
- getharvest.com - 'The best in time tracking and online invoicing', 'nothing to install or worry about', 'who uses harvest'
- campaignmonitor.com - 'create and send beautiful emails', 'manage lists and subscribers', 'powerful analytics'
- etc
- teaser visible but requires scroll to view entirely
- logos of other brands people know and trust - social proof
- who uses
- partners
- integrations
- media mentions
- testimonials
- Sitemap links - e.g. links to anything not in top nav
- facebook, twitter, etc
- etc.
- copyright line
Common Content
Content-wise theres some variety in what different sites sort into the secondary and tertiary sections (and footer), and where they sort them, but you almost always see:
Content-wise theres some variety in what different sites sort into the secondary and tertiary sections (and footer), and where they sort them, but you almost always see:
- value proposition statements
- ease of use statements
- 'actual' customer testimonials
- implied endorsement via logos of much larger companies (e.g. customers, partners, integrations, etc)
- additional, secondary call to action buttons
- impressive press mentions.
Miscellaneous
- The thing you want the visitor to do next is always the green button
- If you have to scroll to see the entire page, there's another green button at the bottom somewhere
Site List
As a resource, here's a list of sites I referred to during my 'research'. As I find more examples, I may update this list:
As a resource, here's a list of sites I referred to during my 'research'. As I find more examples, I may update this list:
- basecamphq.com
- http://www.getballpark.com/
- http://www.campaignmonitor.
com/ - http://www.getharvest.com/
- http://www.freeagentcentral.
com/ - http://zferral.com/
- http://www.staction.com/
- http://www.wufoo.com/
- http://pluggio.com/
- http://chext.net/
- http://mixpanel.com/
And yet more food for the mill - some of these bend the rules in cool ways (rightsignature) -
- rightsignature.com
- pulseapp.com
- http://www.crazyegg.com
- http://www.xero.com/
- http://urbanairship.com/
- http://www.getcashboard.com/
- invoicemachine.com (but I like the app)
- survs.com
The exceptions:
- flowtown.com
