Challenge Summary
Welcome to “Konnect - Responsive Ticketing System Design Concepts Challenge”. We wants to build a simple service desk ticketing system for MSPs (Managed Service Provider). The custom application will be a responsive web application. At the end of this challenge, we are looking for the Topcoder Design Community to help us plan and design the user experience of our new application. Read more details below and let’s have some FUN!!
02) Create a New Service Ticket Screen
03) View Ticket
04) Search Screen
05) File Upload Screen
06) Notifications Screen
08) Dashboard Screen
Note: Please number your screen so we can easily review them. If you need invision access, please ask copilot in forum.
01) Login Screen
02) Create a New Service Ticket Screen
03) View Ticket
04) Search Screen
05) File Upload Screen
06) Notifications Screen
07) Account Settings Screen
08) Dashboard Screen
09) Messaging Screen
10) Onboarding Screen
11) Multi-Tenant Screen
Note: Please number your screen so we can easily review them. If you need invision access, please ask copilot in forum.
Background Overview
In this challenge, we are looking for your creative UI/UX ideas to create design concepts for a simple service desk ticketing system. The custom application will be a responsive web application. At the end of this challenge, we are wanting to see intuitive and easy to use (requiring no training) "design concepts" that will help us create a prototype in the next phase of this project! We’re looking for thorough user flows which show how a user would complete the numerous tasks we’re solving for in this challenge. To succeed, pay close attention to detail and give us your best ideas on how to create a simple help desk / ticketing service!
We expect to see design screens and a clickable Invision prototype that will us understand how your ideas will come together.
Challenge Goals
Create a lite and simple help desk ticket management software. Competing products are too complex and slow and offer too many features that slow down use and overall performance.
The product will be "White Label" software. The product will be for internal use initially, but the client would like to eventually sell the software to others.
There is no defined branding guidelines that must be followed. Rather, make your design simple and flexible enough that a company buying the software could easily customize with their brand’s logo and some colors.
Similar Product Reference
http://www.mspmanager.com/features/it-ticketing-helpdesk
http://www.connectwise.com/solutions/ticketing/service-desk-management
- Both pieces of software are too complex, which makes simple tasks like creating a new ticket take longer than desired.
- You should be able to view a demo by registering at either site.
- Our goal is to provide a simpler experience that provided by either of these pieces of software.
Users
- Help Desk Staff: Completed work within the ticketing system. Help Desk Staff will respond to and manage tickets.
- Admin: Admins have the ability to view all the tickets within the system (not just those they own or are assigned) and can manage and assign tickets to staff.
- Regular user: Will enter help desk tickets when they have an issue. Will have a more limited experience and must have extremely quick and simple access to creating a new ticket.
Screen Requirements
Below just a suggestions about screens that needs to be create for this apps, feel free to add new screens or merge them if you think it will increase the UI/UX quality:
01) Login Screen
- Email/Password authentication for support staff to login to portal
- Created by admin staff
- No SSO
02) Create a New Service Ticket Screen
- Content that needs to be appear in this screen can be found from below:
-- Contact
-- Name
-- Phone number
-- Email Address
-- Subject / body of ticket
-- Company (tickets will be separated by company)
-- Location
-- Assigned Queue / Technician (New Ticket Queue by default)
-- Ability for an admin to add "Custom Fields"
-- Contacts, Companies, and Locations should be able to be referenced from past input or created on-the-fly
03) View Ticket
- Screen that displays an in progress ticket.
- Display messaging chain
- Display attached files
- Add new comment
- Assign to user
- Status
- Type (categorization of this ticket)
- Resolution (required when the ticket is being closed)
- Phone numbers in the contact details and the body need to be hyperlinks that will make a web call (Not open a new page) to an admin created URL with the phone number and the logged in techs extension as variables such as: "http://pbx.company.com/callthisnumber?phonenumber=777777777&ext=201" (example url)
04) Search Screen
- Service tickets will be broken down by Company --> Location --> Contact A
- Auto-complete search
- Keyword search in ticket description
- Search by status: EG: assigned / completed / resolved
05) File Upload Screen
- Users will be able to upload documents to an in progress ticket.
- Customer-related docs
- Ticket-related docs
- Dropbox integration for file-upload (or alternate document upload solution)
06) Notifications Screen
- Notify support staff of new tickets that have been submitted or closed
- Notify of incoming messages from other staff members
- Allow desktop notifications when using supported browsers.
07) Account Settings Screen
- Display Name, Title, Photo, Password, Contact Cell, Office Number & Extension, Email Address, Phone Extension Number (Please indicate that any phone numbers in common formats will be clickable and direct the user)
08) Dashboard Screen
- View internal messages
- View tickets in personal queue
- Submit New Ticket
- There needs to be a way to always show new, unassigned tickets and tickets in the user's queue across all screens as some sort of widget. (Wouldn't want someone to have to refresh the page or navigate home to check if a new ticket is in)
09) Messaging Screen
- Internal staff communication.
- A simple way for users to communicate with staff on a particular ticket.
- A way to show widespread issues within the system. For example: all users of the system should be alerted if there is a widespread issue/outage with a service.
10) Onboarding Screen
- New users can be walked through setting up their profile information
- Think of this as an onscreen demo that will walk users through the high level functions of the application.
- This could be an onscreen that points out particular features and gives users a high level overview of what that function does.
- Example: Point out onscreen where to create a new ticket, where to search for a ticket, etc.
11) Multi-Tenant Screen
- The application will be multi-tenant
- Customers can sign up through the application
- Customers will sign in through a custom portal, tailored to their company (needs design that can be customizeable).
- Show us what a client login screen would look like.
- Design a screen that would contain the hosted companies’ information: eg: Display Name, Title, Photo, Password, Contact Cell, Office Number & Extension, Email Address, Phone Extension Number (Please indicate that any phone numbers in common formats will be clickable and direct the user)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Branding Requirements
- The product will be "White Label" software. The product will be for internal use initially, but the client would like to eventually sell the software to others.
- There is no defined branding guidelines that must be followed. Rather, make your design simple and flexible enough that a company buying the software could easily customize with their brand’s logo and some colors.
Screen Size
- Desktop: 1280 px width with height adjusting accordingly (Needs to be retina friendly)
- Mobile: 750 x 1334 px (height can be adjusted) Design at retina resolution.
Target User
- Helpdesk Staff
- Customer
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork Policies
You can only use stockphoto in this challenge, stock icons not allowed for this challenge.
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Adobe Illustrator (AI File).
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Round 1
Initial design for client review (Mobile + Desktop)02) Create a New Service Ticket Screen
03) View Ticket
04) Search Screen
05) File Upload Screen
06) Notifications Screen
08) Dashboard Screen
Note: Please number your screen so we can easily review them. If you need invision access, please ask copilot in forum.
Round 2
All requirements like stated in challenge details with client feedback applied (Mobile + Desktop)01) Login Screen
02) Create a New Service Ticket Screen
03) View Ticket
04) Search Screen
05) File Upload Screen
06) Notifications Screen
07) Account Settings Screen
08) Dashboard Screen
09) Messaging Screen
10) Onboarding Screen
11) Multi-Tenant Screen
Note: Please number your screen so we can easily review them. If you need invision access, please ask copilot in forum.
Background Overview
In this challenge, we are looking for your creative UI/UX ideas to create design concepts for a simple service desk ticketing system. The custom application will be a responsive web application. At the end of this challenge, we are wanting to see intuitive and easy to use (requiring no training) "design concepts" that will help us create a prototype in the next phase of this project! We’re looking for thorough user flows which show how a user would complete the numerous tasks we’re solving for in this challenge. To succeed, pay close attention to detail and give us your best ideas on how to create a simple help desk / ticketing service!
We expect to see design screens and a clickable Invision prototype that will us understand how your ideas will come together.
Challenge Goals
Create a lite and simple help desk ticket management software. Competing products are too complex and slow and offer too many features that slow down use and overall performance.
The product will be "White Label" software. The product will be for internal use initially, but the client would like to eventually sell the software to others.
There is no defined branding guidelines that must be followed. Rather, make your design simple and flexible enough that a company buying the software could easily customize with their brand’s logo and some colors.
Similar Product Reference
http://www.mspmanager.com/features/it-ticketing-helpdesk
http://www.connectwise.com/solutions/ticketing/service-desk-management
- Both pieces of software are too complex, which makes simple tasks like creating a new ticket take longer than desired.
- You should be able to view a demo by registering at either site.
- Our goal is to provide a simpler experience that provided by either of these pieces of software.
Users
- Help Desk Staff: Completed work within the ticketing system. Help Desk Staff will respond to and manage tickets.
- Admin: Admins have the ability to view all the tickets within the system (not just those they own or are assigned) and can manage and assign tickets to staff.
- Regular user: Will enter help desk tickets when they have an issue. Will have a more limited experience and must have extremely quick and simple access to creating a new ticket.
Screen Requirements
Below just a suggestions about screens that needs to be create for this apps, feel free to add new screens or merge them if you think it will increase the UI/UX quality:
01) Login Screen
- Email/Password authentication for support staff to login to portal
- Created by admin staff
- No SSO
02) Create a New Service Ticket Screen
- Content that needs to be appear in this screen can be found from below:
-- Contact
-- Name
-- Phone number
-- Email Address
-- Subject / body of ticket
-- Company (tickets will be separated by company)
-- Location
-- Assigned Queue / Technician (New Ticket Queue by default)
-- Ability for an admin to add "Custom Fields"
-- Contacts, Companies, and Locations should be able to be referenced from past input or created on-the-fly
03) View Ticket
- Screen that displays an in progress ticket.
- Display messaging chain
- Display attached files
- Add new comment
- Assign to user
- Status
- Type (categorization of this ticket)
- Resolution (required when the ticket is being closed)
- Phone numbers in the contact details and the body need to be hyperlinks that will make a web call (Not open a new page) to an admin created URL with the phone number and the logged in techs extension as variables such as: "http://pbx.company.com/callthisnumber?phonenumber=777777777&ext=201" (example url)
04) Search Screen
- Service tickets will be broken down by Company --> Location --> Contact A
- Auto-complete search
- Keyword search in ticket description
- Search by status: EG: assigned / completed / resolved
05) File Upload Screen
- Users will be able to upload documents to an in progress ticket.
- Customer-related docs
- Ticket-related docs
- Dropbox integration for file-upload (or alternate document upload solution)
06) Notifications Screen
- Notify support staff of new tickets that have been submitted or closed
- Notify of incoming messages from other staff members
- Allow desktop notifications when using supported browsers.
07) Account Settings Screen
- Display Name, Title, Photo, Password, Contact Cell, Office Number & Extension, Email Address, Phone Extension Number (Please indicate that any phone numbers in common formats will be clickable and direct the user)
08) Dashboard Screen
- View internal messages
- View tickets in personal queue
- Submit New Ticket
- There needs to be a way to always show new, unassigned tickets and tickets in the user's queue across all screens as some sort of widget. (Wouldn't want someone to have to refresh the page or navigate home to check if a new ticket is in)
09) Messaging Screen
- Internal staff communication.
- A simple way for users to communicate with staff on a particular ticket.
- A way to show widespread issues within the system. For example: all users of the system should be alerted if there is a widespread issue/outage with a service.
10) Onboarding Screen
- New users can be walked through setting up their profile information
- Think of this as an onscreen demo that will walk users through the high level functions of the application.
- This could be an onscreen that points out particular features and gives users a high level overview of what that function does.
- Example: Point out onscreen where to create a new ticket, where to search for a ticket, etc.
11) Multi-Tenant Screen
- The application will be multi-tenant
- Customers can sign up through the application
- Customers will sign in through a custom portal, tailored to their company (needs design that can be customizeable).
- Show us what a client login screen would look like.
- Design a screen that would contain the hosted companies’ information: eg: Display Name, Title, Photo, Password, Contact Cell, Office Number & Extension, Email Address, Phone Extension Number (Please indicate that any phone numbers in common formats will be clickable and direct the user)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Branding Requirements
- The product will be "White Label" software. The product will be for internal use initially, but the client would like to eventually sell the software to others.
- There is no defined branding guidelines that must be followed. Rather, make your design simple and flexible enough that a company buying the software could easily customize with their brand’s logo and some colors.
Screen Size
- Desktop: 1280 px width with height adjusting accordingly (Needs to be retina friendly)
- Mobile: 750 x 1334 px (height can be adjusted) Design at retina resolution.
Target User
- Helpdesk Staff
- Customer
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork Policies
You can only use stockphoto in this challenge, stock icons not allowed for this challenge.
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Adobe Illustrator (AI File).
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.