4 Steps to Planning a Great Portal Design

Every great portal begins with a well thought through plan. The planning stage is critical to gaining alignment on key functionality as well as gathering insight into what actual users are looking for. Here are a few tips we use to get started the right way. “By failing to prepare, you are preparing to fail.” -Benjamin Franklin Step 1 - Clarify your requirements early on Why? Because changes on paper are the easiest to make. Benefits of requirements gathering: Gets your whole team involved from the beginning Documents the scale of the project Easier to tackle potential roadblocks early in the project Things to consider while gathering requirements: How will you gather insights from actual users to help define your goals? Will you need to upgrade your instance to the latest version of ServiceNow? Will you add other departments to your portal? Do you have the infrastructure in place to handle enhancements? (Ex: live chat) How many people will access the portal on tablets and mobile devices? Step 2 - Make your goals about fulfilling needs Why? Because good goals inspire change. Benefits of setting goals: Shifts focus from problems to needs Motivates the whole team to work towards the same results Aligns stakeholders and reduces the amount of subjective feedback later in the project Bad Goal Example Good Goal Example “Our IT department is overwhelmed with calls so we need to get higher adoption of the portal.” “Most of our users cannot work without the items they have requested. Instead of users calling the IT help desk for the status of their request, we need to speed up the process by making it easy to check statuses on the homepage of the portal” “The computers are hard to find on the portal. Make it easier to find computers” “Users are having a hard time understanding how to order a computer so we need to create a step-by-step flow from the homepage that makes it very clear where to begin and how many steps there are to complete an order.” Step 3 - Build empathy with your users through research Why? Because otherwise you are just guessing. Benefits of user research: Reveals patterns and unknown insights Defines objectives and tests hypotheses Exposes alternatives and informs conclusions Research Type Description User Interviews Produces qualitative data Gets into the minds of actual users to understand what drives their specific actions Can take place remotely via phone or web-based video, or in person Focus Groups Allows for multiple perspectives to be heard regarding the same topics Can take place remotely via phone or web-based video, or in person Surveys Inexpensive method you can use to gain insight quickly Can be sent to a large pool of users to gain quantitative information Caution: Don’t ask the wrong questions. When doing research, be careful of asking the wrong questions. People don’t always know what they want if it doesn’t exist yet. If all of your user questions require someone to imagine what could make the experience better, they typically will not know how to respond. Step 4 - Make it visual, but keep it simple Why? Blockframes and wireframes make design changes more efficient Benefits of Blockframes and Wireframes: Lowers the bar of design so everyone can participate Removes subjectivity so you can focus on the flow and hierarchy Encourages collaboration and easy iteration Blockframe A blockframe is a simplified representation of a portal that consists of large colored blocks that represent content areas. Quick and easy way to flesh out your vision without getting caught up in the details Can serve as an extension of your requirements gathering phase as a visual checklist Wireframe A wireframe is a low-fidelity visual representation (typically done in grayscale ) of a portal’s layout, sometimes referred to as a skeleton, or a blueprint. Represents the basic page layout and navigational scheme Shows more detail than a blockframe Can also be easily modified and changed

SpaceRocket 404 Page for Service Portal

I'm always been a fan of creative 404 pages, especially when they include something interactive, like a game (hence the reason I developed the OOB breakout game). So when I saw ServiceNow post a 404 Page challenge, I thought this was the perfect opportunity to create a space/rocket themed 404 game. Given that I don't have a lot of free time, I pulled some of the game logic from a Github tutorial, and then spent the rest of the day integrating it into a Service Portal widget, and adding new functionality such as High Score tracking, and presenting it with some cool graphics. I think it turned out pretty cool for a quick weekend project. The game is live on our demo instance if you want to check it out:$ It's only been tested on Chrome, Safari, and iOS Safari... so if you find any bugs let me know. To submit your own 404 Page, or see some of the other submissions, head on over to the community: Screenshots:

Featured Portal – University of Cincinnati

The team at NewRocket recently collaborated with the University of Cincinnati, Lindner College of Business on their service portal. The portal features a rich, engaging design along with some unique customizations. The portal targets students, faculty and staff each with their own specific requirements. The use of simple icons and department based filtering creates an easy to use system for ordering and reading articles. The portal has been well received by both the students and administrators.   Check out this video created by the University of Cincinnati, Lindner College of Business IT Team   Custom Icons     Featured Widgets     Responsive Layout     Branded Login Screen  

New Service Portal Documentation Page

Great news! We just added a new Service Portal documentation section. This material was originally created by the Service Portal development team. However, the original documentation on GitHub has since been removed, so we have decided to pick up where they left off. Our goal is that the maintenance of this documentation will become a community effort. Check it out here:

Free Widgets for Service Portal

We are excited to announce the launch of the free widget download page on Since day 1, has existed to be a resources and source of inspiration for the ServiceNow Community. With the launch of the new widgets page, we can now share some of the most frequently requested widgets with all of our followers. Not all of them will be complex, many of the most frequently used widgets are pretty simple. Our goal is to develop and give away at least one new widget per month. We believe that collaboration is key to success for all of us in the ServiceNow Community. If you have any suggestions or comments about our widgets, please let us know. View Free Widgets Page

Changes to Service Portal in Jakarta

The latest iteration of ServiceNow - Jakarta - has arrived. With this new release, comes new enhancements, additions, and other improvements to the Service Portal. One of the major focuses of Jakarta was improving accessibility within the portal. New Features Knowledge Base Portal A brand new portal that brings all the features of Knowledge Management V3 plugin into Service Portal. Available through plugin: Knowledge Management - Service Portal plugin (com.snc.knowledge_serviceportal). User Criteria You now have more control over who can see pages, widget instances, and search sources. Previously you could only use roles to control access, now you can use powerful user criteria. Condition Builder The "Data table from URL definition" widget can produce an information table very quickly and now it's even more powerful. It now allows you to graphically build the conditions for the table. Contextual Search Use instance options on a search widget to configure search sources. Contextual Search - Inline Results Not to be confused with the above feature, this new widget will render search results inside any of your record producers for incident deflection. New Portal You can now create a new portal from the Service Portal configuration page. Portal System Properties Module added for setting Service Portal system properties. Page Draft Option Restrict page access to admins only by setting a page to "draft". Enhancements Shopping cart enhancements Users have a few additional options with the shopping cart: Clear all items Add a saved bundle to an open cart, or override the existing items in the cart with the saved bundle Catalog Variables All variable types (excluding ones using Jelly) are now supported in Service Portal, although the functionality may not be identical to the platform UI. List, form, and widget improvements TinyMCE HTML editor has been updated Control the number of approvals shown through an instance option Service Catalog related items are now in their own plugin called Service Portal - Service Catalog. This plugin is activated with the Service Portal for Enterprise Management plugin. Accessibility Improvements Many improvements to accessibility were made in congruence with WCAG 2.0 A standards: Many defects fixed High contrast theme to help with those that can't see low contrast colors Define a screen reader title on any container records Server Script API: getCatalogItem() The 'getCatalogItem(String itemID)' method was changed to 'getCatalogItem(String itemID, boolean isOrdering)' Client Script API: server.update() Now sends your URL query parameters automatically to the server

Creating a sticky footer in your Service Portal

While developing web layouts, at some point you've probably run into the issue with the footer floating in the middle of the page just below the content. This can easily be fixed with a little CSS magic. Service Portal does support fixed headers and footers, but this causes the footer to stick to the browser window and overlap the content, which is not what we want. We want the footer to always be at the bottom of the page. This is called a "sticky footer".   In between Helsinki and Istanbul some major changes were to made to the outer page structure that broke some earlier solutions posted on the community. My goal is to provide a solution that would work with all versions of Service Portal and it's various supported browsers. The Solution: I've chosen to implement the sticky footer using Flexbox as this provides the most amount of flexibility. One added advantage of flexbox is that it also supports variable height footers, which many other solutions do not. Installation: Go to your portals theme record. Select a footer widget, you can use the out-of-box "Sample Footer" as a test. Make sure the "Fixed footer" checkbox is unchecked. Paste the following snippet of CSS into the "CSS variables" textarea, or alternatively you can include it in a CSS Include. [crayon-5a2e9b0ac696c623405751/] It's been tested on Helsinki, Istanbul, and Jakarta using Chrome, Safari 9+, IE10+. For additional information on flexbox, you can check out the following resources: A quick guide to flexbox by CSS-Tricks - here. Solved by Flexbox, a website dedicated to cool flexbox techniques - here. I hope you've picked up something new and useful from this article. Would love to hear your comments and questions in the comment section below.

Full Text Searches in Service Portal

In the stock Service Portal it asks the user "How can we help" and then provides the user with a big search input. This implies that the user could enter a sentence or phrase such as "reset my password" to answer the question, however this will rarely deliver the correct results. ServiceNow provides several search operators for performing full text searches with GlideRecord using ServiceNow's Zing search engine. However the stock widgets in Service Portal are hardcoded to use “123TEXTQUERY321” which works great for single word searches but not so much for searches containing multiple words or phrases. In this example, the simple addition of the word "my" prevented the user from finding the "Reset Password" item. To improve the search results, let’s take a quick look at some of the other options available. Search Operator Description IR_AND_QUERY Display results with exact matches of all terms only (Same as 123TEXTQUERY321) IR_OR_QUERY Display results with any matches of any terms. IR_AND_OR_QUERY First display results with exact matches of all terms, then display results with any matches of any terms Of the above, I recommend using IR_AND_OR_QUERY as this will return the best results across all combinations of searches. When performing a full text search, ServiceNow also adds an additional property to the GlideRecord called "ir_query_score" which contains the relevance score calculated by the system. Administrators can control the scoring for each field in a table with the ts_weight attribute. Here is a quick example of how to search the Service Catalog and return results ordered by relevancy: [crayon-5a2e9b0ac82a8164045397/] For further reading, check out: