Design Service Portals Faster w/ Sketch
The Solution Innovation (servicenowinnovation.com) team at ServiceNow spends our days helping customers create fantastic experiences to improve their employees’ world of work. We see all manner of Service Portal designs cross our desks, from those crafted by a customer’s design team to hard-to-navigate solutions built by a lone ServiceNow admin. Often, our team is called in to show customers examples of excellent portal experiences and help a struggling project refocus toward a positive outcome.
Typically, each project follows a similar path. First, we review the customer’s portal, interview users to understand how they experience it, and mock up a new design. We then use that new design to get feedback from users before our team builds out a simple prototype of the portal to accelerate the time-to-deliver for a customer’s development team or an implementation partner.
In the past, most of our design time on these one-off projects is spent creating the same elements: headers, buttons, panels, forms, and other standard web controls. Our small team is pretty nimble, but this was eating up far too much of our time on a daily basis. We simply needed a better way of working.
Today we utilize a reusable system of widgets (symbols) and styles that can be quickly updated for each new project. Our team’s design toolkit now consists of Sketch for creating and collaborating on all design projects. Sketch includes a great set of capabilities that allow us to streamline the process of creating portals, which I will go into detail below.
Getting to Know Sketch
In Sketch, there are some key concepts you need to understand before diving in.
Symbols These are the critical components of a design system. In Sketch, symbols feature reusable components that have overrides for each instance of that symbol to allows you to change text, icons, colors, and more.
Layer Styles Reusable visual styles that apply fills, borders, and other visual elements to objects on the screen.
Text Styles Similar to Layer Styles, these allow you to apply font choice, font size, and font styles to text elements.
Library A separate Sketch file from your project file that allows you to easily reuse Symbols, Layer Styles, and Text Styles across projects.
Beginning a Project
Each new Service Portal project starts with two key Sketch files that you can download from our GIT repository
1) Service_Portal_Library.sketch This is the library of Service Portal components converted in Symbols, Layer Styles, and Text Styles. Every project will need this as a Library.
2) ITSM_Base.sketch / CSM_Base.sketch / HR_Base.sketch Each of these consists of a series of key pages from the product’s out-of-the-box portal. These are optional but will help you quickly start a project for the respective products.
Once you’ve downloaded Service_Portal_Library.sketch, you’ll need to add it as a Library via Sketch>Preferences
Let’s first take a look at Service_Portal_Library.sketch…
When you open this file in Sketch, you’ll see two pages available in the Layer List. The Styles page consists of the default Text and Layer Styles that are assigned to the out-of-the-box ITSM portal (typically located at /sp on your instance). The HR and CSM portals replace these styles with their theme and also introduce additional styles. Those are represented in the individual _Base files.
The Symbols page consists of most of the Service Portal widget components you see in the out-of-the-box portals. It is an ever-growing list, so check the GitHub often for updates. There is also a subset of the FontAwesome 4 icons that are available natively in Service Portal.
When you decide to apply a theme to your portal, the Styles page is where you’ll make most of your modifications.
Now, on to our project files…
Each of the *_Base Sketch files is a bootstrap for getting started on one of ServiceNow’s out of the box portals.
The Desktop page consists of key pages within the product’s portal that you can use to modify content, widget layouts, and some design elements.
Now that we have the basics, let’s take a look at ITSM_Base first. In the Layer List, select 1.0 Home and hit ⌘+1 to zoom in to that page. If you select any Library Symbol on the page, you’ll see the overrides available on the Inspector for text, Layer Styles, and Text Styles. For example, the Icon Text symbols in the middle of the page, all can have unique icons, title text, and paragraph text.
We made five changes to the symbol:
- Changed the paragraph text
- Changed the widget title
- Changed the icon & color
- Changed the Icon Text Bootstrap colors to red.
These all map to capabilities in the widget’s Instance Options on Service Portal.
That is the basics of working with the Service Portal Library and Base Sketch files. Now if you want to visualize your brand or your customer’s brand in the Service Portal, we need to modify the Layer Styles and Text Styles. This is the equivalent of using the Branding Editor and writing custom CSS in your theme on an instance.
Switch over to the Styles page in the Service_Portal_Library.sketch file. Here you’ll see all of the Layer Styles and Type Styles available in the document. If you look at the layers’ labels for elements on the screen you’ll see that they map to the Service Portal CSS classes or Branding Editor labels for easy translation.
I am going to use the Darkly theme from the amazing team at Bootswatch to walk through a branding exercise.
Note: We are looking at themes for Bootstrap 3 since that is what Service Portal is based on, even though it is not the latest version.
Modifying Text Styles
The first step is to update all the Text Style fonts to Lato, the base font for Darkly. From the Styles page, select the Text Styles artboard and type “Preview” in the Layer List. Then select all of the layers named “Preview” (I use shift+click to do this).
The Inspector will now have the TEXT section available. Go ahead and switch the font to Lato. Update all instances of the text styles by going to APPEARANCE and selecting Update Text Styles.
If you did it right, the next time you select a text layer and go to APPEARANCE, you’ll see a new style folder.
Easy, right? Now we can apply some of the more specific text style changes from Darkly.
You can see the impact of the change by going back to the Desktop page and looking at any artboard.
I’ll show you how we update the headers and then jump to the finished product.
Looking at the headers in Darkly, we see some font size and weight changes, so we’ll go ahead and apply those.
Once we go through and make all the changes we want, we have a new Text Styles Artboard.
And the new ITSM Home Page
Notice something wrong? The Darkly theme is reliant on a dark background. We only changed the Text Styles, not the Layer Styles. To get it to look right, we have to repeat the process for the Layer Styles.
I’ll show you how to do the background styles for the home page and panels, so we can get closer to the right look and feel. Let’s start with the homepage background, which for Darkly is #222222.
We’re getting there…
I’ll continue applying the updates to the Layer Styles
And with that, we have a fully themed Service Portal homepage. It often takes some tweaking to make the theme work, but this will help guide your developers to implement the theme properly. As you look at the internal pages (catalog, knowledge, etc) there will be additional adjustments you need to make as well. One of the most common issues is the theme’s font color and background color for a particular component are too close and you need to find an inverse color option.
It’s better to release something and get feedback than just wait til it’s perfect
Our team is already using this toolkit to rapidly prototype portals for our customers. We’re findings gaps in the library and adding constantly. We want to hear about your experiences. Is this helpful to your process? What didn’t work right? How can we make it better?
