Self-service portals that are included with most ITSM toolkits are heavily focused on functionality such as search, self-help, ticket logging and providing the customer with the ability to track the progress of requests.
In terms of design, however, they're rather spartan. This is understandable as clients have their own branding and design requirements, so the emphasis is on providing a starting point from where these can be applied as needed.
In this article we'll demonstrate the results of two recent user experience (UX) projects Lida has carried out that involved significant rebranding work for Alemba Service Manager (ASM) self-service portals. While this is directly relevant for ASM clients, the examples provided might provided some inspiration for those working with any self-service portal.
Cloud System
For the first case, a Cloud based implementation, the client's key concern was to keep scrolling to a minimum, with the most-used functionality accessible at the top of the page. They were very clear on the features they wanted in their portal, and their branding requirements.
The result was a significantly improved home page matched to these requirements (see below).
Styling
The whole self-service portal was created in our client's corporate colour scheme and preferred font. A lot of this was done via the Designer Skins tab, with some of the finishing touches added to the home page screen in Designer.
Main Menu
We moved the menu to the top of the page for an improved user experience. User patterns had revealed that only a subset of menu items were actually being used, so the number of options were reduced to those to improve menu clarity and lower cognitive load. This had a very positive impact on mobile devices, when the menu collapses into the hamburger.
Search Bar
To save space and match the experience of familiar search engines, the search bar was moved to the top left, above the page banner image.
Dashboard widgets can be added and configured via Designer and can prove very useful for displaying specific information. For example, a widget can be created that shows managers all the tickets logged by members of their team. Alternatively, the standard My Calls widget can be replaced with one that filters out certain types of call or and shows select fields to display. Widgets are configured in Designer, without the need for complex customisation.
We took advantage of the widget functionality to replace the default global search bar with a dashboard widget for more control.
Service Outages
A considerable pain point was that customers were often logging tickets for issues that IT already had in the system. The reason for this was the low visibility of the Major Incident widget, and because many customers weren't familiar with the concept of a "Major Incident".
To deal with this we renamed the Major Incidents widget to "Service Outages" and restyled it so to boost noticeability. The new widget is now very obvious, and with ASM's "Add Me" functionality users are able to log a ticket against the Major Incident with a single click. We also configured the widget to hide when there are no outages, both saving on screen real estate and ensuring that users see it when a Service Outage is occurring.
Portal Actions & My Items tabs
As part of the drive to balance functionality with minimal scrolling and lower cognitive load, we adopted a tabbed approach to the main body of the portal. The new design is much more intuitive as users can now quickly switch between taking an action (Portal Actions) and viewing their existing items (My Items).
For the Portal Actions tab we restyled the ASM Promoted Items widget to give the users three buttons to take them directly to where they need to go. Self Help takes them to the Knowledge Centre for easy access to the Knowledge Base, whereas Something Broken and Request Something take them to filtered views of their Service Catalog, to allow them to log a new ticket.
To improve the existing items display for the My Items Tab - we replaced all of the standard widgets with Dashboard widgets, which provided a more flexible set of options for display, including:
selecting the columns we wanted to show
making all columns sortable
the ability to filter results, which meant we were able to display separate widgets (each with different column selections) for open, draft and closed tickets
a more powerful and flexible pagination function, which allowed users to select number of rows to show for each page
By embedding subtabs within My Items users can easily move between each list. The tab below shows open requests:
This one shows the user's open approvals:
And this one shows the user's assets:
Top 5 Self Help & Popular Requests
Two sets of quick links were added for common self-help and request items.
Knowledge Centre
The Self Help top menu option and button in the main screen both go to the Knowledge Centre page. This contains a restyled knowledge search bar along with links to popular and new self-help articles.
In addition, support for streaming video from within a knowledge article was added.
Something Broken & Request Something
The "Something Broken" and "Request Something" buttons link to a filtered view of the Service Catalogue, with Something Broken showing different incident forms, and Request Something opening a list of different types of simple and complex service requests for all business areas.
On-premise system
The second client is a long-term on-premise ASM implementation. Our lead UX consultant worked with them through a detailed focus-group oriented Service Design analysis. The end result was the home page design shown below, which takes advantage of the ASM 10 portal skin with some minor HTML/JavaScript customisation.
Main Menu
The main menu has been placed along the top to match the user experience to contemporary web designs. Similar to the cloud system above, the number of first-tier options was reduced to those actually being selected by users - however in this case further selections appearing on hover.
Search for a Request Form
The global search field was been moved to the top of the page. This client maintains a comprehensive service catalogue, but their workloads are mostly internal, reducing the need for customer-facing knowledge.
To maximise the utility of the search function, therefore, the search was tweaked to only search through Service Actions (service catalogue request forms). Again, this was achieved with minimal customization using dashboard widgets in Designer.
Quick Links
ASM has functionality which allows for selected service catalogue requests to be added to a list of 'promoted items'. We took advantage of this concept to provide one-click links to the most heavily used forms, thus reducing the need for users to browse through the catalogue to find commonly-requested items.
To improve the user experience Lida designed and created a set of themed icons in the client's own corporate colours.
Merging Alemba Service Manager Calls and Requests
By default ASM distinguishes between "Calls" (generally used for incident management) and "Requests" (for service requests). This is a legacy of the code base, but many clients find the distinction useful from an ITIL perspective.
In this case, however, it was felt that calls and requests should be merged into a single list. This was achieved using ASM's consolidation functionality - taking advantage of the fact that ASM prefixes ticket numbers with a 'C' or an 'R' for calls and requests, respectively, to pull everything into a single "My Tickets" table.
Image led Navigation
The use of branded icons was extended to the most common forms through an image-led navigation approach. The main selections on forms are now presented as icons rather than dropdowns to improve clarity and a more appealing user experience. When users click on an image the form shows fields relevant to the selection.
By using the same set of icons in the Service Request Catalog we were able to provide a consistent visual language throughout the portal.
Summary
These are just two examples of the many portals that we at Lida have designed and built over the last 15+ years. While this work does present some technical challenges, the ASM self-service portal is generally very configurable without the need for heavy customisation. We've found that the key to success in these projects tends is the design phase, ensuring both that users are consulted and their needs understood, and the clients objectives around user experience, branding and visual language are clear.
Feel free to get in touch if you'd like to chat with us about ways we can help you modernize and professionalize your own Self-Service Portal User Experience.