Mary Joey Intas: UX Designer, Product Lead from Cebu Philippines
Transforming an IT service portal for a global packaging supplier
Timeline
Apr - Sep 2024
Platform
ServiceNow Employee Center
My Role
Product/UX Designer
Introduction
The IT Services portal is powered by ServiceNow Employee Center which provides users with easy access to various IT-related services, information, and support. It acts as a one-stop destination where employees can self-serve, submit requests, and find solutions to common IT issues.
In this project, we revamped the user experience and redesigned the UI aligning to the company’s brand and ensured to incorporate the feedback and sentiments of the users.
My role
I’m Joey, the product and UX designer dedicated to this project. Along with me was a project manager who’s also our delivery lead, 1 scrum master and 4 developers.
Problem
The service portal has never been changed since it was originally deployed and used. Here are the key problems with the core experience.
PROBLEM #1
Poor user experience on incident and service request creation
Requesting a service and raising a tech issue are two things that confuse the users leading to tickets’ slow response time and resolution. The service catalog is not organized which makes it difficult for users to find the right category of the issues faced. The old portal also lacks transparency as the users are unaware of the ticket status, related tasks and progress.
PROBLEM #2
Overall visual design needs improvement
The old portal design follows the default service portal of ServiceNow and is not properly aligned to the company’s branding. Its overall UI is not responsive to smaller screen sizes and not user friendly especially to non-IT users.
PROBLEM #3
Low usage on existing portal features and knowledge base
Many capabilities and existing features are unknown to the users and have not been utilized including the announcements, delegation, choosing a preferred language, guided tour, and the knowledge base.
Defining the problem
How might we redesign the IT portal to be more user-friendly and efficient, empowering employees to resolve issues independently and enhance the overall experience?
Goal
BUSINESS GOALS
Personalized yet easily maintainable product
With most features improved, the team aims to build a new portal utilizing the latest ServiceNow Employee Center tailored to user expectations without compromising maintainability in future upgrades.
Address continuous feedback
Create a product that captures and continuously addresses user feedback.
USER GOALS
A simple, intuitive IT portal user experience
Increase customer satisfaction through simplified and intuitive user experience that visually aligns to the company’s brand and values.
Enabled self-service
Improve ability of employees to get IT support, create incident, request service, and resolve their own issues quickly leveraging self-help knowledge base and existing ServiceNow portal capabilities.
Early ideation
Survey and co-creation sessions
A week after the kick-off, a survey was sent off to know the employees overall experience of the existing portal, identify problems and features they wish to add. Moreover, the team conducted workshop sessions to targeted key users to delve deeply on their concerns and pain points.
During the 3 separate virtual workshops, we let our users look at the old portal and identify what they like and wish. We clustered the ideas and ranked them into priorities of high, medium and low in a bull’s eye diagram.
Sitemap
I created a sitemap to visualize the portal pages at a high level and the scope of the project.
Wireframes
Here are the initial wireframes I’ve created after converging the outcomes of the survey and workshop. Along the process, these wireframes and visual designs underwent multiple iterations considering business decisions and technical assessments.
Homepage
In the homepage, the emphasis was put more on the search function to encourage users to find answers to their issues first before raising a ticket or requesting a custom service. The carousel was transformed into cards under Popular services. On the side, active tickets and approvals are displayed as a mini dashboard where users could track their open items. Towards the bottom, I’ve added a section for users to provide their feedback to address future concerns on user experience.
Catalog and Ticket View
In the catalog page, I made sure to align the layout to the existing portal layout with the categories listed on the side navigation. I’ve also added a stepper in the ticket view to visualize the progress of the ticket.
Knowledge
I created a separate version to display the different knowledge bases on top of the knowledge page but in the end, this was removed as some knowledge bases are not being displayed to most users but for service desk use only. Instead, the users will directly see the articles available to them categorized into most useful, most viewed and top rated. Users will also be able to navigate to the different categories using the navigation on the side.
Profile
The profile page is organized into 3 separate tabs – Contact, Preferences, and Organization.
High fidelity designs
As the pages were enhanced with colors and graphics, we decided to retain some minor components based on ServiceNow built-in portal components and minimize customization e.g. the active items dashboard, guided tour, and the stepper inside the ticket view follows out-of-the-box.
Create an incident
Creating an incident is a critical function which we don’t want to get a lot of prominence on, but I wanted to make sure the action is handy for users in the homepage. Here are some design options created on where best to place the button. Ultimately, the team pushed for option 1.
Guided tour
These are the screens to visualize the guided tour.
Catalog categorization
Service catalog taxonomy
Finding the services from the catalog came out to be one of the main pain points of the users. Thus, a separate workshop on catalog categorization was conducted to really discuss the problem in detail and hear what the stakeholders and users say about the proposed categories.
These are the UX principles that guided us to arrive with the outcome:
Meet the users where they are but nudge them in the right direction
- Place a catalog item in multiple categories where it makes sense. Limited to 2 categories only.
- Use short yet meaningful descriptions to categories and catalog items.
- Optimize search capabilities of the portal.
Don’t make the user work harder than necessary
- Use simple language that the user understands. Tailor terminology to incorporate customer language.
- Aim for no more than a three-step heirarchy: top-level category > subcategory > catalog item
- Simplify the forms, merge items
Include only what’s relevant for the user
- Ensure role-based forms are properly set up for the intended users
Here are my proposed changes to cater the following UX principles we set above.
After how many versions, the new categories below become the final outcome.
These are the prototype screens I created for the catalog usability testing. During the usability test, we shared the prototype to the participants and asked them scenarios on how to go about finding a certain service catalog. We had a thorough discussion on their experience about the new categorization.
Design demo and testing
In June 11, we conducted the design demo and I walked through the proposed design to key users and stakeholders. We got to hear their feedback and addressed concerns and questions during the session. This was the survey responses we got via live poll.
Up to the UAT stage, the design was continuously iterated. The team categorized the items raised based on severity – whether they critical, high, medium and low, as well as based on the type, if they are defects, enhancements, and concerns during testing. Below are the results:
Final designs
In September 16, the new portal design was finally live.
Additional pages and killer features we’ve added
Additional feature #1
Stepper in ticket view
Additional feature #2
Favorites page
Additional feature #3
Approvals page
Additional feature #4
All announcements page
Additional feature #5
Featured KB section
UI Kit
Lastly, here’s the UI Kit I have created and used to come up with the visual designs. This also served as guidance to developers during the build.
Future steps
Now that we have established a feedback widget into the portal homepage, there will already be an easy way for users to share their experience and contribute ideas to improve the portal. On top of this, there are still items defined for continuous improvement that have not been the focus for this initial epic.
In the future, the following plans will be lined up:
To setup catalog governance
As more items get added to the catalog, it’s important to put some structure in place. The design principles we started with will be very helpful to guide how owners manage and organize everything moving forward.
To improve mobile UI and accessibility
So far, we’ve focused mainly on the web experience since that’s where most users access the portal. Next up is making the UI better for mobile users on the go and ensuring the portal is more accessible overall.
To organize and refine self-help knowledge articles
With the portal getting more traffic, self-help articles will play a bigger role in reducing support tickets. The plan is to clean up the existing content and organize new articles so users can find what they need more easily.
I really enjoyed the process from co-creation sessions, design, testing to development of this epic. The success of this project was impossible without the brilliant team behind the IT portal!
Thank you for reading through! Hope you enjoyed learning about my design and thought process. 🙂
If you’d like to see more, you can check out other stories like this in my ✨ portfolio✨.