IBM - SiBM - Smart Ticketing Responsive Tool Design Challenge

Welcome to IBM - SiBM - Smart Ticketing Responsive Tool Design Challenge. In this challenge, we need your help in coming up with initial design direction for a responsive application!

This challenge help users (project managers, etc..) create and monitor tickets that were created for the development team to work on or fix any open issues while configuring servers and services assigned to the development support team (DST)

Focus on creating a simple and engaging experience. Make sure to embrace the IBM Design Language when planning your solution.

Good luck on this challenge!

Round 1

Submit your initial designs for Checkpoint Feedback

0. Logo/Icon
1. Login (Desktop)
2. dashboard (Desktop + Mobile)
3. New ticket (Desktop)
4. Ticket details (Desktop)

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

0. Logo/Icon
1. Login (Desktop + Mobile)
2. Dashboard (Desktop + Mobile)
3. New Ticket (Desktop + Mobile)
4. Ticket Details (Desktop + Mobile)

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Challenge Description:
While configuring environment servers, services, etc. there is a need to open many tickets that a development team needs to work on to fix any open issues. Customer’s existing system allows users to submit ticket on a static page and follow-up on a ticket is done through email which is cumbersome. 

The design you come up with, will provide not only modern, user friendly interface to submit tickets, but most important, it will provide a real-time updated dashboard where you'll be able to see and track all the opened tickets, their latest status, and receive notifications as soon as the tickets are updated, instead of being flooded with many follow up emails.

We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

We had provided the wireframes for content and flow references, please DO NOT COPY the look & feel and this challenge’s purpose is to come up with better user experience and design!

Existing System and Problems:
- Currently we have static page to submit tickets, and the only way to follow up is by email. 
- Get an email whenever anything happens in the ticket, it says what has changed, etc.
- It’s hard to track the status of several tickets, difficult to keep track of what's happening with each one. Currently users ignore the emails, and keeps refreshing the ticket pages, to see what's going on.

Solution:
Create a Dashboard page, that consumes every ticket.
- Users can see notifications when a ticket is updated, and can see changes.  
- Can click on the ticket, flag shows when it is updated - can see what has changed.
-  We will be using IBM Bluemix on the back-end to communicate with the ticketing system, to consume the data, and see status updates.
- Mobile application lets you submit & track tickets. Would be a simpler dashboard.
- To increase agility and accuracy on the provided solution, Bluemix Watson will be used to conduct initial root-cause analysis. By learning from the information of historical tickets and other reference bases, it will be able to provide the possible causes and solutions, which will help support teams to work on the actual problem resolution.

User Story:
Camila, a project manager of a development team, was setting up the production environment for a software that her team was moving to production. 
- After talking to Andre, an architect of her team, she wrote down a list of things that she had to request to the Development Support Team (DST), like installing middleware softwares, configuring the network ports, certificates and so on. 
- She then opened the DST Ticket System and opened 17 tickets to the team. 
- The DST team started working on the tickets, and after a couple of hours, Camila noticed that many e-mails were arriving into her inbox. These e-mails were being sent by DST Ticketing tool each time a ticket had an update, like a person being assigned, a new comment or request. 
- The day after the submission of the tickets, Camila found herself lost into many follow-up emails. 
- She decided not to read them, and to only use the system page, where she found a list of all tickets she had opened. 
- However, this page was not dynamic, so she had to keep pressing F5 to refresh the page from time to time. 
- Andre, the architect of the team, asked Camila how the things were going with the environment configuration and Camila told him that it was not going well. She was finding it very hard to follow all the updates and to take the actions right when the DST team requested. 

Andre suggested she use the Smart Ticketing Tool, a new tool for managing tickets.
- She accessed it, and quickly found a dashboard with a list of all tickets that were opened, and a colored flag right after the ticket name, informing her of the situation of the tickets. After spending some time in this page, she noticed that she was being notified every time an update was made, and she could read the update quickly by selecting the ticket. 
- Andre told her that there was also an app version of this tool, in which she could not only open new tickets and view the real time updated dashboard, but also receive push notifications with the updates. 
- Meanwhile, Hanz, a support member from the DST team, had been assigned to fix a problem described in a new ticket. He knew that there was a new tool called Smart Ticketing Tool integrated with DST Ticket System, which added a button called “Ask Watson”. He clicked on the button and a popup opened, with Watson’s statement about the problem. 
- By analyzing past tickets, based on the description of it, Watson was able to understand what kind of problem that was, and suggested possible causes and solutions to the problem. 
- Watson’s statement was not exactly what was happening, but it was very close. It helped Hanz to find the cause of the problem, and the fix was almost the same as suggested. 
- He fixed it and closed the ticket, writing down what he did.

Design Size:
We need below sizes for this challenge:
- 750 x 1334 px (iPhone 6 Portrait)
- 1440px as width and height as required

Required Pages:
We are looking for the below pages to be designed..
We had provided wireframes to help you get started, please use them as a reference for content and suggest UX enhancements that would suit this application!

0) Logo/Icon:
- We would like to get your ideas for Smart Tracking Tool logo or an icon that would fit this app.

1) Login:
- Allow users to be logged into the tool.
- They will need to enter their username and password to be logged into this tool.
- Come up with simple design for this screen.

2) Dashboard:
Wireframe Reference: STT Mobile - List.pdf (Mobile) and STT Web.pdf (Desktop)
- This screen allows the users to view list of tickets that were created by them and view their status.
- How can we provide a way to let the users know that a particular ticket needs their attention?
- Provide a way for the user to search through the list of tickets. Will providing a filter be useful? Looking for your thoughts.

Open, In-Progress, Closed:
- This shows the list of issues that were just added by a user and the issue still need to be fixed.
- What needs to be shown in this view? Please see the wireframes to capture required details in this page.
- Note: each ticket will have an associated ticket ID.

3) Notification:
Wireframe Reference: STT Mobile - Notifications.pdf (Mobile) and Page 1 in STT Web.pdf (Desktop) - on the right side you can see the notifications
- We need a notification screen that shows the updates that were made to the ticket.
- Will a user need options to remove the items that were already read?

4) New Ticket Creation:
Wireframe Reference: STT Mobile - New Ticket.pdf (Mobile) and STT Web - New ticket.pdf (Desktop)
- Allow the users to choose the type of ticket (New Engagement, New Change)
- Selecting a ticket type takes the user to the appropriate ticket creation screen.
- Provide an option to cancel the new ticket creation process.

New Ticket Creation Screen:
Page 2 in the PDF
- This screen provides series of options for the user to choose.. (looks like the wireframe doesn't show "Severity" please show them in the designs)
- Show us how the user will choose an option in these? we had shown an example in the wireframe (page 3)
- Allow the user to choose the beginning and end date.
- Below that we show a list of questions that works as a toggle button (on/off), how do you think we need to display these?

5) Ticket Details:
Wireframe Reference: STT Mobile - Ticket.pdf (Mobile) and Page 3 in STT Web.pdf (Desktop)
- User needs a way to view the ticket details
- Each ticket will include:  1) a ticket ID,  2) the person who created the ticket, 3) severity (high, medium, low),  4) status (Open, In Progress, Closed),  5) to whom the ticket is assigned,  6) Date the ticket was created.
- Come up icons that you think will help.
- Allow users to view less details by default and allow them to click on a button to show more ticket details (please see wireframe for reference on this).
- Owner of the ticket will be able to add subscribers and also anyone who was subscribed by the owner can add any other users as a subscriber to this ticket.
- Provide an easy way for users to comment on the tickets.

Ask Watson:
Support members who is assigned to resolve the issue may not be sure on the possible solutions for a problem - in those cases, they will have the ability to get solutions from Watson.
- They will need ability to click on a button called "Ask Watson". Based on the statement of the problem "Watson" analyzes past tickets (based on the description) and we show in  a modal/popup window that would have the statement (solution) about the issue.
- We are looking for your thought on how this can be shown in your designs (wireframe doesn't show this). 
- Please see some example usage of Watson here: http://www.ibm.com/cloud-computing/bluemix/solutions/watson/

Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- What should the priority features be?
- How quickly could you find information?
- Please make sure there aren't any references to SiBM in any of the final designs -- that term should not appear anywhere in your designs. You can have the name as either "IBM Smart Ticketing" or just "Smart Ticketing".
- We need to make sure that there aren't any trademark violations.  So IBM(R) -- with the proper logo, Bluemix (TM), and copyright statements should be checked.  The list of copyright and trademarks are here: http://www.ibm.com/legal/us/en/copytrade.shtml

IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
-- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
-- Creativity is also welcome!

Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.

Target Audience:
- Only IBM Employees

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Your design should possible to build and make sense as a responsive application
- Cleanliness of your graphics and 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
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered 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.