Challenge Overview
Welcome to KONNECT – Responsive Ticketing System UI Prototype Challenge!
We want to build a simple service desk ticketing system for MSPs (Managed Service Provider). The custom application will be a responsive web application.
The goal of this challenge is to create the HTML5 Prototype for an application using the provided " KONNECT – Responsive Ticketing System " storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will use Bootstrap 3 (http://getbootstrap.com/getting-started).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
Note: If some mobile screens are missing please refer to desktop screen design as reference.
A- Admin Users:
1- Login Page:
- Email/Password authentication for support staff to login to portal.
- Clicking on login will take user to Admin Dashboard (Admin-01-dashboard.png).
2- Admin Dashboard:
- Please refer to Admin-01-dashboard.png
- At the top of all admin screens you can find Search bar (Admin-09-search.png), search can be deadlink.
- Notifications view (Admin-07-notification.png).
- Messages view (Admin-08-message.png).
- From this screen the admin will be able to view:
-- Some numbers regarding tickets status and satisfaction.
-- Latest Tickets Widget.
-- Statistics Widget.
- Clicking on tickets from the menu will take the user to tickets screen.
3- Admin Ticket:
- Please refer to Admin-02-ticket-1.png.
- From left side menu user will be able to view All/Unassigned/In Progress/Resolved/Low Priority/ Medium Priority/High Priority/ Critical tickets.
- In Main are the user will be able to sort the tickets based on Date, set the priority of the ticket, remove ticket, Assign it to someone and close the ticket.
- In (Admin-02-ticket-2.png) you can view other ticket options on menu, Company/Location/Category.
- In (Admin-02-ticket-3-assignto.png) you can see how user can assign a ticket.
- In (Admin-02-ticket-4-setpriority.png) you can see how user can set priority of the ticket.
- If user clicks on Create new ticket button a modal will show up:
-- Admin-02-ticket-createticket-1.png.
-- Clicking anywhere outside the modal area will close it as will as clicking the X icon.
- Clicking on a ticket will take the user to Ticket Detailed View (Admin-02-ticket-detail-internal.png) where user can:
-- View internal Messages (Admin-02-ticket-detail-internal.png)
-- View Public Messages (Admin-02-ticket-detail-public.png)
-- Upload files (Admin-02-ticket-uploadfile.png & Admin-02-ticket-uploadingfile.png).
- Clicking on Company from the menu will take the user to Company screen.
4- Company Page:
- Please refer to Admin-03-company.png
- User can:
-- Search for companies.
-- Edit company details and remove company.
-- View users from that company.
-- View branch location on Google maps. (Google maps are just a static image here)
- Clicking on Staff from the menu will take the user to Staff screen.
5- Staff Screen:
- Please refer to Admin-04-staff.png
- User can:
-- Filter staff viewing based on Status/Job Desk/Rated from left side menu.
-- Implement the calendar here based on theme colors. (No scoring down for colors)
- Performance graph can be image based.
- Clicking on FAQ from the menu will take the user to FAQ screen.
6- FAQ Page:
- Please refer to Admin-05-resource-faq.png
- Please show FAQ articles (Admin-05-resource-faq.png) and FAQ Videos (Admin-05-resource-video.png).
- Video is image based.
- Clicking on Configuration from the menu will take the user to Configuration screen.
7- Configuration Page:
- Please refer to Admin-06-configuration.png
- For drop down lists use dummy data.
B- Customer User:
8- Landing Page:
- Please refer to Customer-01_Landingpage.png.
- Contact Us Modal (Customer-02_Contactus.png):
-- Clicking anywhere outside the modal area will close it as will as clicking the X icon.
- After clicking send customer can see his ticket (Customer-03_myticket.png).
9- Customer Ticket:
- Please refer to Customer-03_myticket.png.
- Ticket resolved view (Customer-04_resolved.png).
C- Staff User:
10- Landing Page:
- Please refer to Staff-01_Ticket.png
- User can assign the ticket to himself (Staff-01_Ticket-hover.png).
- Please use same search, messages and notification views from Admin staff.
- Clicking on Profile icon will show the user his profile (Staff-03_MyProfile.png)
- Clicking on Chat from the menu will take the user to Chat screen.
11- Chat Page:
- Please refer to Staff-02_Chat.png
CODE REQUIREMENTS
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that displays and functions correctly in all the requested browsers on desktop. Responsive is not the top priority, and code will not be QA’d on other devices, but should have appropriate media queries in place for phone and tablet portrait and landscape orientations.
- All elements should be consistent: pay attention to padding, margin, line-height, etc.
- Matching the designs (as closely as possible) across the required browsers.
HTML5
-- Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all HTML code so future developers can follow the code.
-- All HTML code naming should not have any conflicts or errors.
-- Element and Attribute names should be in lowercase and use a "-" or camelback naming to separate multiple-word classes (i.e. "main-content", or "MainContent)
-- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
-- No inline CSS styles- all styles must be placed in an external stylesheet.
-- Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
-- Provide comments in the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
-- Please use clean INDENTATION for all CSS so developers can follow the code.
-- All CSS naming should not have any conflicts
-- Please use CSS3 styles when creating shapes.
-- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
-- Minimum width for the page should be 1280px and accommodate desktop.
-- If not responsive, at a minimum have some media queries as placeholders for standard breakpoints (phone portrait and landscape, tablet portrait and landscape) - so that we can build upon them in a later phase.
Javascript
-- All JavaScript must not have a copyright by a third party.
-- You are encouraged to use your own scripts, or scripts that are free and publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Web UI Framework
- You are highly encouraged to use the Bootstrap framework
- Responsive
- Recommended versions:
-- Bootstrap v3.3.7 or latest stable
Images
-- Images should be properly compressed while still having good visual quality.
-- Please use sprites when submitting icons as images, and common icon fonts like Font-Awesome when possible.
Browsers
-- IE11
-- Chrome Latest Browser
-- Safari Latest Browser
-- Firefox Latest Browser
-- Safari and Chrome on Mobile
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines:
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip