Discuss.IO Landing Pages

A revamp of the marketing website to promote new support and login features

First impressions are important, especially when it comes to presenting your value to a potential customer. During my internship at Discuss.io, I worked with the sales team and project manager to develop a series of landing pages:

  • Home Page
  • Unilever Landing Page (w/ SSO)
  • Healthcare Landing Page

Before and After via the Wayback Machine!

Wireframes and Segmented User Test

At first we set out to design the segmented landing page for Unilever. The goal was to introduce our product to first-time users in a single page – without the need of further navigation to understand its use. Due to time constraints, my project manager decided to re-engineer a wireframe of the intercom.io marketing website:

intercom homepage

Replacing the email collection box with a secure sign-in button functioned as a quick way to get the site up and running as quickly as possible. Given that we only had two weeks to build the landing page (as required by the client), we spent little time customizing the display. Instead, we replaced the inline screenshots with ones of our own and added relevant contact information to the bottom of the one-page site:

unilever login page

You can view the live page here: http://unilever.discuss.io

Modify Landing Page into a Front Page

After receiving feedback on the Unilever landing page, I began to work on migrating the positive functions of this one-page site into a more user-friendly front page for Discuss.IO. Our users loved the short descriptions of the various screens as well as the screenshots which followed them. Some of our clients disliked the way we displayed “The Discuss.IO Way” – inferring that our product might be attempting to cut agencies, moderators and facilities out of the market research process. In response to these comments, I set out to create an alternative presentation of value that didn’t step on the toes of any of Discuss’ verticals.

After a series of internal sketches and wireframes, I generated four slides that articulated various highlights of our service. These slide backgrounds were then replaced by stock photos and video to give life to the marketing copy:

Slider 1

Slider 2

Slider 3

Slider 4

During this iteration, I also designed and integrated a support feature grid which directs users to various support pages:

dio help block

For more information regarding my work on Discuss.IO customer support see:

Generalize Landing Page for Future Use

In the image above, you can see a new footer that is now being used across the entire Discuss.IO site. After reorganizing the content to better suit the new navigation bar, I categorized the pages and listed them in the footer. I then consolidated the website’s various .css files into two generic types: default and landingpage. These two types were then implemented into every page, depending on the content type – allowing for design consistency across the marketing front-end.

The marketing site has since changed but you view the landing page screenshot below:

Healthcare landing page

More like this