Challenge Summary
The client for this project has an existing system called Quality Incident Reporting (QIR) application. This existing application was created using SharePoint and is used for creating and managing quality incident records. The goal for this project is to build a new Quality Incident Reporting application using .NET (based on the existing QIR application).
For this challenge, we need you to create a Frontend Design (Storyboard) for the new QIR application. We have provided the wireframes for the new QIR application, as well as the client's style guide, for you to base your screen designs on.
We look forward to seeing your creative designs!
Round 1
Round 1 will focus on the following screens for the new QIR application:
1) Login
2) Regular User Home
3) QIR - Required for Draft Fields
4) Business and System Admin Home
5) QIR - Awaiting Approval
6) Manage Root Causes
7) Manage Codes
NOTE: See the wireframes to understand what functionality is needed for the new QIR application. Please make sure to also include the changes to the wireframes described in this challenge spec below. If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Round 2
In Round 2, you will need to include all Round 1 screens (updated based on milestone feedback). For Round 2, you must also include all the remaining functionality descibed in the project documentation, including the following screens:
8) QIR - Required for Saved Fields
9) QIR - Required for Approval Fields
10) QIR - Closed / Reopened
11) Manage Dept Regions
12) Manage Dept Notification Lists
13) Manage Email Templates
14) Application Log
Primary Goals
The goal for this project is to build a new Quality Incident Reporting (QIR) application to replace the existing Sharepoint system. The new QIR application will include all the functionality of the existing system, along with some small enhancements and improvements. For this challenge, we need you to create a Frontend Design (Storyboard) for the new QIR application (based on the Wireframes and style guide provided).
Project Description
The client for this project has an existing Quality Incident Reporting (QIR) system. This existing application is used for creating and managing quality incident records. The goal for this project is to build a new Quality Incident Reporting application using .NET (based on the existing QIR application). The new QIR application will include all the functionality of the existing system, along with some small enhancements and improvements.
General Requirements:
- Produce a front-end design (Storyboard) that can be used to demonstrate all screens / mentioned functionality as required in each round.
- Required designs are for a new .NET application (the new QIR application).
- All changes below in the "Changes from Wireframe" section of the challenge spec below need to be included in your screen designs.
- The design should have a clean, modern, look-and-feel that still blends in to the current environment while enhancing functionality.
- The design must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in contest round details (and described in the contest spec / wireframes).
- Your design must represents all pages and flows from the Wireframes. You should use these Wireframes as a guide, but if there is better way to display any information, feel free to reflect that on your design.
- Screens should be numbered correctly to explain the storyboard flow to us.
- Please check screen notes for each page in the Wireframes to see the various interactions in those pages. You need to include those in your submission.
Branding and Guidelines:
- Your design must fit a 1024×768 pixels wide screen resolution.
- As for color requirements, please stick to the greens and secondary colors that makes up the current system (#00b760 is the primary green in the current system header - for secondary colors the client likes: Black (HEX #000000), Yellow (HEX #ffc800), and Light Blue (HEX #5fa8e4). Please see the attached Style Guide for full details.
- The attached style guide includes design details the client prefers. Please use this as a guideline, but creativity is also welcome! Please feel free to include your creative design ideas!
- The client would like you to please stick to the greens and secondary colors that makes up the current system (see hex codes above).
- Use web-safe fonts for the pages content. Please make sure to declaring your fonts according to the Studio font policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
Navigation:
- The new design should include a type of breadcrumb that allows the user/administrator to go back to previous pages.
Storyboard Requirements:
Overall:
- Follow the workflow and layout guidance from the Wireframes. You need to create storyboards to cover all the pages in these Wireframes.
- IMPORTANT: All changes below in the "Changes from Wireframe" section of the challenge spec below need to be included in your screen designs. If you have any questions about these changes, please ask on the forum and we'll be happy to help, thanks!
- Make sure to provide screens for popups, collapase/expandable features, error forms, and so on.
- As a suggestion, look at all the buttons in the forms to understand the interaction features of the application.
- Pay attention to the notes included on the Wireframe pages.
Screen Descriptions:
See the "Wireframe Home" page in the Wireframes for a description of each screen (open the file index.html).
Changes from Wireframe:
The client has reviewed the new QIR wireframes and provided a list of feedback. Most of the changes requested have already been completed in the final fixes of the wireframes. However, some items have been saved for downstream challenges. The following is a list of all remaining changes that need to be made during this design challenge:
Overall Changes (all pages):
- Show column filters (need way to sort and filter tables with columns)
- Sections should be collapsable and add something to hide/show or collapse/expand all sections
- Business and IT System Administrators need way to remove a QIR from the working list
- Incident Date needs to be separated into 2 columns on QIR List grid
Manage Page Changes:
- "Manage Cause Categorizations" - the links at the bottom of levels are not intuitive (where does the duplicate node get added to the tree or is it in the clipboard)?. Current system supports drag and drop, will this? Design thoughts?
- Manage Root Cause, need way to expand collapse all. How to add the very first node?
- Manage Dept Regions - Region Code should be a drop down from Code list
provide a way to add a region on this page as well without having to go to "Manage Codes".
- Manage Dept Notification Lists - need way to add Dept and Region on this page; need way to add a role on this page
- Classification Filters - drop downs need labels; note level2, level3, level4, .... labels will be dynamic based on user selection from previous level drop down
- Classification Search Box needs a search button *(magnifying glass)
NOTE: You must include these changes in your screen designs! This feedback above is newer than the wireframes and should take priority over what is shown in the wireframes.
Project Documentation:
1) Wireframes: Screens from the existing application. Your Storyboard Design should be based mainly on this (please note the "changes" section above for a few areas of the wireframes that need to be modified for your screen designs).
2) Style Guide: Describes design details the client prefers. Please use this as a guideline, but creativity is also welcome!
Target Audience
Users of the existing QIR application.
Judging Criteria
- Overall look and feel of the design
- Simplicity and consistency in the design
- Completeness and accuracy of how the design matches the screens / flow of the wireframe.
- How well you follow the client's branding / design guidelines.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
What to Submit
Preview JPG/PNG Image File
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 ZIP File
All requested contest requirements/screens as JPG or PNG files.
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.