How to design a great Service Portal experience

Service Portal

The Service Portal has been available in ServiceNow for a few years now since the Helsinki release. It is easier to use and implement than its alternative, the Content Management System (CMS), being based on more modern technologies like AngularJS, server-side JavaScript, HTML, and CSS. While some businesses opt to use it OOTB, many require customizations in order to align the Service Portal with their brand identity and company culture.

Having defined and implemented Service Portals for customers with vastly different requirements, Senior ServiceNow Developers Dana Ivanof and Iulian Manea know the importance of creating designs that are not only appealing but also functional and user-friendly. To that end, they have compiled this comprehensive resource guide that will help you provide a fantastic user experience.

UX/ UI

Mobile first

The principle of mobile first should be on everyone’s mind when building a portal. This means creating a layout with a default configuration for mobile devices and layering features for wider screens on top of that default. Here you can find a guide for implementing such a layout.

UX Laws

Laws of UX is an interactive collection of best practices that designers can consider when creating user interfaces. It has a useful introduction to the psychology fundamentals that have a direct influence on how people process and interact with the interfaces designers create.

Medium

Here you can find a wealth of insightful and inspiring UX resources, from trends to tools and tips.

Responsive design

A very important part of UX is responsive web design (RWD), meaning a website’s ability to change layout and appearance to suit various screen widths and resolutions. This helpful resource from Mozilla will help you understand RWD and its main techniques.

UI Bootstrap

This is where you will find the bootstrap components for Angular JS, on which ServiceNow is based, along with bootstrap 3.4.

Colors

Coolors

Coolors is a color generator that allows you to create your own palette or use one of the thousands schemes in their catalog. To make it easier to access your palettes, Coolors lets you sort them in projects and collections. Other useful tools include the Color Picker, which gives you information on conversions, combinations, and the Color Contrast Checker, which lets you calculate the contrast ratio of text and background colors.

Material Design Color Tool

Another useful alternative is the Color Tool from Google’s Material Design, that lets you create color palettes and measure the accessibility level of color combinations.

Signs and color contrast

If you want to learn more about color and how to differentiate it in information layers, check out this interesting article about the science of color contrast and signage.

Fonts

Google Fonts

With over 1,000 open-source font families, Google Fonts is a great resource that can be easily added to the Service Portal via URL. The catalogue includes over 50 variable font families and color schemes for improved accessibility.

Font Squirrel

Font Squirrel is a free service that includes a Base64 encoder tool to make it easier to add the font files to the Service Portal.

Typewolf

If you need help with choosing the best font combination for your project, then look no further than Typewolf. Here you’ll find everything you want to know about typography, type pairing and alternatives for various fonts.

Typetester

Typetester lets you test and compare over 2800 web fonts from Adobe Edge, Adobe Typekit and Google Fonts to see what would look better. They also have a WYSIWYG web typography editor with the option to export your designs as HTML and CSS. 

Accessibility

Structural hierarchies are the best way to categorize workflows and processes. Before talking about design accessibility and the importance of colors and fonts in building a service portal, our developers recommend understanding the customer’s practices, procedures and activities through assessment sessions. Those discussions will help you better translate their workflows into categories, catalogue items or requests and classify them hierarchically.  

Designing for accessibility

A step-by-step guide on how to make websites more accessible, like adding enough color contrast, using labels instead of placeholder text, using focus indicators, and other helpful suggestions.

Web accessibility guidelines

Here you can find the official guidelines on designing for people with disabilities, developed by the Web Accessibility Initiative.

Color blindness tester

These tools allow you to see how a color is perceived by color blind people. Both the Color Picker mentioned above and COBLIS (Color Blindness Simulator) are great when it comes to testing colors.

Images & Icons

UI Goodies

A resource aggregator for designers, that includes everything from stock photos, typography and icons, to colors, gradients and animations.

Material Design Icons

This open-source icon collection has all you need to draw your users attention, with each symbol available in five themes and a range of downloadable sizes and densities.

Wikimedia Commons

A repository of over 60 million free to use media files, categorized by topics, location and type. You can contribute your own work to the collection.

Pexels

A collection of free stock photos to enhance the look of the Service Portal.

Font Awesome

The web’s largest icon toolkit, Font Awesome has a version integrated with Service Portal, and a feature that lets you use icons without having to include any additional resources.  

Code Resources

Animista

Animista is a collection of ready to use CSS animations and a playground where you can tweak and test them. This will considerably speed up the process of iterating different animation ideas.

Material UI – React Tabs

This Material Design library made for React includes various styles of tab components, ranging from simple to customized. 

CSS Tricks

Here you can find lots of tips, tricks and techniques to help you build a cohesive design. Their comprehensive guide to CSS flexbox layout includes explanations and examples on everything from the flex container to the flex items. Another great resource is the CSS grid guide that covers all the settings for the grid parent container and the grid child elements.

Bootstrap SCSS Variables

This will help you override the bootstrap variables used by ServiceNow.

Schedule a meeting with us to discuss about your existing or future elegant and user-friendly Service Portal

Contact us here. Our team of 40 ServiceNow specialists is ready to help you create a beautiful and functional Service Portal that is adapted to the needs of your company.

SHARE:

Share on facebook
Share on twitter
Share on linkedin