User Console Login Page

Rather than using the default User Portal login page verbiage, I recommend customizing the page to share useful information with your end-users.

Examples of useful customizations:

  • Corporate video announcements
  • Flash demo for new products
  • Solutions to common problems
  • Service level agreements (help desk tickets, printer outages, etc.),
  • Company news
  • Known IT issues (Exchange Server down)
  • News aggregator
  • Patching and reboot schedules
  • Any system maintenance or downtime anticipated
  • HTML Calendar such as Google Calendar
  • Polls  (http://polldaddy.com/signup-free/)
  • Twitter Feeds (https://twitter.com/settings/widgets/new/user)
Basically, anything you can write in HTML and Markdown language can be posted on the User Console landing page.

Default Login Page


As you can see, the default "code" is very basic:
Welcome to the User Console. The "Downloads" tab contains software available for you to download and install. You can search on software by title, vendor, or label. Please only download and install software that you require.<br/><br/>You must login in to the User Console to browse software. Please enter your organization's common user name and password below to login. If you have problems logging into the site, or cannot find software that you require please contact the IT Staff.

Screenshot of the default verbiage:



Customizing the Login Page

By "dressing up" the Login page, you can make the site more usable, useful, and even impactful.  Another benefit is the ability to make the page look more like other websites your end-users are comfortable with - to make user-facing sites more consistent.  Of course, once a user logs in, the clarity design will take over.  But at least while their end-user is on the login page, the experience can be consistent with whatever other sites the customer might have.

Below, I've included several examples of page customization code (and screenshots of the associated look-and-feel), as well as a description of how that particular snippet is useful.

Basic Improvement - Examples

<html>
<body>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#006600;">All IT systems should be <em><strong>operating normally.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



And this:

<html>
	<body>
		<p>
		<hr />
		
			<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#ff0000;">The Exchange Email Server is <em><strong>Down for Maintenance.</em></strong></b></span></p></h>
		</p>
		<h5>
		<hr>
			The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
		<p>
			 </p>
			The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
		<p>
			 </p>
			The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
		<p>
		</h>
		<br>
			You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
		<hr />
		
			<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
		<hr />
</body>
</html>



While these kinds of edits are useful, the attention you could draw to the urgent notice at the top might not have been quite as attention-grabbing as you might like.  There are certainly additional steps you could take, like embedded videos or widgets, larger fonts, Javascript pop-ups, and so on.  But even these, in many cases, left something to be desired.  Quite often KACE customers would request the ability to change the background color of the entire page - a change that has always required the purchase of Remote Professional Services (RPS) to accomplish.  But, now you have the ability to make this change yourselves.  So, with that in mind, I've shown some examples with different background colors, below.

Customizing the Login Page - New Techniques

Here, I've included some examples of page customization code (and screenshots of the associated look-and-feel), as well as a description of how that particular snippet is useful:

<html>
<body style="color: black; background-color: rgb(0, 102, 0);"
 alink="#000099" link="#b20838" vlink="#990099">
<p>
<!-- start weather widget code -->
<A ID="top"> </a>
<h2 align="center">
<!--Weather for McAlester-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=74501&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KNUQ&ForcedCity=McAlester&ForcedState=OK" alt="Click for McAlester, Oklahoma Forecast" height="90" width="160" /></a> 
<!--Weather for Round Rock-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:78664.1.99999&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KEDC&ForcedCity=Round Rock&ForcedState=TX" alt="Click for Round Rock, Texas Forecast" height="90" width="160" /></a> 
</h>
</p>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#006600;">All IT systems should be <em><strong>operating normally.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



And this:

<html>
<body style="color: black; background-color: rgb(255, 0, 0);"
 alink="#000099" link="#b20838" vlink="#990099">
<p>
<!-- start weather widget code -->
<A ID="top"> </a>
<h2 align="center">
<!--Weather for McAlester-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=74501&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KNUQ&ForcedCity=McAlester&ForcedState=OK" alt="Click for McAlester, Oklahoma Forecast" height="90" width="160" /></a> 
<!--Weather for Round Rock-->
<a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:78664.1.99999&bannertypeclick=wu_blueglass" target="_blank"><img src="http://weathersticker.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KEDC&ForcedCity=Round Rock&ForcedState=TX" alt="Click for Round Rock, Texas Forecast" height="90" width="160" /></a> 
</h>
</p>
<p>
<hr />

<h2 align="center"style= "background-color: #F5F5F5  ;color: #0085C3  ;"> <b><span style="color:#ff0000;">The Exchange Email Server is <em><strong>Down for Maintenance.</em></strong></b></span></p></h>
</p>
<h5>
<hr>
The "<strong><span style="color:#000000;">Downloads</strong></span>" tab contains files, apps, and scripts that are available for you to download and install.  You can search for software by title, vendor, or label.  Please only download and install software that you require.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Knowledge Base</strong></span>" tab hosts articles on interesting topics, typical end-user issues, and other company information.  Please check the Knowledge Base for a relevant article <em><strong>before </strong></em>submitting a ticket.</p>
<p>
</p>
The "<strong><span style="color:#000000;">Helpdesk</strong></span>" tab is where you can submit tickets, or requests, as well as update previously-created tickets.</p>
<p>
</h>
<br>
You must login in to the Portal to access these features, using the same credentials that you use to login to your PC.  If you have problems logging into the site, or can't find software that you require please contact the <a href="mailto:ron_colson@dell.com?subject=User%20Portal%20Issue"><u><strong><span style="color:#000000;">IT Staff.</u></a></strong></span></p>
<hr />

<h3 align="center"style= ;"> <b><span style="color:#F5F5F5;">If you are experiencing an IT-related issue, please <a href="http://k1000.tallymac.local/userui/ticket_list.php?__SPRESTORE"><u></b><span style="color:#000000;">submit a ticket.</u></a></span></p>
<hr />
</body>
</html>



As you can see, the color change is much more of an attention-grabber.  So, not only could you change the regular background color to something more like your other user-facing websites, but you could use the color changing in this sort of way instead:  green is good, red means something is wrong, etc.  You should also notice the live weather widgets I added and customized to whichever locations I wanted them to display weather information for.

Much more can be done with this page:  embedded videos, twitter feeds, etc.  The list is endless.  One of my favorite examples to suggest is that you create a video teaching your users how to login and use the User Console - searching for KB Articles, installing Downloads, creating Tickets, and so on - and post it to the login page!

Here's an example with weather widgets, twitter feed, and an angry bear that scrolls across the page from side-to-side!  The background color is taupe, in case you were wondering.



There's even a pop-up message to really grab their attention:



p.s.  You don't need to be a web wizard to do any of this.  I actually know very little HTML code.