Back to gallery

ITSM Challenge


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:

Subject (the title of the ticket) | Area – storage, counter, storefront etc. | Item – surge protector, cashier etc. | Description – free text | Related tickets | Attachments | Reporter name | Time of submission | Assignee | Status – open/in progress/resolved | Category & sub-category TTR (time to resolution) | Priority | Impact Tags | SLA | Billable time | Feedback & Rating – when the ticket is resolved the reporter rates the service | Resolution actions – there are MANY ACTIONS that the service provider can take in order to resolve the ticket e.g.-
Send a message to the reporter, Take control of the reporters’ computer, Send a help guide, Order equipment, Set a meeting with the reporter, Start a video meeting with the reporter.


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




The role


• 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 


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.


: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

1- Getting feedback after closing the ticket

1- The resolution actions screen is closed in order to make room for the whole correspondence

1- The resolution actions screen can be dragged over the long correspondence

Design System



Side bar



More Projects

Concept for an intra-organizational communication system

High School Course App

Atomic design system


Daphna Alon