FSL Tree Structure Design Challenge

Welcome to "FSL Tree Structure Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for Tree Structure View and related screens.

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
1) Tree Structure View

Round 2

Submit your Final Design plus Checkpoint Updates
1) Tree Structure View
2) Search View
3) Asset Detail View
4) Location Detail View
BACKGROUND OVERVIEW
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.

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.

Notes:

• Keep same overall look and feel as Timesheets
• Need two versions of this:
• Version 1 launched from Work Order
• Version 2 launched from Work Order Line Item

1) Tree Structure View
screen-01.png

• Close Icon
  • Fixed
• Header
  • Fixed
  • Site (ultimate parent location) name
  • Current WO (clicking on opens WO native Pulsar screen)
  • Current WOLI (version 2 only - clicking on opens WOLI native Pulsar screen)
  • Currently selected Asset/Location (if any)? Clicking on opens Asset or Location detail view?
  • Show/hide info icon that shows/hides the above 3 as they will take up valuable screen space?
  • Search Icon (opens search box)
  • Expand/collapse all icon? (expand/collapse whole tree)
• Tree Structure
  • screen-01b.png
  • Vertically scrollable
  • Tree structure displaying parent/child hierarchy
  • Within the same level, Locations listed first followed by Assets (both sorted alphabetically)
  • Locations and Assets are represented by different icons
  • Locations and Assets that have children have an expand/collapse icon
  • Clicking on the icon will expand/collapse that level
  • Version 1 will initially have all collapsed
  • Version 2 that has a linked Asset on the WOLI will have all parents of that Asset expanded and the Asset scrolled into view
  • Potentially width for each Asset/Location and have horizontal scroll capability (scroll left/right icons)
  • If Asset/Location names exceed width then truncate with … following
  • Field(s) to use for Asset/Location names TBC
  • Need icons or vertical 3 dot icon on each line for the following actions:
    • Open record (native Pulsar screen)
    • Add child Location - launches new record native Pulsar screen for Location with parent Asset or Location populated)
    • Add child Asset - launches new record native Pulsar screen for Asset with parent Asset or Location populated)
  • Clicking on an Asset will open the Asset detail screen
  • Clicking on a Location will open the Location detail screen

2) Search View
screen-02.png

• Close Icon
  • Fixed
• Header
  • Same as for Tree Structure but also shows a Search entry box and replaces Search icon with Tree icon
  • Clear icon to clear entry in Search entry box
  • Automatically hide info (current WO/WOLI/Asset)?
  • Filters? Initially we thought of Product Type, but the list will be too long. Probably not.
• Search Results
  • After at least 3 characters have been entered in the Search entry box, displays matching search results as the user types
  • Search results to look identical to Tree Structure lines, but with no hierarchy, expand/collapse icons, or indentation. All will be full width
  • Fields to be included in search TBC

3) Asset Detail View
screen-03.png
Consider displaying this to right of Tree Structure or Search on larger screen widths.
Elements:

• Close icon
  • Fixed
• Header
  • Same as Tree Structure but also shows Tree icon (clicking on opens Tree Structure View all parents expanded and current Asset scrolled into view)
  • Automatically hide info (current WO/WOLI/Asset)?
• Breadcrumb
  • Displays breadcrumb trail of parents
  • Clicking on a breadcrumb opens the appropriate Asset or Location details screen
  • If breadcrumb is too long, truncate so only show X levels above current Asset with a leading …
• Asset Detail
  • Displays a number of fields TBC for the Asset
• Direct children TBC (Is this needed? Ignore if we don’t have enough screen space)
  • Vertically scrollable
  • Displays direct child Locations and Assets (Locations first)
• Action icons
  • Match the look and feel of icons at bottom of Timesheet on SFDC supplied screens?
  • Consist of:
    • Open record (native Pusar screen)
    • Add child Location - launches new record native Pulsar screen for Location with parent Asset or Location populated)
    • Add child Asset - launches new record native Pulsar screen for Asset with parent Asset or Location populated)
    • Add to WOLI - adds current Asset/replaces existing Asset with current Asset on current WOLI (version 2 only). Do we need a warning pop up if replacing?
    • Create WOLI - launches new record native Pulsar screen for Location with Asset and WO populated)
    • Exchange an Asset - launches new record native Pulsar screen for Asset with parent Asset or Location populated. On save:
      • Updates all child Assets/Locations to have new Asset asparent
      • Sets current Asset to decommissioned
      • Removes current Asset from hierarchy (sets lookups to parent Asset / Location to null)
      • Updates the view (replaces data for current Asset with that for new Asset)
      • Need a model pop-up which covers close button until all updates complete

4) Location Detail View
screen-04.png
Consider displaying this to right of Tree structure or Search on larger screen widths
Elements:

• Close icon
  • Fixed
• Header
  • Same as for Tree structure but also shows Tree icon (clicking on opens Tree structure view with all parents expanded and current Asset scrolled into view)
  • Automatically hide info (current WO/WOLI/Asset)?
• Breadcrumb
  • Displays breadcrumb trail of parents
  • Clicking on a breadcrumb opns the appropriate Asset or Location detail screen
  • If breadcrumb is too long, truncate so only show X levels above current Asset with a leading …
• Location Detail
  • Displays a number of field TBC for the location
• Direct children TBC (is this needed? Ignore if we don’t have enough screen space)
  • Vertically scrollable
  • Displays direct child Locations and Assets (Locations first)
• Actions icons
  • Match the look and feel of icons at bottom of Timesheet on SFDC supplied screens?
  • Consist of:
    • Open record (native Pulsar screen)
    • Add child Location - launches new record native Pulsar screen for Location with parent Asset or Location populated)
    • Add child Asset - launches new record native Pulsar screen for Asset with parent Asset or Location populated)

Important:
- Keep things consistent. This means all graphics styles should follow a set pattern.
- 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 send your marvel app request to contato@luizrrodrigues.com.br (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).
 
TARGET DEVICES
- Mobile: 750px x 1334px (iPhone 6+)

TARGET AUDIENCES
- 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.

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 & 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
- MarvelApp 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 an editable layer

FINAL FIX
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colors