Challenge Summary
The client for this project runs a business where they fill and ship containers of liquid helium. The current process of planning and scheduling container fills and shipments is partially done via their existing web application (ASP.NET 3.5), but it also includes manual steps. The goal for this project is to build a new Production Planning web application that works with the existing web app and removes the manual steps in the process of creating the “Fill and Ship” schedule.
For this challenge, we need you to create a Web Design (Storyboard) for the new Production Planning web application.
We look forward to seeing your creative designs!
Round 1
Round 1 will focus on the following screens from the Wireframes:
1) Logistics Planner - Dashboard (pop out window is NOT required for Round 1)
2) Logistics Planner - View/Edit Production Schedule (pop out window is NOT required for Round 1)
3) Plant Employee - View/Export/Print Ship and Fill Schedule - Option 1
NOTE: See the Wireframes to understand the screens / functionality. Additional descriptions of these screens are also included in this challenge spec.
Round 2
In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback). For Round 2, you must also include the all following screens from the existing application (see attachment "Praxair Screens.zip"):
1) Logistics Planner - Dashboard (including pop out window)
2) Logistics Planner - View/Edit Production Schedule (including pop out window)
3) Plant Employee - View/Export/Print Ship and Fill Schedule - Option 1
4) Plant Employee - View/Export/Print Ship and Fill Schedule - Option 2
NOTE: See the Wireframes to understand the screens / functionality. Additional descriptions of these screens are also included in this challenge spec.
Primary Goals
The goal for this project is to build a new Production Planning web application that works with the existing web app and removes the manual steps in the process of creating the “Fill and Ship” schedule. For this challenge, we need you to create a Web Design (Storyboard) for the new Production Planning web application (based on the Wireframes provided).
As this is an application module within an already existing enterprise logistics/operations system, the design should blend into the current system. That being said, as the current system is coming up on 10yrs old (with iterations being done regularly), so we wouldn’t mind if more modern elements are used in the design. The current trend being “flat” is OK with us.
We are asking for a two monitor design. On a click, an scheduling dashboard will pop out to a different window. This extra “pop out” window will not need to adhere to the current system’s master page and can use all available real-estate to display relevant details to help the scheduler plan. This window’s widgets should update when the schedule does something so he can see the impact on systems based on a particular schedule he’s producing. On the home monitor, the actual schedule where the planner is placing orders for fill or ship, the main master page must apply. This monitor will handle all interactions with the system except for that “popped out” data dashboard.
Project Description
The client for this project runs a business where they fill and ship containers of liquid helium. The current process of planning and scheduling container fills and shipments includes manual steps, such as adding data to Excel files. For this project, the client is looking to create a web application that fits into their existing system and can be used to eliminate these manual steps and streamline the process of production planning for their liquid helium business.
The existing logistics planning system uses a combination of manual processes, including data from paper/excel spreadsheets and live data in the client’s existing production logistics system. This current logistics system collects data from existing, client facing systems and orders entered via an order entry system. All of this data will need to be consumed by the new web application.
On a weekly basis in the current process (or somewhat real-time when conditions change), logistics personnel will gather data from multiple different sources and make a draft schedule. If everything appears good with that draft schedule, they will create a “fill and ship” schedule to deliver to the client’s plants. This schedule tells the plant employees what container to fill, for which customer, and when to ship it. The plant employees are sent repeated schedules if there are any changes from unforeseen conditions.
The new web application will need to integrate with the existing systems and fill in the gaps where manual steps are currently involved. The end product produced by the system will be the fill and ship schedule.
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 web application (the new Production Planning web application).
- As mentioned earlier, the main planning page must adhear to the master page of the main application, the "pop out" window can take up an entire screen.
- As for color requirements, please stick to the greens and black that makes up the current system (#6FA100 is the darkest green in the current system header - see attached screenshots). Any shades of green should be ok really for primary colors.
- 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 1920x1080 pixels wide screen resolution. Logistic planners (users of the system) will have two 24" monitors at their workstations to view the application on. The resolution is 1920x1080 for both monitors. This means they will have the ability to view two screens at the same time side-by-side.
- The client would like you to please stick to the greens and black that makes up the current system. Any shades of green should be ok really for primary colors.
- 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.
- 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 start.html).
Project Documentation:
1) Wireframes (attached) - Screens from the existing application. Your Storyboard Design should be based on this.
2) Existing App Screen Shots.docx: Screenshots from the existing application.
Target Audience
Users of the existing Production Planning 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.