ServiceNow Service Portal Mastery: From Zero to Hero in Designing a User-Friendly Experience

Welcome to the comprehensive guide on mastering ServiceNow Service Portal! Whether you’re a complete beginner or have dabbled in ServiceNow, this tutorial will take you from zero to hero in designing a user-friendly experience. We’ll cover the fundamentals, explore practical examples, and equip you with the knowledge to build effective and intuitive Service Portals.

What is the ServiceNow Service Portal?

The ServiceNow Service Portal is a self-service interface that allows users to access information, request services, and interact with IT and other departments within your organization. Think of it as a one-stop shop for employees to find answers, get help, and manage their tasks. It replaces the traditional ServiceNow backend UI, providing a modern, user-friendly alternative.

Why is a User-Friendly Service Portal Important?

A well-designed Service Portal drives:

• Improved User Satisfaction: Easy-to-navigate and intuitive portals lead to happier users.
• Reduced Support Costs: Self-service options empower users to resolve issues independently, decreasing reliance on the service desk.
• Increased Productivity: Quicker access to information and services allows users to focus on their core responsibilities.
• Enhanced Adoption: A user-friendly portal encourages wider adoption of ServiceNow within your organization.

Getting Started: The Basics

Before diving into design, let’s familiarize ourselves with the core components:

• Service Portal Editor: The primary tool for designing and customizing your portal. You can access it by navigating to Service Portal > Service Portal Configuration > Designer.
• Pages: The individual screens that make up your portal. Each page serves a specific purpose (e.g., homepage, catalog item page, knowledge base article).
• Widgets: Reusable components that display content and functionality on your pages. Think of them as building blocks. Examples include search bars, announcements, catalog item lists, and knowledge base article views.
• Themes: Sets of styles (colors, fonts, etc.) that define the overall look and feel of your portal.
• AngularJS: The front-end framework used for widget development. While you don’t need to be an expert, understanding the basics will be helpful for customization.
• SCSS: A CSS preprocessor for styling your portal. Allows for more organized and efficient CSS coding.

Your First Service Portal: A Step-by-Step Guide

Let’s create a simple Service Portal to understand the process.

Step 1: Creating a New Portal

1. Navigate to Service Portal > Service Portals.
2. Click “New”.
3. Give your portal a name (e.g., “Employee Self-Service”).
4. Provide an ID (e.g., employee_self_service). This is used in the URL.
5. Choose a theme (e.g., “Stock”). You can customize this later.
6. Click “Submit”.

Step 2: Accessing the Portal Designer

1. Find your newly created portal in the Service Portals list.
2. Open the record.
3. In the related links, click “Open in Designer”.

Step 3: Adding a Simple Widget

1. In the Service Portal Designer, you’ll see a blank page. This is your homepage.
2. On the left panel, under “Widgets,” search for “Search”.
3. Drag the “Typeahead Search” widget onto your page.

Step 4: Customizing the Widget (Optional)

1. Hover over the widget you just added and click the pencil icon (Edit).
2. This will open the widget editor. Here, you can modify the widget’s options, server script, client script, and CSS.
3. For example, you might change the placeholder text in the search bar.

Step 5: Viewing Your Portal

1. In the Service Portal Designer, click the “Preview” button.
2. This will open your portal in a new tab, allowing you to see the changes you’ve made.

Building a User-Friendly Interface: Best Practices

Now that you understand the basics, let’s delve into designing a user-friendly experience.

• Keep it Simple: Avoid clutter and unnecessary information. Focus on presenting only what users need.
• Intuitive Navigation: Use clear and concise labels, and ensure users can easily find what they’re looking for. Consider using a mega menu for complex portals.
• Responsive Design: Ensure your portal looks and functions well on all devices (desktops, tablets, and smartphones). ServiceNow uses Bootstrap, which facilitates responsive design.
• Consistent Branding: Use your organization’s colors, fonts, and logos to maintain a consistent brand experience.
• Effective Search: Implement a powerful search functionality to allow users to quickly find relevant information.
• Prominent Call to Actions: Guide users to the most important tasks by using clear and visible call-to-action buttons.
• Accessibility: Design your portal to be accessible to users with disabilities. Follow accessibility guidelines (WCAG) when developing your portal.
• User Feedback: Gather feedback from users to identify areas for improvement. Use surveys, feedback forms, or usability testing to collect valuable insights.

Practical Examples: Enhancing Your Service Portal

Let’s look at some common Service Portal enhancements:

• Custom Homepage:

  • Announcements: Display important announcements using the “Announcements” widget or create a custom widget for more control. You can filter announcements based on user roles or groups.
  • Quick Links: Provide quick access to frequently used services or knowledge base articles using a custom “Quick Links” widget.
  • Personalized Content: Show personalized information, such as open requests or tasks assigned to the user, using data from the ServiceNow database.

• Improved Catalog Item Presentation:

  • Categories and Subcategories: Organize catalog items into logical categories and subcategories for easy browsing.
  • Catalog Item Search: Allow users to search for specific catalog items using keywords.
  • Clear Descriptions and Images: Provide clear and concise descriptions of each catalog item, and use images to visually represent the service.

• Enhanced Knowledge Base:

  • Categorized Articles: Organize knowledge base articles into categories for easy navigation.
  • Search Functionality: Implement a robust search functionality to allow users to find relevant articles quickly.
  • Article Feedback: Allow users to provide feedback on knowledge base articles to improve their quality.

Code Examples (Illustrative)

While a complete code walkthrough is beyond the scope of this guide, here are some snippets to illustrate customization.

Custom Widget: Displaying User’s Open Incidents

Server Script (Angular Provider):

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
  data.incidents = [];
  var gr = new GlideRecord('incident');
  gr.addQuery('caller_id', gs.getUserID());
  gr.addQuery('active', true);
  gr.orderByDesc('sys_created_on');
  gr.setLimit(5); // Limit to 5 incidents
  gr.query();
  while (gr.next()) {
    data.incidents.push({
      number: gr.getValue('number'),
      short_description: gr.getValue('short_description'),
      sys_id: gr.getValue('sys_id')
    });
  }
})();

Client Script (Angular Controller):

function($scope) {
  /* widget controller */
  var c = this;
}

HTML Template:

<div>
  <h4>My Open Incidents</h4>
  <ul ng-if="data.incidents.length > 0">
    <li ng-repeat="incident in data.incidents">
      <a href="?id=ticket&table=incident&sys_id={{incident.sys_id}}">{{incident.number}} - {{incident.short_description}}</a>
    </li>
  </ul>
  <p ng-if="data.incidents.length == 0">No open incidents found.</p>
</div>

This code snippet retrieves the logged-in user’s open incidents and displays them in a list. You can customize the query and display based on your requirements.

Styling with SCSS:

.my-widget {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
 
  h4 {
    font-size: 16px;
    margin-bottom: 5px;
  }
 
  ul {
    list-style: none;
    padding: 0;
 
    li {
      margin-bottom: 5px;
    }
  }
}

This SCSS code styles the custom widget with a grey background, padding, and a border.

Conclusion

Building a user-friendly ServiceNow Service Portal is crucial for improving user satisfaction, reducing support costs, and increasing productivity. By understanding the core components, following best practices, and leveraging practical examples, you can transform your portal into a valuable self-service resource for your organization. Remember to focus on simplicity, intuitive navigation, and consistent branding to create a seamless user experience. Continue to gather user feedback and iterate on your designs to ensure your portal meets the evolving needs of your users.