Challenge Summary
Welcome to the Corningstone Storyboard Design Contest Part II. We just get Storyboard design on previous contest, this time we need your help create another pages/screen need designed based on wireframe of Corningstone Application.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned below as are part of the whole application. The application must be user friendly, intuitive, and easy to use and bring great User Experience.
Round 1
Your initial storyboard design solutions of:
1. Bids Tab View
2. Bids - Calendar View
3. Bid Search Result
4. Bid Details
5. Create Bid
6. Edit Bid
Notes.jpg: Any comments about your design for clients
Round 2
Final storyboard design solutions of:
1. Bids Tab View
2. Bids - Calendar View
3. Bid Search Result
4. Bid Details
5. Create Bid
6. Edit Bid
7. Data Management - Items
8. Data Management - Package
9. Data Management - Customers
10. Data Management - Vendors
11. My Profile
12. Application Setting
13. Help
14. News
Notes.jpg: Any comments about your design for clients
The purpose of this project is to improve current Corningstone application. Current application has been developed for some time now and its limitations are starting to hold back the business. This project will implement from scratch a new application and will build based on a more scalable and reliable platform and leveraging a proven application architecture that comes with good support and wide developer base able to sustain future growth of the application and possible scalability requirements.
For this contest we need your help to design storyboard design based on attached wireframe (corningstone-wf.zip).
Storyboard Requirements:
- This application will be developed in a web-server use HTML5 and running on Desktop and Tablet platform.
- You need create 2 version of storyboard: desktop (1024px x 768px) and tablet (768px x 1024px).
- You must follow completed storyboard design theme. When you create new pages make sure they are show same design feeling. ( Refer attached corningstone-storyboard-part-1-desktop.zip and corningstone-storyboard-part-1-ipad.zip )
- Make sure storyboard design is possible to build in future development.
- Feel free to suggest any great ideas to leverage User Experience of this application functionality. And don't forget to give notes for us.
These following functionality required on your submission.
All information below just starting point, feel free to design the storyboard.
1. Bids Tab View
- This tab consist of Table View and Calendar View
- Filter placed on top side
- Bids table in the bottom. match content like wireframe
- Should include a new column called "Job" and a link to "View Job"
2. Bids - Calendar View
- This will be full view of calendar portlet in dashboard page
3. Bid Search Result
- User will see search result after click Filter button
- Update "Job Name" to "Job"
4. Bid Details
- Main actions button on this page: "Lock Bid", "Edit Bid", "Delete Bid", "Print" and "Export" buttons
- There will be 2 main tabs on page "Bid Overview" and "Materials/Item List"
Bid Overview
- Match the content like wireframe
- Should include a new row called "Job" and a link to "View Job"
Materials/Item List
- This tab will be like other table
- Some row will have more than 1 packages, show as tree view
- Click More info need show modal info.
- Match the content like wireframe
5. Create Bid
- When user create bid, they will present with wizard form.
- Should include a new field called "Job" and a link to "View Job"
Step 1: Bid Overview
- The "Competitor" field is an auto-suggest input field.
- Add Engineer will show modal that will allow user select more than 1. Notice the option to select from favorite engineer and select all.
Step2: Materials/Item List
- Each row are editable.
- See the indent style for tree view row
- Notice that user can decrease and increase Quantity column
- User can also edit More Info
- In some row user can see the chart and manage submittal document. Notice the differences on each options
- Total Cost displayed in the bottom of table
Flow Improvement
- Should include a new field called "Job" on Create Bid page
- If user chose to create a new bid from the View Job page, the "Job" field is pre-populated and locked. Add some way to create new bid based on existing design (Check Job Details flow on existing storyboard)
- If editable, auto complete input field of Job will be attempted.
- If job is found, the Bid is created for that Job
- If job is not found a message appears to ask the user if it is a new job
- If the user chooses to create a new job, additional (Job related) fields are added to the form below Job for the user to complete in a sub-section
- Job related need add/remove input fields functionality.
6. Edit BId
- This page will show "editable" version of Bids Detail page
- See that user can remove engineer individually
Flow Improvement
- Should include a new field called "Job" on this edit page
- When edited, Ajax autocompletion of Job will be attempted
- If job is found, the Bid is created for that Job
- If job is not found a message appears to ask the user if it is a new job
- If the user chooses to create a new job, additional (Job related) fields are added to the form for the user to complete in a sub-section
7. Data Management - Items
- This is default page when user click Data Management on main navigation
- Page structure is filter and table
- Match content like provided wireframe
- User can see details information when click Item Number
Items Details
- On Details page, user will see 2 tabs: "Bids containing this item" and "Packages containing this item"
- Both tabs, will show table layout
- Notice filter on top of tab
8. Data Management - Package
- Deault page structure is filter and table
Package Details
- Quick information placed on top of page
- Items in package display in table view
- More info link need modal view
Create Package
- User need fill package information before add items to package
- fast lookup code search will show another field after select some item
- After that, user can customize each row.
Edit Package
- This page is "edit" version of create package
9. Data Management - Customers
- This page is for Customer information
- There will be these main pages, layout will similar like Package flow
- These mains pages need show on your submission:
-- Customer Details
-- Create Customer
-- Edit Customer
10. Data Management - Vendors
- This page is for Vendor information
- There will be these main pages, layout will similar like Customers flow
- These mains pages need show on your submission:
-- Vendor Details
-- Create Vendor
-- Edit Vendor
11. My Profile
- See there's 2 tabs on My Profile page: My Profile and Application Setting
- User land on this page after click username on top link
- There will be profile image and some information in the right side
- Create separate screen when user do the edits.
- User can upload their profile pic
12. Application Setting
- Application Setting divided into these boxes
- Each boxes have ability to edit the preference
Application Currency
- Edit: need ability to change the currency
Printing Preference
- Edit: User can select their printing format
Email Notification Preference
- Edit: User can select on/off the email notification
Favorite Engineer
- User can add engineer to the favorites list
- The user can filter the list of engineers in the box below by entering a keyword into this field
13. Help
- This Help page of Corningstone Application
- User also can download the help document
- How you design this help page much better?
14. News
- There will be filter to displayed News and Notification
- Data displayed in table format
Target User
- Existing CorningStone Customer
- Potential CorningStone Customer (specialized on Water Industry)
Judging Criteria
- How well you design new complete Corningstone Application Storyboard design.
- Cleanliness of your graphics and design.
- User Experience that will leverage Corningstone Application.
- Consistency between Desktop and iPad layout
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.
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 other winning placements.
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.