Challenge Summary
Welcome to “Manufacturing Execution System UI Design Challenge”, where we are looking to impress our customer with a fresh, clean and modern re-design of 3 key screens from their existing MES application.
As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round
CHALLENGE OVERVIEW
This is the initial design exploration challenge of a very large web based application for a client which is a global leader in developing and producing responsible packaging for food, beverage, pharmaceutical, medical, home- and personal-care, and other products. So we need your great design skills and professional experience to improve the user experience of the required screens while still making them look clean, easy to use and modern.
AUDIENCE
Current Manufacturing Execution System users
PERSONA
Matt: He is an Operator for the Manufacturing Execution System (MES).
USER STORY
OEE: Overall equipment effectiveness
MES: Manufacturing Execution System
SHIFT: Turn period of time
BM##: Blow Molding. Number of machine, ie: BM01, BM05, etc.
DESIGN GOALS & PRINCIPLES
Below are some of the goals:
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
Creativity: 10
1: barely new ideas
10: a utopic product but with features that can be fully implemented
Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 8
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application
Branding: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
BRANDING GUIDELINES
Open to any color and overall visual style.
Feel free to use a Placeholder logo for your UI design.
TARGET DEVICE
Desktop: 1366px width and height 768px
SCREEN REQUIREMENTS
1) Home Dashboard
The Current home page (shown here) is not very useful, we should consider an overview page similar to a Dashboard look & feel. This page should contain the following information:
• Overall status and current OEE of all the department in a form of a dashboard
• Adding Total Bottles Per Shift
• Overall downtime and performance report per BM machine
Sample data from the current screen can be found here. Please use it as a content reference.
A blow molding machine can have different status, such like:
• Uptime: Ready to be used
• Downtime: Could be for different reasons: Change Overs, Force Majeure, Lack of Sales, Non-Equipment, PReventative Maintenance, Startup / Shutdown, Trials
• Under Production: Active on current production (Molding).
The user on main overview page should be able to filter by:
• Current Shift
• Previous Shift
• Current Day
• Previous Day
• Custom Date
The overall look and feel of this Homepage, should be very graphical and chart style. Avoid simple UI with tables and typical layouts. Propose a modern look and feel with charts, and good highlight colors for better contrast. This will be used to give a high level view of the overall functionalities of the different machines.
2) Utilization
This screen is the one that most shop floor operators interact with, this is where they edit the downtime entries. You can see the current screen here. Considerations from this current screen:
Put the Edit event Button in a more accessible location
We don’t need the Batch size / default production rate / standard item showing
This page should show the OEE (Overall equipment effectiveness) as well as the history of events for the current shift, day, previous shift, current day, previous day or a custom range. Therefore, it should have a drill-down pareto graph, where you can toggle and view either the counts or the duration of the utilization states or reason groups. The drill down sequence should be in this form:
i) Utilization State (Running/Breakdown)
ii) Reasons: Change Overs, Force Majeure, Lack of Sales, Non-Equipment, PReventative Maintenance, Startup / Shutdown, Trials
It also should display the order information such as: order number, production qty and standard production rate. From the grid, the user should be able to select an “Unknown Downtime” reason and edit a new reason from a pre-defined list.
User can edit directly in line within the screen or on a separate editing screen, however this solution is up to you based on the best UX criteria for the flow. The editing areas would be: Utilization State and Reason (as mentioned previously), date and time.
3) Scheduled Downtime Flow
This page needs to be Integrated into the MES Web interface, with the ability to enter a downtime event with a button push and downtime type selection and then be able to end the Downtime event with a button push.
Think of this as a sort of “calendar” view, where users can plan, add and track “downtime” events: These are periods of inactivity, such as maintenance, machines shut down, lack of materials, etc.
There are basically two pages needed:
IMPORTANT
Keep things consistent. This means all graphics styles should work together
All of the graphics should have a similar feel and general aesthetic appearance
MARVEL PROTOTYPE
We need you to upload your screens to Marvel App
Please request for marvel app in the challenge forum
You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Adobe XD or Sketch or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
Stock Photos Name and Source Links from an allowed sources
Stock Art/Icons Name and Source Links from an allowed sources
Fonts Name and Source Links source from an allowed source
MarvelApp share link for review
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths.
- User interface design
- 3 desktop screen + interactions around
- New and modern look and feel + improved UX
Round 1
Submit your initial designs for the 3 pages to receive checkpoint feedbackAs part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs of the 3 pages with all checkpoint feedback implemented.As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round
CHALLENGE OVERVIEW
This is the initial design exploration challenge of a very large web based application for a client which is a global leader in developing and producing responsible packaging for food, beverage, pharmaceutical, medical, home- and personal-care, and other products. So we need your great design skills and professional experience to improve the user experience of the required screens while still making them look clean, easy to use and modern.
- The purpose of this project is to develop a web based application that will be used by operators and production supervisors to track and understand the efficiencies of the production lines.
- Through the utilization page, the application will also serve as the main interface for the operators to enter/edit downtime in real-time, pulling events from the machines.
- The application will be used at every manufacturing facility in North America as the main interface for Downtime tracking and maintenance scheduling.
AUDIENCE
Current Manufacturing Execution System users
PERSONA
Matt: He is an Operator for the Manufacturing Execution System (MES).
USER STORY
- Matt starts his shift on a day and he accesses this application to see how the overall machines are performing or if the previous shift partner reported a downtime situation on any of the machines.
- From his dashboard, Matt will see the overall performance report.
- He can access edit a downtime machine if the problem is fixed.
- Also, if he finds a new situation on any of the machines, he can create a new Downtime in order to quickly report a maintenance to get this fixed soon.
- Currently, the landing page or main dashboard does not provide too much information about what are the status for the machines, if something is downtime or not. This may cause delays on work time.
- The key is to provide the most simple and clean user experience so Matt and his work partners and production supervisors can see in real time the overall status and downtime reports.
OEE: Overall equipment effectiveness
MES: Manufacturing Execution System
SHIFT: Turn period of time
BM##: Blow Molding. Number of machine, ie: BM01, BM05, etc.
DESIGN GOALS & PRINCIPLES
Below are some of the goals:
- Elegant, clean, simple, user-centered look and feel with modern aesthetics
- Use color for visual comparison, and drill-down the data.
- The overall design and user experience should be improved in order to make it more intuitive and simpler.
- Crips and sharp UI elements
- Correct font sizing and contrast, all elements should be easy to read.
- How well does your design align with the objectives of the challenge?
- Any page shared as “Current screen” means to be used as content reference only. DO NOT Copy the layouts! We are looking to improve this.
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
Creativity: 10
1: barely new ideas
10: a utopic product but with features that can be fully implemented
Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 8
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application
Branding: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
BRANDING GUIDELINES
Open to any color and overall visual style.
Feel free to use a Placeholder logo for your UI design.
TARGET DEVICE
Desktop: 1366px width and height 768px
SCREEN REQUIREMENTS
1) Home Dashboard
The Current home page (shown here) is not very useful, we should consider an overview page similar to a Dashboard look & feel. This page should contain the following information:
• Overall status and current OEE of all the department in a form of a dashboard
• Adding Total Bottles Per Shift
• Overall downtime and performance report per BM machine
Sample data from the current screen can be found here. Please use it as a content reference.
A blow molding machine can have different status, such like:
• Uptime: Ready to be used
• Downtime: Could be for different reasons: Change Overs, Force Majeure, Lack of Sales, Non-Equipment, PReventative Maintenance, Startup / Shutdown, Trials
• Under Production: Active on current production (Molding).
The user on main overview page should be able to filter by:
• Current Shift
• Previous Shift
• Current Day
• Previous Day
• Custom Date
The overall look and feel of this Homepage, should be very graphical and chart style. Avoid simple UI with tables and typical layouts. Propose a modern look and feel with charts, and good highlight colors for better contrast. This will be used to give a high level view of the overall functionalities of the different machines.
2) Utilization
This screen is the one that most shop floor operators interact with, this is where they edit the downtime entries. You can see the current screen here. Considerations from this current screen:
Put the Edit event Button in a more accessible location
We don’t need the Batch size / default production rate / standard item showing
This page should show the OEE (Overall equipment effectiveness) as well as the history of events for the current shift, day, previous shift, current day, previous day or a custom range. Therefore, it should have a drill-down pareto graph, where you can toggle and view either the counts or the duration of the utilization states or reason groups. The drill down sequence should be in this form:
i) Utilization State (Running/Breakdown)
ii) Reasons: Change Overs, Force Majeure, Lack of Sales, Non-Equipment, PReventative Maintenance, Startup / Shutdown, Trials
It also should display the order information such as: order number, production qty and standard production rate. From the grid, the user should be able to select an “Unknown Downtime” reason and edit a new reason from a pre-defined list.
User can edit directly in line within the screen or on a separate editing screen, however this solution is up to you based on the best UX criteria for the flow. The editing areas would be: Utilization State and Reason (as mentioned previously), date and time.
3) Scheduled Downtime Flow
This page needs to be Integrated into the MES Web interface, with the ability to enter a downtime event with a button push and downtime type selection and then be able to end the Downtime event with a button push.
Think of this as a sort of “calendar” view, where users can plan, add and track “downtime” events: These are periods of inactivity, such as maintenance, machines shut down, lack of materials, etc.
There are basically two pages needed:
- Downtime overview: Calendar view with the different details along a determined period of time such as day, week or month. Content reference here and here.
- Add/Create Downtime Item: This could be a modal or separate screen (up to you, think of the best experience) where users can add items to the downtime overview. Content reference here.
IMPORTANT
Keep things consistent. This means all graphics styles should work together
All of the graphics should have a similar feel and general aesthetic appearance
MARVEL PROTOTYPE
We need you to upload your screens to Marvel App
Please request for marvel app in the challenge forum
You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Adobe XD or Sketch or Figma and saved as an editable layer
Declaration File
Declaration files document contains the following information:
Stock Photos Name and Source Links from an allowed sources
Stock Art/Icons Name and Source Links from an allowed sources
Fonts Name and Source Links source from an allowed source
MarvelApp share link for review
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths.
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.