Challenge Summary
Welcome to the Vesta IT Self Service Admin Design Contest. The goal of this contest is to produce Storyboards that design and capture the requirements of the IT Self Service Admin Application.
The goal of this contest is to design the Administration User Interface for the IT Self Service Application - the storyboards that the Site Administrator will use to add, edit and delete content.
At the end of this contest the Client is looking to have a set of clean, intuitive, and easy-to-use designs that meets the requirements described within the Contest Details.
Contest Details The Studio Community has already designed the Vesta IT Self Service Application. NOW we need the storyboards designed for the Admin application that controls the IT Self Service Application. Admin interfaces are typically boring and have poor planning and design. Admin interfaces are always the same - you have to authenticate users, display and handle forms, validate input, etc. For this contest we just want a SIMPLE clean (thought-out) Admin interface. You will need to reference the Admin Specification and design storyboards that are extremely simple, clean, (modern) with appropriately sized input and form fields. We picture the admin interface looking/working similar to the design of the open source Django Admin (see attached samples) Storyboard Details Admin storyboards that need to be designed - remember these screens are what the Administrator will use to edit the actual application. Storyboard 1. Login Screen (reference login.png) - Username - Password Storyboard 2. Admin Console/Dashboard (reference admin_index.png) This page is a table with 2 hyperlinks. When a user click on one of the items below it will drill down into that specific area. - System Configuration Values (When the Admin Views and edits the System Configuration items) - Request Forms (Where the Admin Views, Creates, Deletes Request forms) - Recent Actions box (Where the Admin can see there recent Admin edits etc.) (reference admin_index.png) Storyboard 3. System Configuration Values (reference changelist.png) These items will be listed as links that the Admin can click on and drill into an edit screen. Storyboard 4. Application Timeout (reference editform.png) Description: The timeout period that will invalidate a user session when a given period of time of inactivity has passed. Format: Integer. Duration in minutes. Storyboard 5. IT Self Service Modules Description: The list of available modules together with options for turning on and off the modules. Format: The modules are: * Knowledge base search * My Support * Issues * Service requests * Featured Support Services * Top Searches (overall and for each featured service) * External resources * Announcements * Logging * Hot Topics * IT News * My Profile - This Admin feature controls the "Modules" on the IT Self Service Homepage (reference IT-SelfService-Home.png) - The Admin needs to be able to turn them on and off Storyboard 6. Application Links (reference editform.png) Description: Edits the Links area on the IT Self Service Dashboard (lower left corner) Format: Link title and URL input Storyboard 7. Top Searches (reference editform.png) Description: The "Top Searches" area on the IT Self Service Dashboard (top left corner) requires Admin management Format: Link Title, Link URL, Description Storyboard 8. Featured Services Description: The "Featured Services" area on the IT Self Service Dashboard (center bottom) requires Admin management. Format: Link URL, Logo upload, ability to turn them on/off, Description, ability to click into a Featured Service and edit their Troubleshooting and Relevant Request links. For each "Featured Service" there will be a list of troubleshooting articles and a list of relevant request forms. (reference IT-FeaturedService.png) Storyboard 8b. Troubleshooting Articles & Relevant Request Forms (reference IT-FeaturedService.png) Description: Troubleshooting articles for the featured services. These will be connected to featured services. Format: Click into a Featured Service and be able to add/edit Troubleshooting and Relevant Request Forms - Link Title, Link URL, Description Storyboard 9. Service Desk Status Mapping Description: The mapping configuration between the statuses received form the Service Desk application and the ones displayed in the Vesta Self Service application. Format: Pairs of values: State displayed state and the status received from Service Desk. This could work as a multi-select box. The default configuration is the following: - Open if the received status is: Researching, Resolving, Waiting for User, or Waiting for Support - Closed if the received status is: Completed, Informed, or Closed Create Request Forms Storyboard 10. Request Forms From the admin console, the administrator can create new request forms. The request forms can contain elements such as free form text fields, mandatory fields, drop down lists, radio buttons, etc The administrator needs to be able to Create, Edit and Delete Request Forms. When a user Clicks on "Request Forms" it will take them to a page like (reference changelist2.png) where it lists out available Request Forms, provides a "Create" button (like the "Add Book" button in the example) and checkboxes to delete Request Forms. When a user clicks on the "Create" button they will be presented with a page that had 3 sections. Storyboard 11. Create a Request Form (reference editform.png) Section 1: Form Summary Information (mandatory information) Name Description: The name of the form Format: Input field Visibility Description: The visibility of the form Format: Checkbox Approval Requirement Description: If the form needs approval from the manager before it will get processed Format: Checkbox Approver ID Description: The associate user id of the user that can approve the request form. Format: Input field Section 2: Service Desk (mandatory information) Status Description: The service status fields Format: Dropdown Service Description: The service to which the request form pertains Format: Dropdown Description Description: A description field for the request form Format: Textbox Type Description: The service type Format: Dropdown Assignment to workgroup Description: A workgroup to which the requests will be assigned Format: Dropdown Impact Description: The possible impact of the request Format: Textbox Configuration item Description: Configuration value items Format: Dropdown Category Description: The category of service. Format: Dropdown Resolution code Description: A resolution code for the issue. Helps with the tracking of issues. Format: Dropdown Section 3: Request Form Fields In this section the user will "Create" their forms that will eventually show up on IT Self Service Application (reference example-form.png). The Administrator is presented with a series of options to create their Request forms. (Imagine how the Admin would create the example forms) Field Name Description: The field name Format: Input Field Type Description: The type of the fields Format: One of predefined values: textbox, number, date, drop down list, checkbox, radio button Predefined Values Description: The predefined values that the fields can take. Format: A list of values depending on the field type Hover help text Description: Text representing a help message to be displayed to the user Format: Input Save and Cancel buttons at the bottom of the page. Storyboard 12. Error Page (reference editform_errors.png) - Show an example of input errors. Design Features - Reference IT-SelfService-Home.png - Use the same Reds/Blacks/Grays - Use the top right logo IT Self Service Logo in your header design - It should look just like the App - but simple Administration screens. - Easy to use - just like the provided reference Admin screens. Judging Criteria - How well you design and plan out the IT Self Service Admin Pages - Cleanliness of your graphics and design (Keep it Simple!) Contest Deliverables Round One Admin-Storyboards 1-7 = Your submitted design solution for a review You can provide additional storyboards for client review if you would like feedback beyond the required 7 storyboards. Round Two Admin-Storyboards 1-12 = Final Design Provide all required storyboards. Notes.jpg = A file that explains your design and solution Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.
Round 1
At the end of Round 1, the Client will choose five (5) Round 1 winners, each will win $50 and a Design Review. These winners and any member who had a passing submission in Round 1 will be eligible to compete in Round 2 for the additional $1000 in prizes.Round 2
Round 2 will start with the announcement of the Five (5) $50 Round 1 winners and their design review from the Client.Contest Details The Studio Community has already designed the Vesta IT Self Service Application. NOW we need the storyboards designed for the Admin application that controls the IT Self Service Application. Admin interfaces are typically boring and have poor planning and design. Admin interfaces are always the same - you have to authenticate users, display and handle forms, validate input, etc. For this contest we just want a SIMPLE clean (thought-out) Admin interface. You will need to reference the Admin Specification and design storyboards that are extremely simple, clean, (modern) with appropriately sized input and form fields. We picture the admin interface looking/working similar to the design of the open source Django Admin (see attached samples) Storyboard Details Admin storyboards that need to be designed - remember these screens are what the Administrator will use to edit the actual application. Storyboard 1. Login Screen (reference login.png) - Username - Password Storyboard 2. Admin Console/Dashboard (reference admin_index.png) This page is a table with 2 hyperlinks. When a user click on one of the items below it will drill down into that specific area. - System Configuration Values (When the Admin Views and edits the System Configuration items) - Request Forms (Where the Admin Views, Creates, Deletes Request forms) - Recent Actions box (Where the Admin can see there recent Admin edits etc.) (reference admin_index.png) Storyboard 3. System Configuration Values (reference changelist.png) These items will be listed as links that the Admin can click on and drill into an edit screen. Storyboard 4. Application Timeout (reference editform.png) Description: The timeout period that will invalidate a user session when a given period of time of inactivity has passed. Format: Integer. Duration in minutes. Storyboard 5. IT Self Service Modules Description: The list of available modules together with options for turning on and off the modules. Format: The modules are: * Knowledge base search * My Support * Issues * Service requests * Featured Support Services * Top Searches (overall and for each featured service) * External resources * Announcements * Logging * Hot Topics * IT News * My Profile - This Admin feature controls the "Modules" on the IT Self Service Homepage (reference IT-SelfService-Home.png) - The Admin needs to be able to turn them on and off Storyboard 6. Application Links (reference editform.png) Description: Edits the Links area on the IT Self Service Dashboard (lower left corner) Format: Link title and URL input Storyboard 7. Top Searches (reference editform.png) Description: The "Top Searches" area on the IT Self Service Dashboard (top left corner) requires Admin management Format: Link Title, Link URL, Description Storyboard 8. Featured Services Description: The "Featured Services" area on the IT Self Service Dashboard (center bottom) requires Admin management. Format: Link URL, Logo upload, ability to turn them on/off, Description, ability to click into a Featured Service and edit their Troubleshooting and Relevant Request links. For each "Featured Service" there will be a list of troubleshooting articles and a list of relevant request forms. (reference IT-FeaturedService.png) Storyboard 8b. Troubleshooting Articles & Relevant Request Forms (reference IT-FeaturedService.png) Description: Troubleshooting articles for the featured services. These will be connected to featured services. Format: Click into a Featured Service and be able to add/edit Troubleshooting and Relevant Request Forms - Link Title, Link URL, Description Storyboard 9. Service Desk Status Mapping Description: The mapping configuration between the statuses received form the Service Desk application and the ones displayed in the Vesta Self Service application. Format: Pairs of values: State displayed state and the status received from Service Desk. This could work as a multi-select box. The default configuration is the following: - Open if the received status is: Researching, Resolving, Waiting for User, or Waiting for Support - Closed if the received status is: Completed, Informed, or Closed Create Request Forms Storyboard 10. Request Forms From the admin console, the administrator can create new request forms. The request forms can contain elements such as free form text fields, mandatory fields, drop down lists, radio buttons, etc The administrator needs to be able to Create, Edit and Delete Request Forms. When a user Clicks on "Request Forms" it will take them to a page like (reference changelist2.png) where it lists out available Request Forms, provides a "Create" button (like the "Add Book" button in the example) and checkboxes to delete Request Forms. When a user clicks on the "Create" button they will be presented with a page that had 3 sections. Storyboard 11. Create a Request Form (reference editform.png) Section 1: Form Summary Information (mandatory information) Name Description: The name of the form Format: Input field Visibility Description: The visibility of the form Format: Checkbox Approval Requirement Description: If the form needs approval from the manager before it will get processed Format: Checkbox Approver ID Description: The associate user id of the user that can approve the request form. Format: Input field Section 2: Service Desk (mandatory information) Status Description: The service status fields Format: Dropdown Service Description: The service to which the request form pertains Format: Dropdown Description Description: A description field for the request form Format: Textbox Type Description: The service type Format: Dropdown Assignment to workgroup Description: A workgroup to which the requests will be assigned Format: Dropdown Impact Description: The possible impact of the request Format: Textbox Configuration item Description: Configuration value items Format: Dropdown Category Description: The category of service. Format: Dropdown Resolution code Description: A resolution code for the issue. Helps with the tracking of issues. Format: Dropdown Section 3: Request Form Fields In this section the user will "Create" their forms that will eventually show up on IT Self Service Application (reference example-form.png). The Administrator is presented with a series of options to create their Request forms. (Imagine how the Admin would create the example forms) Field Name Description: The field name Format: Input Field Type Description: The type of the fields Format: One of predefined values: textbox, number, date, drop down list, checkbox, radio button Predefined Values Description: The predefined values that the fields can take. Format: A list of values depending on the field type Hover help text Description: Text representing a help message to be displayed to the user Format: Input Save and Cancel buttons at the bottom of the page. Storyboard 12. Error Page (reference editform_errors.png) - Show an example of input errors. Design Features - Reference IT-SelfService-Home.png - Use the same Reds/Blacks/Grays - Use the top right logo IT Self Service Logo in your header design - It should look just like the App - but simple Administration screens. - Easy to use - just like the provided reference Admin screens. Judging Criteria - How well you design and plan out the IT Self Service Admin Pages - Cleanliness of your graphics and design (Keep it Simple!) Contest Deliverables Round One Admin-Storyboards 1-7 = Your submitted design solution for a review You can provide additional storyboards for client review if you would like feedback beyond the required 7 storyboards. Round Two Admin-Storyboards 1-12 = Final Design Provide all required storyboards. Notes.jpg = A file that explains your design and solution Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.
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.