Challenge Summary
Welcome to the "Swinerton Incident Tracker Mobile App Design Challenge". In this challenge, we are looking for the best UI/UX for our new mobile application to track craft employee incidents as they occur in real time in the field. We are open to your creative and innovative ideas!
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
00. App Launcher Icon
01. Home Screen (2 variations)
02. Incident Entry Screen
03. Incident Selection Screen
04. Incident Severity Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
00. App Launcher Icon
01. Home Screen (2 variations)
02. Incident Entry Screen
03. Incident Selection Screen
04. Incident Severity Screen
05. Employee Search Screen
06. Employee Search Result Screen
07. Project Search Screen and Search Result
08) Others Features
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We want to build a Mobile application to track craft employee incidents as they occur in real time in the field. This app will provide a place where employee performance incidents can be easily entered and tracked so that this data is available to streamline our termination process when needed.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Mobile Design App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Design Requirements
Target devices:
- iPhone: 750x1334px (@2x)
- Android: 1080x1920px (@3x)
Marvel App
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Refer to the attached branding guidelines and logos for styling. A neutral logo incorporating the stripe element would be preferred.
- Check "SWN_Identity Elements 6.22.17.pdf" & "Brand Graphic System.pdf"
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=613205
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts. Please refer to "Incident Tracker App Details_2.pdf" for more details about the information needed on each screen. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
00) App Launcher Icon
- Create app launcher icon for this app
- It should be simple and reflect the app's value
- iPhone App launcher icon: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
- Android App launcher icon: https://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
01) Home Screen (2 variations)
- By default, this screen will appear every time user launch the apps.
- There will be two different user access for a home screen:
OPTION 1 – High Clearance
- Only a subset of users will have access to these features for confidentiality purposes.
- Therefore the app will require security group capabilities for only two groups – "High Clearance" and "Regular."
- "High Clearance" group members will include all Self-Perform leaders and the Craft Services team.
- Screens for "High Clearance" group will have the following button option(s):
-- Enter Incident (to enter a new incident)
-- Search for Employee (to search the database for a specific employee to see all of the incidents recorded for that employee)
-- Search for Project (to search the database for a specific project to see all of the incidents recorded for that project)
OPTION 2 – Regular
- All remaining users will only have access to enter incidences. This screen will have the following button option(s):
-- Enter Incident (to enter a new incident)
02) Incident Entry Screen
- The person entering the incident will type in the following information (with the option to voice record) for the employee who the incident is being recorded on:
-- Employee's Last Name
-- Employee's First Name & Middle Initial (if the middle initial is known)
-- Job Number the incident occurred on
- The person entering the incident will then select from the drop down menu whether it is a performance-related issue or a safety related issue (there is the potential to add more categories – just trying to keep it simple).
- Also to be considered, an entry box for the employee’s email address who is entering the incident if they would like an email confirmation of the full entry details upon completion.
- Then hit the “Next” button.
03) Incident Selection Screen
- The person entering the incident will select from a pre-determined menu of potential incident options (a group of Swinerton Ops people can decide what the most common are) or select "Other" and type in a brief explanation of the issue in the pop-up box. More than one can be selected. The person entering the information can also take a picture or video if applicable to store with the incident.
- For the "Safety" category, the most common options could include:
-- Not Wearing PPE
-- Improper / Dangerous Use of Tools
-- Not Following Safety Procedures for Work Being Performed
- Again, this can be determined by a group of Ops people what the most common issues are that occur.
04) Incident Severity Screen
- The person entering the incident will select how severe they deem the incident to be. ONLY one can be selected. If the person selects "High" or "Critical", they could be prompted in a pop-up box to briefly explain why they felt it was so severe.
- Then the person entering the incident will select whether or not they notified the employee verbally or in writing of the offense. All "No" selections will be a flag to the Craft Services team that they will facilitate notification to the employee of the incident.
- Then the person hits "Submit" and the incident is stored in the application's database.
- DONE.
05) Employee Search Screen
- The person would enter the following information for the employee they are looking for incident history on:
-- Employee's Last Name
-- Employee's First Name
-- Current Job Number for the project or
-- one of the projects the employee is currently working on (if known)
- Then hit the "Search" button.
- Results will return a list of potential employees based on the search fields that the person could have been looking for. They will select the one that seems like the appropriate match.
- We will need to discuss search features and results with the application developer. This will be an interesting aspect if we do not integrate with our current systems.
06) Employee Search Result Screen
- The screen would show a scrollable list of the incidents associated with that particular employee with the immediate details. Buttons will be made available to click through to see additional details like photos or videos and additional typed information that was entered in any pop-up boxes.
07) Project Search Screen and Search Result
- The idea is that the Project Search functionality would work similarly to the Employee Search. On the home screen, the person would hit the “Search for Project” button. The next screen would be a simple prompt for a job number (since these are all unique to only one job). The results returned would show all incidents, with employee names, associated with that job number in the application’s database.
08) Others Features
- What else that you think is needed for this platform?
- Show us your ideas and creativity!
Important:
- DO NOT COPY the wireframes, it should be used as your references only
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
- Brand Graphic System.pdf
- Incident Tracker App Details_2.pdf
- SWN_Identity Elements 6.22.17.pdf
Target Audience
There will be two types of users for this application:
- Users that are provided to create and enter incident report only.
- Users that will have access to enter and view all incidents entered.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
Final Fixes
- As part of the final fixes phase, you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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 checkpoint feedback.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a checkpoint feedback (iPhone and Android version)00. App Launcher Icon
01. Home Screen (2 variations)
02. Incident Entry Screen
03. Incident Selection Screen
04. Incident Severity Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final design plus checkpoint feedback (iPhone and Android version)00. App Launcher Icon
01. Home Screen (2 variations)
02. Incident Entry Screen
03. Incident Selection Screen
04. Incident Severity Screen
05. Employee Search Screen
06. Employee Search Result Screen
07. Project Search Screen and Search Result
08) Others Features
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We want to build a Mobile application to track craft employee incidents as they occur in real time in the field. This app will provide a place where employee performance incidents can be easily entered and tracked so that this data is available to streamline our termination process when needed.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Mobile Design App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Design Requirements
Target devices:
- iPhone: 750x1334px (@2x)
- Android: 1080x1920px (@3x)
Marvel App
- Upload your screens to MarvelApp for review and to showcase the experience (ask for MarvelApp prototype/project from copilot or PM in challenge forum)
Branding Guidelines
- Refer to the attached branding guidelines and logos for styling. A neutral logo incorporating the stripe element would be preferred.
- Check "SWN_Identity Elements 6.22.17.pdf" & "Brand Graphic System.pdf"
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=613205
Required Pages/Features
For this challenge, we are looking for the below pages to be designed/considered in your concepts. Please refer to "Incident Tracker App Details_2.pdf" for more details about the information needed on each screen. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
00) App Launcher Icon
- Create app launcher icon for this app
- It should be simple and reflect the app's value
- iPhone App launcher icon: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
- Android App launcher icon: https://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
01) Home Screen (2 variations)
- By default, this screen will appear every time user launch the apps.
- There will be two different user access for a home screen:
OPTION 1 – High Clearance
- Only a subset of users will have access to these features for confidentiality purposes.
- Therefore the app will require security group capabilities for only two groups – "High Clearance" and "Regular."
- "High Clearance" group members will include all Self-Perform leaders and the Craft Services team.
- Screens for "High Clearance" group will have the following button option(s):
-- Enter Incident (to enter a new incident)
-- Search for Employee (to search the database for a specific employee to see all of the incidents recorded for that employee)
-- Search for Project (to search the database for a specific project to see all of the incidents recorded for that project)
OPTION 2 – Regular
- All remaining users will only have access to enter incidences. This screen will have the following button option(s):
-- Enter Incident (to enter a new incident)
02) Incident Entry Screen
- The person entering the incident will type in the following information (with the option to voice record) for the employee who the incident is being recorded on:
-- Employee's Last Name
-- Employee's First Name & Middle Initial (if the middle initial is known)
-- Job Number the incident occurred on
- The person entering the incident will then select from the drop down menu whether it is a performance-related issue or a safety related issue (there is the potential to add more categories – just trying to keep it simple).
- Also to be considered, an entry box for the employee’s email address who is entering the incident if they would like an email confirmation of the full entry details upon completion.
- Then hit the “Next” button.
03) Incident Selection Screen
- The person entering the incident will select from a pre-determined menu of potential incident options (a group of Swinerton Ops people can decide what the most common are) or select "Other" and type in a brief explanation of the issue in the pop-up box. More than one can be selected. The person entering the information can also take a picture or video if applicable to store with the incident.
- For the "Safety" category, the most common options could include:
-- Not Wearing PPE
-- Improper / Dangerous Use of Tools
-- Not Following Safety Procedures for Work Being Performed
- Again, this can be determined by a group of Ops people what the most common issues are that occur.
04) Incident Severity Screen
- The person entering the incident will select how severe they deem the incident to be. ONLY one can be selected. If the person selects "High" or "Critical", they could be prompted in a pop-up box to briefly explain why they felt it was so severe.
- Then the person entering the incident will select whether or not they notified the employee verbally or in writing of the offense. All "No" selections will be a flag to the Craft Services team that they will facilitate notification to the employee of the incident.
- Then the person hits "Submit" and the incident is stored in the application's database.
- DONE.
05) Employee Search Screen
- The person would enter the following information for the employee they are looking for incident history on:
-- Employee's Last Name
-- Employee's First Name
-- Current Job Number for the project or
-- one of the projects the employee is currently working on (if known)
- Then hit the "Search" button.
- Results will return a list of potential employees based on the search fields that the person could have been looking for. They will select the one that seems like the appropriate match.
- We will need to discuss search features and results with the application developer. This will be an interesting aspect if we do not integrate with our current systems.
06) Employee Search Result Screen
- The screen would show a scrollable list of the incidents associated with that particular employee with the immediate details. Buttons will be made available to click through to see additional details like photos or videos and additional typed information that was entered in any pop-up boxes.
07) Project Search Screen and Search Result
- The idea is that the Project Search functionality would work similarly to the Employee Search. On the home screen, the person would hit the “Search for Project” button. The next screen would be a simple prompt for a job number (since these are all unique to only one job). The results returned would show all incidents, with employee names, associated with that job number in the application’s database.
08) Others Features
- What else that you think is needed for this platform?
- Show us your ideas and creativity!
Important:
- DO NOT COPY the wireframes, it should be used as your references only
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
- Brand Graphic System.pdf
- Incident Tracker App Details_2.pdf
- SWN_Identity Elements 6.22.17.pdf
Target Audience
There will be two types of users for this application:
- Users that are provided to create and enter incident report only.
- Users that will have access to enter and view all incidents entered.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
Final Fixes
- As part of the final fixes phase, you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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 checkpoint feedback.
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.