10

Best practices on SaaS signup pages: Examples from 50 top companies

 2 years ago
source link: https://www.arengu.com/blog/best-practices-on-saas-signup-pages-examples-from-50-leading-companies
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

According to a study conducted by Arengu,90% of SaaS place their signup form on a separate page, accessed from different CTAs on the web, and specifically designed for it.

These signup landing pages have different structures and designs, but we have found some patterns in their use. These are our insights after analyzing 50 top-tier companies.

Types of signup landing pages

From the simplest to the most elaborate, we review the different types of signup pages that we have found, hoping that they will serve as inspiration for your own ones.

1. Simple signup pages

The simplest option in terms of signup pages. The main content is the form itself, which is usually displayed in the center on a white or light colored background.

62d916736258b183e124588b_SuIvlCaVtkT02TmGeCSLMwhHQeeM-TZKgLumaaH7FktpJhhgLkPn5K58nQHBlXVkOG6tRDzjFCpdF73khHE-sEDvguZkVgqBO973yC9sLMrSXYb_tP_bCoDkaHLa5KJEsvknTH70GMCgdojlB5w_Og.png

They include a title, a tagline, and a logo that sends the user back to the homepage. Basecamp, Segment, Workplace, and Bitly are good examples of this type of signup page.

62d91673111a69702d950b3c_sWgkepOZcbf-CRlkb6qtIb2EaJ2ITSiU6hX5ae0OCaQXEo-z2KuSDULE2frhMgHcgsR_Gk73M2E4UUFZ1BKL5eOrUGo7O3-xK0E9pxxPFSDN7BOeWj91-ssciUm7OeleJQpGTZWdyBC5KB9oibZDeQ.png

There are also a few examples that seek the contrast of the background with the form by using dark colors, like Intuit. But responsiveness is always the key factor to design them.

2. Signup pages with dynamic backgrounds

In terms of content and form display, this group of signup pages is similar to the previous ones, although they give greater relevance to the background of the page.

62d916732e192a8039a253dd_4NQMwUKQNA21aJNJyRd9C1W-I_IWY4foHWT-4Crg2mMCFkablptinKVWnr1CukSfouW62KLacQrwxrbqajjUfP2UmKwovc4Ed3e_YJrhspNmsVnp6vtBITBG3W1sfZPCGb2TnCgmnwFeINK_T2LgkQ.png

These pages use illustrations as background for larger screen sizes. These illustrations tend to disappear on smaller screens, prioritizing that the form occupies the entire width.

62d91673c0f5fd5ec5c4caeb__k582llvB5doKWKox9Zw8RbuwxRJn-UHpf4Hmwl6fe1yevuFPmG9oJUdHqkLh_24Nd9I9YB9iNWNCDkkj9eC3ol8NT36EY-U0OYG95nbKu-CoC5NunVCrUxsa2xS6Hg06k3eVFzEGwg1ByRR3hjNxw.png

These backgrounds can be static pictures — as in Campaign Monitor’s signup page — or dynamic illustrations, as in the case of Drift, showing greetings in different languages.

3. Signup pages with side bars

Another common resource in signup pages is to divide the page into three parts, using two of them for the form and the third for other types of content.

62d91673639eae07d60190c2_U-AHgVdR-7hrDXXi_60YroQHmpYabb1Df77UtrBj9hWJrfijhYO3HS7elG1kEMFjFW3lC6zuk3C0DvqITqikObDO33Ttfb6SuRbj366rM4D2A74jb7iUzD0ez2o0r4qyMLQk2hAMRUA0hTKXIePJcQ.png

This content can be illustrative, as in the case of Typeform, or used to show more info about the benefits of the product or pricing you are contracting, as Adobe does.

62d91674021f6d6ddd05c92d_N4itCmH0bldNoN8EhIdC28Vreikj3bijydosDy-Y5O3HyW9ORNrXpMWKlLrT5gkRdHDEcPKl66JPWSHgh5-lljQFHm0VE_Arncx58T2EOlgCVxDNqllbNV6GvRrat4djQ6h0qfS-ppEDZF-RU0NNNA.png

When displayed on small screens, the column with illustrative content disappears, while the one with informational content is placed vertically, after the form.

4. Split screen signup pages

These landing pages are vertically divided in two sections. They usually bundle the form and the value proposition in a central block that is displayed in the center of the page. This is the case with companies like AWS and Twilio.

62d91673639eae3f4f0190f3_kAP62rjL_UNrQP_wYXGmCfL6GpODL1BGkwvWA-Pl0EeeJL-XHF8DU3K8ofk5IDEWSHNldHzdnPcSa0fBIdLicLR6OHWUH8XUWlhOlYdPMUvTBTjgCt-hzD-_9P_MzzMyjVGZR-V7f81CU5dV75NZGA.png

As in the previous case, the text block disappears on small screens, allowing the form to occupy all the available space.

62d916732346d66404e11160_6sxSjpSi_CqiUIItaurfzBGbKG5xLX0solY9tTvovBJZdWkxKYWlIj6iw8vmsX_EffJMPk8tOVUxyms0vLXvH-GXCX9iYRyLyQ4u6MwXooJ1KMnwqXZl39wLhrS7g2Pto7sVn7ZpOX6QRshSWedArA.png

They also usually place an illustrated background aligned with the brand's guidelines which, in some cases, disappears on smaller screens.

5. Signup pages with dynamic content

In addition to the previous cases, we have found some pages whose informative content varies depending on the step of the form in which we are.

62d916742e192af7f9a254ee_PBPzvt9pHD-_lh_UMdwxjkiEE9FLE67FtqzaxD361iVZGfWEYWKSKCBZ31mzFp_eTw_j86x9d2pPdcoNpEnvMV9eUWzlPx0s_-lkCBfCXRWyOqSXPgIjR3GmobOanP5FF8K48gv01mxqizKyT-YCJw.png

HubSpot uses this technique to display different content blocks related to their value proposition on each form step: informative texts, quotes, illustrations and graphics, etc.

62d9167422e086d7584e54ac_4Mfi_AU2-nESIOBP6Lx47A9Hfg5ajjpP-pefj3smccOJZqrlR4-meeoKOziIAGPNBls_mVXaWzPx8z_YxEm7HYprHXV4UnITSNy4t8_cRkx_p2XuoRwrdcIM3i8ngN29D9XcHt8s-NJNLrX5T4hv2g.png

This way, they manage to progressively display a lot of different content, trying not to overwhelm the user on the signup page.

62d91674eed11b7bb194d66b_x-hAA__y56PwKGjVgFIb6XoPZ6JfgxG3OrwwGpV-NNHnwsk3laKIgwSIoUVZw7Ycn3SIZQfZr_FpG5rDTZUf7AChF_a6AG6_pMThEe3exO2NU4wOFS-5r9toSQc-uhk1QGkWJ7tdRsRPHSLuTO4ugA.png

Top 5 content on signup pages

Apart from the form, the content with the most presence in SaaS signup pages is:

1. Images and illustrations

This type of content is used on 63% of signup pages as background or on a side to illustrate the value proposition of the service. In some cases, such as Workplace, the illustration is dynamic and varies based on the data entered in the form.

62d91674639eae408f0190f6_3DZhvAJw6H106k4_QMgRC3cQkrSM0smZ-8k54CbmPTficO0O1UnupYyoxSh1fklyG0WjSUANvdPn8p2RNcJkxX08m-opaQDELEP4HcIqWhJy1Kktcu0WbtJJvWnS6kyhZ2g0Ai5ZrCiu4hT5k_lw8w.png

2. Texts and value propositions

Informative texts about the SaaS value proposition appear on 51% of signup pages, such as SendGrid, Asana and Salesforce.

62d91674183973cb08ae17fc_uYRcrX9n9IRhHwtlhWYRIYaZowmVQ4XB494QwCowsbPACqTJA7uyfrNIq0sV4dCzQGhABpCZ5xrE8-QojYLmPdbqfD29bF6GhnbIshb3hn9PtNOFOfDStMi66c_Y6VkdUqE5-ECXrhiy5NSwcRdBvQ.png

3. Customer logos

Surprisingly, only 14% of signup pages show logos of companies that already use their service. Among these cases are the signup pages of Maze, Amplitude or Attlassian.

62d9167430c0ffc94602ce69_RI__vZaKZnnzOkPJGesYoacC16P7Nnn4n_yLKgYL54P6GfuKFmoCrKlxmc897SfxflON5r_hJUWFoE4Ok1_UkGn3ADPX1WKzR_P5Qu4hI42m5KLBeolY2tcmnO0pjQPfqR5G0NZTmzvP7NLou88iEA.png

4. Quotes and testimonials

Closely linked to the presence of logos, customer testimonials are used in 12% of signup pages, like Instapage, Buffer and Hootsuite.

62d91675639eae35b0019128_to84qyYgzuPd4Huk0xxJVwE7aE9DNvbmhsQii1cH_vAIgqAEV7U5NnXeRliYknCS_qI3RZQIYBgPinDEgtXefVq27n4S8dMaJO4ZnsUFp12spCmaechs6-YfKU4lqOUjB1S-FwXeT_PWTva8qrbM4g.png

5. Video content

Video is the least used content on landing pages, appearing on only 2% of them and, for example, at Cisco. Possibly because it requires the user to spend more time on the page, affecting the conversion rate if it is not really engaging.

62d9167590d775a4b0a74e55_Dldf41KadD6xs3vxhEQKGZz7ADq-t-xkuIGVASKo_hBZlpo2XJmC1WL9GUYJd505p3kkDOy6F9IHcNqtXyqoV1UQO0AIy9Uib6qR9dy6O5qa2eyxBdJ9ds0Vrak4zscEDiemI9yg4m7tt87F34QLDg.png

Conclusions, tips and insights

As we have seen, there is no single proposal for SaaS signup pages. In fact, companies often try different options until they manage to achieve a good conversion rate. However, there are some factors common to all or the vast majority of them:

  • Responsive first. The signup pages are created and designed to adapt to all screen sizes, making the registration form full width on smaller ones, reordering and even making other elements disappear to give it maximum prominence.
  • Contrast. Most forms are placed on a white or light-colored background seeking as much contrast as possible to improve readability. The other contents are organized in a way that they never interfere with the visibility of the form.
  • Decoration and illustrations. The use of images as the background of the form and as an illustration of the value proposition is common. However, they are considered secondary content that even disappears at smaller screen sizes.
  • Minimalism. Although there are exceptions, most SaaS opt for clean and simple proposals, without overloading the page too much with content. Background images are often faded if they take up the entire screen or are reduced to a portion of it.
  • Clear messages. The texts are short, clear and concise, trying to convey the SaaS value proposition in as few words as possible. Titles, taglines, bullets and checklists are common as a lighter alternative to text paragraphs.
  • Testing. A/B testing is a common practice to measure the impact of possible changes in the form. In fact, during the writing of this article, we witnessed the changes that some of these SaaS have been making to their signup pages.

Have you tried any of them? Let us know! 

At Arengu, we are specialists in improving the conversion of signup and demo request forms. If you want to discover we can help your SaaS, signup free or book a demo to analyze your forms and discuss possible improvements with you.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK