Challenge Summary
Welcome to the Corningstone Storyboard Design Contest Part I. We just get wireframe of Corningstone Application.
We need your help design storyboard flow based on provided layout/solution in wireframe and details requirements below.
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. Login
2. Dashboard
3. Jobs
4. Job Search Result
Notes.jpg: Any comments about your design for clients
Round 2
Final storyboard design solutions of:
1. Login
2. Dashboard
3. Jobs
4. Job Search Result
5. Job Details
6. Create Job
7. Edit Job
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 be implemented from scratching a new application and will be built 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.
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).
- Use placeholder for application logo
- Color is open to designer
- Font usage on this storyboard is open to designer, but we suggest use safe web font. Refer to this link.
- 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. Login
- User can login by entering username and password.
- How validation error looks?
2. Dashboard
- This page will be the first page user sees when login as User role
- Logo on the left side
- There will be "Welcome User" and "Logout" link
- Main navigation consists of "Dashboard", "Jobs", "Data Management", "Reporting", "Utilities" and "Setting"
- Make sure you create proper breadcrumb style.
- The dashboard portlets will be able to support drag/drop, resizing, etc.
- The user should be able to customize their dashboard, such as adding/removing portlets, resizing, moving the portlets location, etc.
- Are we need confirmation when user customize portlet? How they looks?
- Create screens explains the flow when customize portlets
- Default dashboard page show these portlets: "Job Calendar", "Recent Bids", "Quick Search" and "News Notification"
Job Calendar
- User can add note in modal solution
- In some date, user can see numbers of jobs and notes.
- Click on them will show the tooltips
- Current tooltips solution divided by tab, how you present it?
Recent Bid
- This portlet will use table solution
- User can sorted by click top header. Need you think how current active sorting looks
Quick Search
- There's 2 options when user do quick search: "Search for Bids" and "Search for Jobs"
- Match the form for those 2 options
- Use standard browser base style
News and Notification
- This portlet will show list of quick news and notification
- Maybe we can add some way to give clear difference for news or notification?
3. Jobs
- This will be landing page of Jobs page. Should the filter and table be empty by default? Need your thoughts here.
- Filter placed on top of page
- "Branch", "District", "Region" and "Job" need use multi select dropdown
- Below filter need show table and main actions of Jobs page.
- Any ideas to improve the filter and table user experience?
4. Job Search Result
- This screen show after input filter and then click "Filter" button
- Click Job ID will take to Job detail page
- Click or Hover at Customer ID will show floating tooltips
- Click delete button need show modal confirmation
5. Job Details
- This page show 2 tabs of "Job Details" tab and "Bids" tab
Job Details Tab
- Main action buttons for Job Details tab: "Edit Job", "Delete Job", "Print" and "Export"
- User can navigate between "Job Overview" and "Bidders List"
- On each row, user can see tooltips of related information
- Click customer name will show quick info on tooltips style
- Bidders List tab consist of table information.
- Notice the filter function on this tab.
- Delete Job need modal
- Print job button = need modal confirmation with some options
- Then user can see options when do export by PDF or EXCEL
6. Create Job
- When user create job, they will present with wizard form.
- User can cancel and save the job.
- There will be undo and redo feature
- How error validation looks?
- Notice each row show the help tooltips
Step 1: Job Overview
- The "Customer" field is an auto-suggest input field. A list of suggestions will be displayed according to the user's input.
- how datepicker designed?
Step 2: Bidders List
- The "Bidder Name" field is an auto-suggest input field.
- User can add more and delete bidder, how you suggest the flow?
7. Edit Job
- This page will show "editable" version of Job Detail page
- Notice that on Bidders List, user will see all row can edited
Target User
- Current Customer
- Potential Customer
Judging Criteria
- How well you design new Corningstone Application.
- 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.