ITSM Challenge

Back to gallery

Background

IT stands for Information Technology and as our daily conduct becomes more computerized, so does the need for IT services in every organization and business.

IT services include, planning a computer and communications system in the business, installing the appropriate software, computer maintenance, protection, cloud backup, and securing the information that exists in the organization’s network.

The work of an IT team begins with the establishment of the computer system and continues with its ongoing maintenance and providing solutions to problems that come up during the work.

The challenge

The product team has decided to redo the ticket page in order to achieve better user experience.

• Suggest a layout for a ticket page.

• Demonstrate a flow of the service provider sending a guide to the end user – selecting a guide, adding notes and sending.

**No access to the current system**

Product Requirements
The ticket page consist of the following information:

Research

• Reading articles from Israel and abroad abot ITSM’s
• Testing existing systems for ITSM’s by sign up for a trial, watch YouTube tutorials: Jira, Freshdesk, Atera and more
• I read user reviews of several existing systems

Some examples of layouts

Jira

Freshdesk

Atera

The role

Responsibility

• Identify and diagnose issues and problems
• Categorize and record reported queries and provide solutions
• Support problem identification
• Advise users on appropriate course of action
• Monitor issues from start to resolution
• Escalate, if needed, unresolved problems to a higher level of support
• Provide essential online security advice and support

Pain points

• Not having the right tools
• Dealing with angry customers
• No crisis management or escalation protocol
• Lack of time due to serving multiple customers at once
• Not having a solution to the customer’s problem

Michael Biton

Insights

Agent Workspace is a graphic user interface that puts all the tools to find, research and resolve issues. Almost all fields and buttons should fit into a single page. You don’t need to scroll too much, and your options appear more transparent.

The design should be readable and clear, especially for someone with little familiarity with the system. The user shouldn’t have to search for the essential elements like urgency and category and resolution actions. They are placed in front and never get lost during the form exploration.

The solution

– Layout of the ticket screen
– Flow of the service provider sending a guide to the end user

First try

Final design

Color theme:
Research reveals that up to 85% of consumers feel the color is the most significant motivator in choosing a particular product.

Blue means security, trust, and safety. Numerous studies show that blue has positive connotations for many different segments of the population. Blue is everywhere. Hundreds of prominent brands feature it, including Skype and Microsoft Word, IBM, Dell, HP, Intel.

Resolution actions – design: I chose to emphasize the resolution options because this information is important for finding a solution quickly. In the brief it was emphasized that it is necessary to take into account that there are many resolution actions and therefore a solution like dropdown of all options is less convenient: Scanning and detecting is more difficult in a long list. In addition, dropdown remains open as long as the mouse is on the list. If the mouse accidentally moves, the list closes and the user needs to start the scan again.

Flow

:Default state

1- Easy access to the resolution actions: a screen that opens and closes by dragging such as the “inspect” command in the browsers (F12)
2- Panel with all the information on the ticket

1- Michael is Selecting the “Help Guide” option

2- Slide-out Panel is opened

1- Selecting a guide will present a preview of it
2- Preview of the selected guide
3- According to the method of avoiding scrolling and flipping between multiple screens,
the transition of the user from step to step will occur on the same screen. Each stage will have a photo and explanation.

1- Michael sees that that this one is good and clear and copy the link
2- He is writing an answer and pasting the link
3- Clicking on the reply button