Cycle Time Mobile App Design Challenge

Welcome to "Cycle Time Mobile App Design Challenge". In this challenge, we need your help to create the best possible UI/UX for our 'Cycle Time' mobile application where user will be able to observe, record, and tracking their employee activities within their company/shop/store and gather statistical report in order to gather necessary information for further usage (education, set a SOP, etc). 

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
03) Dashboard/Landing Screen
04) Project Dashboard Screen
05) Project Detail Screen
06) Task Observation Mode Screen
07) Reporting 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Introduction (On-boarding) Screen
02) Registration and Login Screen
03) Dashboard/Landing Screen
04) Project Dashboard Screen
05) Project Detail Screen
06) Task Observation Mode Screen
07) Reporting Screen
08) Help Screen
09) Setting Screen
- 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.)
BACKGROUND OVERVIEW

• This project is to create an app that can be used both as an educational tool, and a practical tool to assist staff to monitor and understand cycle times, a motion use of observed works. 
• Basically, we will create a fancy lap timer application, but with a data structure built inside the application where the result of each of the individual observation sessions roll up statistically to affect the anticipated task, process and project completion duration. 
• This application, in general, will be able to:
  • Apply statistical, lean methodology in the mapping value chain (project) for either industrial, engineering or construction process
  • Define Project, process, and tasks
  • Record the actual time it takes to complete a task, will require multiple replicates (observations/samples)
  • Report on project performance at multiple levels 
  • Provide a fun and engaging way for project engineers and supervisors to learn how to perform time and motion studies, and assist a project to increase performance on both cyclic and non-cyclic repetitive tasks
  • Provide projects with a  simple way to provide near real-time process efficiency KPIs, and ensure the concepts of flow, single piece flow, and resource and flow efficient execution

USER FLOW

• A user should be able to set up new projects, define a number of processes within each project, and then set up a series of sequential tasks (steps) within each process 
• Once this Project, Process, and Tasks are defined, with all their appropriate meta-data such as qty, units of measure, and target cycle times, the user can then use the built-in lap timer tool within the app to collect actual cycle time information for both cyclic, and non-cyclic tasks they are observing
• Once data is collected reports can be prepared at the task, process, and whole of project level that compare observed cycle times, with planned 
• These reports can be emailed with their associated data (xls) for further analysis. 

CHALLENGE GOAL

• The goal of this challenge is to develop UI/UX for our new Cycle Time application that able to explain the whole process in detail

DESIGN CONSIDERATION

• Modern, Fresh, Clean, Professional, and Intuitive look and feel
• Simplicity to find any necessary information 
• Needs to offer a great focus to the user
• Best Practice for Mobile Application design
• Easy to understand the flow from page to page
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

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=677656

SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. 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.

01) Introduction (On-boarding) Screen

• Think of the best way to marketing the application purpose to a potential user
• Show benefit of using the application to the user
• Show simplicity of using this application to the user
• Ability to skip the introduction and information that user can view it later from the Help screen

02) Registration and Login Screen

• User needs to have an account before able to use the application
• User will be able to register online in order to gain access to the application
• Basic registration form (personal information, email, create login information)
• Ability to register using social media
• Ability to login via ordinary login form (email), social media, or SSO
• Needs Login error scenario

03) Dashboard/Landing Screen

• The dashboard screen needs to be intuitive and able to give the user quick access to all features in the application
• User will be able to see his log activity from this screen
• Access to all application features (main navigation, quick access to start action, etc)
• Latest Project activity
• Statistic of existing projects
• Notification section where user can be aware of any recent activity in the app 
• Show any Pending item that needs user action?
• Other user activity in some of the projects?
• Report list?
• User will have access to invite other users from the dashboard

04) Project Dashboard Screen

• User will be able to see all existing projects from here
• Ability to create a new project
• Edit existing project
• Delete existing project
• Quick access to start Process, Tasks from any projects

05) Project Detail Screen

• User will be able to see Project detail information from this screen
• In this screen, the user will be able to perform value chain mapping (limited to sequential tasks only at this stage)
• Ability to identify performance at the project, process and task level and compare with target performance as defined by the tender budget
• User will be able to interact and do some action in the project 
• Define Project, process and task attributes
• Set Process attributes:
  • Create/Enter Category
  • Select Category
• Set Project Resource attributes:
  • Person
  • Machine
  • Details
  • Comment
• Ability to create/start new Task
• Ability to view Task record/statistic time
• Ability to edit existing Task in the project
• View Reports

06) Task Observation Mode Screen

• This screen is the most important where user will be able to gather and collect data based on repetitive tasks performed by their internal employees
• In this screen, the user will be able to determine the 'Cycle Time'. Cycle time is an observation of the time it takes to complete a single repetition of a task, multiple tasks repetitions are observed in order to build up a statistically valid population of task performance
• Multiple sessions need to be created to capture observations at random periods, (observation sessions), user can select most recent, max, min or average of sessions to report up to process and project level reports
• Measures of performance are: Min, Max, Mean Medium, Count and Total
• User will be able to start the Task Observation Mode to observe and record the employees, think of a Stopwatch but with more complex features. 
• User can perform the following action in 'Task observation Mode':
  • Task observations mode - Lap
  • Task observations mode - Repeat
  • Task observations mode - Incremental
  • Record screen/Timer Interaction
• See This video for the simulation of Task Observation Mode

07) Reporting Screen

• Cycle time data is reported via various table, and value chain mapping diagrams
• Export Reporting output to 3rd party application (Excel)
• The report needs to have the following output:
  • Summary of process task times
  • Summary of process times
  • Summary of project times
  • Cycle time Total - Project
  • Cycle time Total - Process
  • Cycle time Total - Task
  • Mean
  • Std Deviation Processes
  • Sample Count
  • Minimum
  • Maximum
  • Mode
  • Median
  • Cycles per Minute
  • Cycles per Hour
  • Graph results - Project
  • Graph results - Process
• Ability to send/share the report via email
• Please refer to “Sample Lean Methods Analysis.pdf” for the type of chart and graph and reporting that we want to see in this screen.

08) Help Screen

• This screen will provide information on how to use this application effectively and the benefit to use this application via: 
  • User Guide manual document
  • List of FAQ
  • Introduction (from onboarding screen, where user can view it later)
  • Videos

09) Setting Screen

• General setup to any items related to the application
• Meta-data such as Qty, Units of measure, and Target cycle times
• Etc

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
 
REFERENCES (DO NOT COPY!)

• https://www.youtube.com/watch?v=G18LDq9eXrs  (Why do we need this app)
• https://play.google.com/store/apps/details?id=com.avafab.cycletimepro.app&hl=en_US  (An app that is already in play store for inspiration, our app would need more features specific to construction)
• http://goo.gl/GNWea1  (simulated version of the cycle time pro app)

 
MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
• 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/comments this link while you upload)

 
BRANDING GUIDELINES

• Follow our Branding Guidelines 

DOCUMENTATION

• Sample Lean Methods Analysis.pdf (this is actually document for another project, but it explains the need for the app including the types of graphs and reports the client is looking for)

TARGET DEVICE

• Mobile Device: 1080px x 1920px (iPhone 8 Plus)

TARGET AUDIENCES

• Internal Employees 

JUDGING CRITERIA
Your submission will be judged on the following criteria:

• Overall idea and execution of concepts
• How well does your design align with the objectives of the challenge
• Execution and thoughtfulness put into solving the problem
• The overall design and user experience
• Cleanliness of screen design and user flow
• Ease of use

 
SUBMISSION AND 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 image files based on Challenge submission requirements stated above 
• Marvel App link for review and to provide feedback

 
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as editable layer
 
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colours.