NewRocket had the pleasure of collaborating with Scripps Networks Interactive to deliver an IT service portal to support their diverse company. Scripps Networks is a leading developer of lifestyle content for television and the Internet. The company's brands include HGTV, Food Network, Travel Channel, DIY Network, Cooking Channel and Great American Country. The previous Scripps Networks CMS-based portal did not provide the usability they were looking for nor did it align with their new branding guidelines. Improving these key areas was critical for the redesign of the portal. “NewRocket delivered on a portal that not only fit our branding guidelines but packs in functionality with a design aesthetic that is visually inviting. Our end user experience has greatly improved by making our content and catalog offerings forefront and easily searchable all in an appealing display. The team was fantastic to work with and their expertise and guidance helped make our portal successful.” - Judy March, IT Service Delivery Manager Portal Features The new portal provides users with quick access to search, the IT service catalog, frequently asked questions and news. NewRocket embraced the extensive, yet flexible branding guidelines to visually identify different sections of the portal. These visual and structural changes help users quickly understand the page contents and complete the desired task. Some other highlights include: Quick access to open requests, incidents and approvals through My Items mega menu in header Direct access to the top level service catalog categories from the home page Consistent access to support options in footer Several custom developed widgets including news, sub-categories, and knowledge base homepage Responsive layout for mobile and tablet users Watch the video for a quick tour and leave us a comment about what you think of the portal.
The Road to Kingston: Order Guides (Part 3 of 3)
This is a 3 part series that will take a deeper look at the new Service Portal features found in the Kingston release. In case you missed part 1 or 2, checkout the link below. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow documentation Order Guides The new order guide widget provides a greatly improved user experience over the prior versions of the widget. Features Along with an improved UI, it also adds some new capabilities: Wizard like interface Support for attachments Removing catalog items from the request Installation The new order guide widget is enabled by default Instance Options Title This does not appear to do anything Bootstrap color This does not appear to do anything Compact Mode Displays only one tab at a time for better rendering on lower resolution devices Enable Show More/Less for Order Guide description on Mobile Enables the Show More or Show Less options for the description of the order guide or the associated catalog items in the mobile view. This enabled by default.
The Road to Kingston: Route Maps (Part 2 of 3)
This is a 3 part series that will take a deeper look at the new Service Portal features found in the Kingston release. In case you missed part 1, checkout the link below. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow Kingston Service Portal Release Notes Route Maps for Service Portal One of my favorite features in the Kingston release is the new Page Route Maps. Lets say you're working on a new custom portal, but you would like to leave the out-of-box portal intact. One of the custom pages of the new portal is a User Profile page, in the past you would've either renamed the out-of-box page ID, or used a new page ID and then updated any links found throughout the portal. The problem with this is that the links are sometimes hard-coded in the out-of-box widgets, that you would now have to clone just to change the URL. In Kingston this has been solved by simply creating a new Page Route Map. When to use Page Route Maps Cloning out-of-box pages Multiple portal environments with differing pages Restrict access to a page New Configuration Records The following configuration records have been added to ServiceNow to provide support for the new Page Route Maps feature: New Table Page Route Map [sp_page_route_map] New Module Page Route Maps [Service Portal > Page Route Maps] Creating a New Route Map Using our example from before, if we would like to link our portal to a new User Profile page without changing any of the existing links, all we have to do is: Navigate to Service Portal > Page Route Maps. Click New. Complete the form. In this example, the out-of-box page is called "user_profile", and our new page is "user_profile_2". With this new Route Map, any request at the original URL on a designated portal will render our new page. Before: After: Final Thoughts The Route Maps are a great addition to the Service Portal. Due to the Service Portal's modular nature, Page Route Maps finally complete the full circle of being able to quickly and easily change the page that is rendered without changing URL's. h5,h4 { margin-top: 24px; margin-bottom: 18px; } h4 { color: #3d89cc; } .aligncenter { text-align: center; } .entry-content { border-top: 1px solid #ddd; }
Featured Portal – Fairfax Media
The team at NewRocket recently collaborated with Fairfax Media on their multi-department service portal. Fairfax Media is one of the largest media companies in Australia and New Zealand, with investments in newspaper, magazines, radio and digital properties. Fairfax had previously deployed six independent department portals with little continuity among them. NewRocket proposed developing one single portal experience to facilitate seamless navigation among the portals while still preserving individual department identities. The new portal unifies the company and allows portal users to accomplish their tasks quickly across multiple departments. NewRocket's skill and depth of knowledge in UI and UX design and their understanding of ServiceNow helped to make our Intranet and Service Portal design project very successful. The final product is exactly what we wanted, easy to learn, easy to use, simple to maintain and a joy to develop. - Scott Paterson, Fairfax Technology Service Manager Check out this video created by the Fairfax team: Portal Features The portal features a user centric design model that allows for quick access to ticket and request statuses as well as the ability to personalize content throughout the portal. 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 employees and administrators. Multiple departments (IT, Finance, HR, Legal, Health & Safety, Business Intelligence) Unique department landing pages Smart search widget with grouped search sources Facebook integration for news feed Searchable staff directory Custom department specific icons 6 knowledge bases combined into a single knowledge portal Fully responsive for mobile and tablet users Take a look at the portal and let us know what you think in the comments below. figcaption { text-align: center; font-style: italic;}
The Road to Kingston: Announcements (Part 1 of 3)
In this 3 part series, we'll take a deeper look into the new Service Portal features found in the ServiceNow Kingston release. Part 1 - Announcements Part 2 - Route Maps Part 3 - Order Guides Link to official ServiceNow Kingston Service Portal Release Notes Announcements for Service Portal One of the new features Kingston has to offer is the out-of-box support for announcements in Service Portal. No longer do you need to hack together your own implementation of a News Knowledge Base category to display within the Service Portal. The new Announcements feature gives you a extensive control over the look and feel of an announcement, as well as the content and routing for that announcement. In the rest of this article, we’ll go through the new configuration records for Announcements, as well as some of the cool configuration settings that are included. When To Use Announcements There are a number of use cases for announcements, such as informing employees of: A critical outage New employee health benefits information An upcoming planned maintenance window Feature Highlights Standard styles: Style announcements by creating custom style records where you can set the background color, foreground color, etc. Announcement window: Provide From and To date fields to determine the lifetime of an announcement Portal specific announcements: Select which portal you’d like the announcements to display on Configurable links: Add a link to an existing portal page or custom URL Configurable dismissal: Control whether users have the ability to dismiss the notification New Configuration Records The following configuration records have been added to ServiceNow to provide support for the new Announcements feature: New Tables Announcement [announcement] - Stores announcement information Announcement Style [announcement_style] - This table stores a few out-of-box styling configurations for the Announcements widget and allows users to create their own styles Announcement Consumer Type [announcement_consumer_type] - Stores the Consumer Type values of Banner and Widget Portal Announcements [m2m_announcement_portal] - Stores mapping between Announcement record and Portal record Dismissed Announcements [m2m_dismissed_announcement] - Stores mapping between User record and Announcement record New Module Announcements [Service Portal > Announcements] New Role announcement_admin - Maintain Service Portal Announcements including creating and deleting. Exploring The Announcement Form Most of the fields are self-explanatory but there are a few things worth mentioning: Type field: Contains a watchlist for Announcement Consumers. This is used to tell Service Portal where to render the announcement. Display style field: A reference to the Announcement Styles table, where you can define the look and feel of an announcement by creating or modifying existing styles. Click target field: This field is used to determine if the announcement is clickable, and if so where the user will be routed to. Options include a Service Portal Page record or a custom URL. Dismiss options field: Used to determine if a Service Portal user can dismiss the announcement. Portals related list: If there is no Portal record associated with the announcement, by default, the announcement will show on all portals. If a Portal record is provided, the announcement will only show on those Portals that have been specified. Consumer Types When it comes to displaying announcements in the Service Portal, administrators have 2 options. The first option is the Announcements banner feature and the second option is the new out-of-box Announcements widget, where you can define exactly where in a page the Announcement should be displayed. Given the nature of an announcement, this is generally what you’d like the user to see first, which is why it is included in the header for the Portal. The image below shows the 2 display options, which are references to the same Announcement record. Announcement Styles Looking to change the default blue announcement background to a color that matches your company’s color palette? This can easily be accomplished by creating a new Announcement Style record, which is where you can define the following configurations: Background color Foreground color (text color) Alignment (left aligned or center aligned text) Final Thoughts Although it’s a little frustrating that the Announcements feature cannot be modified since it’s injected behind the scenes before the header of the Service Portal, overall it’s a step in the right direction. The Announcement Styles and Portal related list on the Announcement record was a great architectural decision. What We Like Flexibility of Announcement styles Control over the display of an Announcement by the Portal related list on the Announcement record From and To fields for an easy-to-maintain announcement lifespan User dismissal options What Could Be Improved The Announcement banner is injected above the top of the page, so you have no control over the placement and limited options for styling The ability to provide an Angular template would have been a nice added feature h5,h4 { margin-top: 24px; margin-bottom: 18px; } h4 { color: #3d89cc; } .aligncenter { text-align: center; } .entry-content { border-top: 1px solid #ddd; }
DOM Manipulation the Service Portal way
One of the amazing features of Service Portal is how it encapsulates each widget into a self-contained component. This encapsulation greatly increases the maintainability and reduces code complexity by breaking the portal or application down into many smaller units of functionality (widgets). However, if you start using jQuery or performing DOM manipulation directly within the controller, you can quickly cause problems in your application. Officially, this is not a good practice. According to the AngularJS Documentation: Do not use controllers to manipulate the DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation. The Link Function to the rescue! In AngularJS, DOM manipulation is typically only performed inside of the Link Function of a Directive, and in Service Portal, this is available via the "Link Function" field of the widget. By using the "element" object, you get access to the DOM of the widget. Consider the following example: Here is another quick example calling a jQuery Plugin If you're using jQuery plugins, you may wish to create a custom directive to make it reusable across multiple widgets. By using the Link Function and "element" object, you're staying within the confines of the current widget, and won't accidentally impact other widgets or elements on the page. Further reading: jQuery Plugins as Angular Directives DOM Manipulation in AngularJS Creating a Directive that Manipulates the DOM DOM Manipulation the AngularJS way
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: https://newrocketdemo1.service-now.com/$sp.do?id=spacerocket 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: https://community.servicenow.com/message/1261738 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
Founder of 