RUX FSL Parts Management UX Design Challenge

Welcome to the RUX FSL Mobile App UX Design Challenge. In this challenge, we’re looking to create UX to Field Service Mobile app will include a time sheets feature out-of-the-box that makes time tracking easier to implement, and reduces the need for workers to switch between multiple apps.

Let us know if you have any questions!

What is the RUX Challenge?
The RUX (Rapid User Experience) challenge uses the same format as our famous LUX Challenge except it is not "Live" at an event. The RUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest companies in the world just how good your concept and user experience (UI/UX) design skills are.

RUX (Rapid User Experience) challenges are fast, fun, and have more chances for you to capture prize money!

Note: You do not need to have RUX challenge experience to join this challenge - Just jump in and give it a try! Make sure to follow the challenge details, the challenge forum and ask questions
Background
Companies need to track the time mobile workers spend on various tasks throughout the day so that they can pay the technicians accurately, analyze trends, and bill customers accurately. 

Mobile workers need to verify that their time is tracked accurately.

The Current Status is…
FSL - Timesheets - 0810
- FSL already provides a data model for time sheets and time entries
- Two previous explorations of time sheets for field service
- Current designs have been discussed with PM and engineering

RUX Challenge Timeline and Rolling Checkpoint
- Submission Start: Tuesday, 6th August 2019 at 19:00 EDT
- Rolling Checkpoint Start: Thursday, 8th August 2019 at 07:00 EDT
- Submission End: Friday, 9th August 2019 at 19:00 EDT

Note: Important Rolling Checkpoint Details
- @anthoneo will answer questions and provide Rolling Feedback as fast as possible
- You must watch the Forum for your feedback!
- All initial qualifying checkpoint submissions will win $50 (Only 8 potential submissions)

Full Description & Project Guide

1. Timesheets

• Using the screen designs from Salesforce as a basis for look and feel. But need to make modifications to meet client’s functionality requirements, different platform, and different screen sizes
• Need one of these versions for this:
  • Version 1a for Work Order related Timesheet Entries which only shows Timesheet Entries (and parent Timesheets) related to the Work Order that it is launched from. 
  • Version 1.b for Work Order related Timesheet Entries which only shows Timesheet Entries (and parent Timesheets) related to the parent Work Order of the Work Order Line Item that it is launched from. 
  • Version 2 for Non-Work Order related Timesheet Entries which shows all Timesheet Entries (and parent Timesheets) owned by the user
• Need to think about date display format for different users

2. Managing different Timesheet Entry types
new-time-sheet-entry.png

• When creating a new Timesheet Entry in Salesforce, there is a screen for the user to select which Record Type they need – This affects the fields that are displayed and the available values in drop down lists.
• We have three options:
  • Mirror this screen (feels like too much effort for the user)
  • Have two + icons on Version 2; one for each record type (need to think how they are easily distinguished)
  • We limit the entry type by version i.e. user can only enter Work-Related on Versions 1a and 1band can only enter Non- Work-Related on Version 2
  • Option 3 would be my preference but needs client approval
• Two types of timesheets are available Manual(classic) and Automatic(Timestamp- from to entry without stating the OT time classification) and the engineer needs to be directed to use the correct format or Single Timesheet Entry format with the classification and splitting out of times handled by Salesforce config and processes/triggers so have not included at this stage

3. Timesheet View (1 Week Period)
default-screen-week.png

• Default screen on open:
  • Remove all of the sections which have been crossed out
  • Add in navigation buttons to view previous/next timesheet (inactive when no previous/next)
  • Change “Submit” button to “Submit all” since the user will be submitting individual Time Sheet Entries not Time Sheets).  Sets all Time Sheet Entries for current Time Sheet with status ‘New’ to status ‘Submitted’ (updating both view and underlying records.  Pop up message/spinner (that covers the close icon) until database actions complete?
  • Will need an overlay with saving data message and/or spinner (should cover the close button)
  • Current day is highlighted
  • Should we also highlight current Timesheet?
  • Need to link to “Day View” – click on letter indicating day?
  • Make better use of vertical space.
  • Need to allow for more than 8 hours being logged per day
  • + icon opens new Timesheet Entry View (with Timesheet populated)
  • Depending on load times, may need an overlay with loading data message and/or spinner (should not cover the close button)
• Version 1a needs:
  • Current Work Order (in the header)
• Version 1b needs:
  • Current Work Order (in the header)
  • Current Work Order Line Item (in the header)
• Version 2 needs:
  • Stacked bar chart with different colours for WO related time and Non-WO related time 
  • Total hours at top should also be split into WO related time and Non-WO related time as well as an overall Total
  • Should have hours indicator for each section within the day as well as the Total e.g. 6hrs WO related, 2 hrs Non-WO related
  • Possibly 2 different + icons for WO and Non-WO related
• Note that Time entries go in 30 minute increments so hrs won’t necessarily be whole numbers

4. Timesheet View (alternative periods)
alternative-periods.png

• Need to show different layout options for Timesheets that are not 1 week
• Look at maximum number of column that comfortably to fit on each screen size
• Anything larger than maximum number has left/right scroll arrows

5. Timesheet View (alternative)
alternative.png

• This screen is in the SFDC slide deck but performs the same function as the Timesheet Views above.

6. Day View
day-view.png

• Fixed header at top
• Back icon opens Timesheet View for relevant Time Sheet
• Plus icon opens new Timesheet Entry with Timesheet and Date (of current day) populated
• Move plus button to top right so in same place as on Timesheet View
• Needs a “Submit All” button (in the same place as on Timesheet View). Sets all Time Sheet Entries for current day with status “New” to status “Submitted” (updating both view and underlying records). Popup message/spinner (that covers the close icon) until database action.
• Timesheet Entry list should appear on a vertically scrollable ‘day’ showing 24 hour period divided into 30 minute increments
• Only show 1 day on the screen
• Action icons for back/forward by 1 day in the header
• No requirement for ‘overflow’ where Timesheet Entry starts on 1 day and ends on the next - instead user will need to create two entries
• Each Timesheet Entry should be overlayed on the ‘day’ in the correct position and of the correct size so that gaps can be easily spotted
  • Do we need the Timesheet totals in the header?
  • Move today’s date and daily Totals into header?
• Version 1a needs:
  • Current Work Order (In the header)
• Version 1b needs:
  • Current Work Order (In the header)
  • Current Work Order Line Item (In the header)
• Version 2 needs:
  • Daily totals split into WO related time and Non-WO related time
  • Possibly 2 different + icons for WO and Non-WO related
• Colour code each entry by Status:
  • New - White
  • Submitted - Amber
  • Rejected - Red
  • Approved - Green
• Need to think about space required for smallest entry (30 minutes) and what information is displayed:
  • Think we can get rid of start/stop/length info as conveyed by size and position
  • Always display subject e.g. “Box Installation & Repair”
  • If space, display Type e.g. “Travel”, “On site”, etc
• Action icons on Timesheet Entry (do we have these as individual icons or off the 3 dot icon?):
  • View - opens Timesheet Entry View for the record
  • Edit (Only available on those with STatus “New” and “Rejected”) - opens Timesheet Entry New/Edit View for the record
  • Clone - opens Timesheet Entry New/Edit View for a new record with all data apart from start and end times pre-populated from current record
  • Submit (Only available on those with Status “New” and “Rejected”?. Do we only put this on the Timesheet Entry View and New/Edit screens? Popup message/spinner (that covers the close icon) until database actions complete.

7. Timesheet Entry View
entry-view.png

• Needs a header
• Needs a back icon that takes user to appropriate Day View
• Split Date out from Start and End Times
• See fields to display slides below for fields which will vary depending on Time Sheet Entry Type 
• Action icons:
  • Edit (Only available on those with Status “New” and “Rejected”) - opens Timesheet Entry New/Edit View for the record
  • Submit (Only available on those with Status “New” and “Rejected”?) - sets Status to ‘New’, Saves record and returns user to Day View . Pop up message/spinner (that covers the close icon) until database actions complete?
  • Clone – opens Timesheet Entry New/Edit View for a new record with all data apart from start and end times pre-populated from current record

8. Timesheet New/Edit View
new-edit-view.png

• Needs a header
• NO CLOSE ICON!
• Split Date out from Start and End Times
• See fields to display slides below for fields which will vary depending on Time Sheet Entry Type 
• Action icons:
  • X (back) icon that returns the user to the previous screen (Timesheet View or Day View) without saving changes.  Do we need a warning pop-up if changes made?
  • Save icon. Validates entries.  If invalid (required fields not completed) displays error message (highlights fields?).  If valid, sets Status to ‘New’, Saves record and returns the user to the previous screen (Timesheet View or Day View) 
  • Save and Submit icon.  As per Save but sets Status to ‘New’, ‘Submitted’

9. Timesheet Entry Fields - Work Order Related
work-order-related.png

• Timesheet:
  • Auto populated so no requirement for input
  • Either don’t or display in header
• Subject
  • Required field
  • Text Entry (Input) Max 255 Characters
• Description
  • Text Entry (Text area) Max 32000 Characters
• Time Entry Type
  • Required field
  • Dropdown list with values dependent upon Timesheet Type
• Date
  • Only have one entry field for both start and stop (populated for both in background)
  • Required field
  • Date picker (or dropdown?) but only show dates that are relevant to current Timesheet (based on start/end dates of Timesheet)
  • Auto populated when New/Edit View launched from Day View (and locked?)
• Start Time
  • Required field
  • Dropdown list showing 30 minute incremental times
  • Locked until Date populated
  • Cleared if Date changed
  • Only show available slots (those that are not already covered by an existing Timesheet Entry)
• End Time
  • Required field
  • Dropdown list showing 30 minute incremental times
  • Locked until Start Time populated
• Work Order
  • Required field
  • Pre-populated on Versions 1a and 1b so no entry required (display in header?)
  • If requirement to enter Work-Related time on Version 2 (options 1 and 2) then needs to be a dropdown list or popup search box (depending upon likely number of entries) for all Work Orders owned by user.
• Work Order Line Item
  • Required field
  • Pre-populated on Version 1b so no entry required (display in header?)
  • For Version 1a and potentially 1b, needs to be a dropdown list or popup search box (depending upon likely number of entries for all Work Orders Line items related to current Work Order (above)
  • If needed on Version 2, is locked until Work Order is populated and is set to null when Work Order Changed.
• We seem to be missing a field for Approver's comments that will only be displayed on Timesheet Entries that have status ‘Rejected’

10. Timesheet Entry Fields - Non Work Order Related
non-work-order-related.png

• As per Work-Order-Related but without:
  • Work Order
  • Work Order line item
• We seem to be missing a field for Approver’s comments that will only be displayed on Timesheet Entries that have status ‘Rejected’

Importante Note
- Please provide a form of styling guide - this is important!
- Ideally we want to use icons wherever possible to indicate functionality to reduce/eliminate requirements for translations
- 64x64 pixel icon (please check here to get the range of example of the icons to be produced)
- We’ll need launch icons for use within Pulsar for each page

Screen Sizes
Note: Focus is mobile screens only:
- 640 x 1136 pixels (iPhone 5)

Presentation Screen - 1920x1080 (16:9 Ratio)
- In a RUX challenge, this screen is the way to showcase your concept so keep it simple and make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.

Marvel Prototype
- We need you to upload your screens to MarvelApp.com
- Please request for your MarvelApp prototype in the respective thread in the forum (or) send your request to contato@luizrrodrigues.com.br
- You MUST include your MarvelApp 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).

Judging Criteria
- Your submission will be judged on the following criteria:
- Uniform, linked, flow, easy to navigate and understand
- Scalable - expand to the rest of the app screens
- Feels warm, rather than too commercial
- Don't copy the provided wireframes/designs,

Target Audience
- Mobile workers need to track their time throughout the day, and review time sheets for accuracy before submitting.
- Managers need to approve or reject time sheets.
- Admins need to configure appropriate time sheet settings.
- The system needs to generate estimates for time entries so that technicians do as little data entry as possible.

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 image files based on the Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
 
Source Files
- All source files of all graphics created in either Adobe Photoshop, Illustrator, XD or Sketch and saved as an editable layer

Final Fixes
- This RUX might have final fixes