LAANC UI Redesign Challenge

Welcome to the “LAANC UI Redesign Challenge”! In this challenge we would like you to create an updated UI for an existing responsive web application. The LAANC system is used by Air Traffic Managers (ATMs) to monitor and respond to authorization requests for operations of unmanned aircraft systems (UAS). The existing interface was not designed to optimize user experience. It does not allow the flexibility the ATMs need to complete their tasks efficiently. Our customer is considering a potential redesign. We would like to propose a fresh UI which takes advantage of current technology and best practices to give the users an improved experience.

Round 1

Submit your initial designs for checkpoint feedback:
01. Global Elements:
02. Map
03. Authorizations Panel
04. Pending Request Details
05. Confirmation Required
06. Confirmation Message

Round 2

Submit your final designs with all checkpoint feedback implemented:
01. Global Elements:
02. Map
03. Authorizations Panel
04. Pending Request Details
05. Confirmation Required
06. Confirmation Message
07. Authorized Operation Details
08. Flights within Selected Grid Quadrant
09. Print Details (preview of filtered Request List)
10. Print Details (preview of Single Selected Operation w/ map)

CHALLENGE OBJECTIVES

• UI Design for a responsive web application
• Desktop view for approximately 10 distinct screen areas
• Content and functionality based upon the detailed screen requirements and user preferences
• Creative redesign with current best practices and technology to improve the user’s experience

GLOSSARY
FAA = Federal Aviation Administration
LAANC = Low Altitude Authorization and Notification Capability
ATM = Air Traffic Manager
UAS = Unmanned Aircraft System, a.k.a. Drone
UASFM = UAS Facility Map. This is a map that defines the altitude threshold for eligibility of automatic authorizations around airports.
Operation = The area of a planned flight defining where, when, and at what altitude a drone will operate
Authorization = Permission granted by the FAA for flight operations requested by drone pilots in certain airspace
Part 107 = The Federal Aviation Administration’s rule for operating small UAS, also known as drones, in the United States.
Rescind = A previously authorized operation is changed from Approved to Denied.

APPLICATION BACKGROUND
Drone pilots planning to fly in controlled airspace around airports must receive an airspace authorization from the FAA before they fly. LAANC was created to automate the authorization request and approval process. LAANC provides ATMs with an interface to respond to authorization requests, and allows them to monitor pending and approved authorizations. Authorization requests are received by the LAANC system up to 90 days in advance of an operation. LAANC includes an automatic authorization feature for operations that meet specific area and altitude requirements. These operations appear in the system as authorized. All other requests must be approved/denied manually by the ATM responsible for the airspace where the operation is planned. (More background information about FAA and LAANC)

APPLICATION OVERVIEW

• LAANC is an application that allows Air Traffic Managers (ATMs) to monitor authorizations and respond to authorization requests for unmanned aircraft operations within a controlled airspace.
• Within LAANC, users are responsible for approving/denying authorization requests made for operations in their airspace.
• LAANC provides notifications and visualizations to users about pending operations.
• Users should easily see all pending and approved operations in their defined area. They will need to efficiently filter and drill into details for specific operations as needed.
• Application users have many responsibilities unrelated to the LAANC system. They wish to minimize the frequency of logging-in to LAANC. They want to spend as little time as possible using the system to evaluate and manage operation requests.

AUDIENCE

• Air Traffic Managers working for the FAA.
• Air Traffic Managers have many responsibilities outside of the LAANC tasks.
• Typical workplace setting is an office within an FAA facility on or near an airport. Note: This role is different from Air Traffic Controllers who manage manned aircraft from a control tower setting.
• Users work on a standard desktop workstation, often with a second monitor. At some times, users may work from a remote location on a laptop computer or tablet with only a small single viewport.
• The LAANC application is accessed over a network internet connection. The underlying system runs in Amazon Web Services and can use only FedRAMPed cloud services and technologies.

PERSONA

• Name: Ryan Jacobson
• Occupation: Air Traffic Manager
• Work Location: FAA office at Cherry Capital Regional Airport in Traverse City, Michigan.
• Role & Goals:
  • Responsible for managing his facility and unmanned air traffic in the surrounding area.
  • Must monitor and respond to authorization requests for drone flight operations using the LAANC system.
  • Using LAANC is a small piece of his job. He tries to spend as little time using the application as possible.
• Frustrations:
  • Ryan needs to work hard to find what he wants in order to address all the authorization requests needing attention.
  • Some of the LAANC interface elements block his view of the map and the areas he needs to evaluate. This is even more difficult when Ryan works from his home office on a smaller screen.
  • The interface is not flexible and customizable to what Ryan wishes to view. At times he would like to be able to take advantage of his second monitor’s screen area, but the elements are constrained within the single browser window.
  • Zoom control of the map view is clunky.
• Wants:
  • The ability to control and customize his interface and the elements displayed.
  • A simpler and more intuitive layout focused on content that is relevant to him.
  • Clear indication of the authorizations requiring immediate attention.
  • A more streamlined workflow to evaluate and complete an authorization, that will take little time and effort.
  • A single view that will capture all the authorization details for an operation.

USER STORY

• Ryan is an Air Traffic Manager working at Cherry Capital Regional Airport (TVC) in Traverse City, Michigan. During his busy day he is responsible for managing unmanned air traffic around his facility. This includes addressing authorization requests for drone flight operations.
• To manage these authorization requests, Ryan logs into the LAANC system at his workstation. His screen view defaults to his home facility location, TVC. It displays the Map Layers that he has previously chosen in his settings.
• In the Authorizations Panel, Ryan sees all pending and approved authorizations for operations within the default 90-day window. He sees a long list, so he filters the list to show only those that are Pending.
• Ryan sees a visual cue to notice that a request in the filtered list is for an operation scheduled to occur this week. He selects this request to view more details and evaluate whether it should be Approved or Denied. He clicks the Zoom To button to focus his map view on the operation area for the specific request.
• After reviewing the various operation details, and seeing the airspace impacted by the operation on his map view, Ryan determines the authorization should be Approved. He follows the onscreen prompts to approve this flight operation. He knows the pilot will be notified.
• Ryan looks back to the Authorization Panel and filters the list to display operations that are Authorized Within UASFM. He notices one that could interfere with other facility activities. He selects that operation to view details. After viewing the area planned for the flight, he determines that it is unsafe. He chooses to Rescind the authorization for this flight and follows the prompts to do so. This operation is then listed in the panel as Rescinded Awaiting Acknowledgement. He knows that once the pilot acknowledges that the authorization has been rescinded, the operation will be removed from the list.
• Ryan is also able to control the map area he is able to view. He can zoom in and out the filters he has set. The areas of these operations (polygons, circles, triangles) are colored according to the type of operation (see Status Key options). When he clicks on one of the shape areas, it is highlighted and some of the operation details are displayed.

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

Creativity: 10
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 8
1: low-fidelity design, wireframe, or plain sketch
10: 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: 3
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success


REQUIRED SCREEN AREAS & FUNCTIONALITY

Design for Desktop screens: 1366 x 768px.
All content should fit within the viewport, with no scrolling. Focus on using the screen area efficiently. Also, consider that some users may have a second monitor and wish to have the option of dragging panels to that other monitor for best viewing.

Address the user story with specific features and content as described below.
Assume the user is already logged into the LAANC system.

Solutions should redesign the provided elements. Use reference screenshots for content only. We are looking for a creative redesign to offer a better user experience.

Use the provided PDF document with sample content to help understand the workflow and the requested screen features. Use the sample images to find placeholder content.

01. Global Elements:
These elements are available and/or displayed in the UI at all times.

• Application Title / Logo
• Header Items / Navigation:
  • Resources (Dropdown list of links. Selection will take users to external urls.)
  • Reference (Dropdown list of participating facilities. Selection will change the user’s map view to the area surrounding that facility.)
  • Facility example: SFO = San Francisco Intl. Check more of them here.
  • User Facility Location (Indicates the user’s assigned home facility. On click, the map view will zoom to that facility area.) For example: TVC
  • Welcome, User name (On click will allow user to manage preferences.)
• Map Layers (Controls what operation areas are visible on the map. These are colored shapes on the map grid - circles, polygons, triangles, etc.):
  • Recreational Authorized Within UASFM
  • Recreational Rescinded Awaiting Acknowledgement
  • Recreational Manually Processed
  • 107 Pending Above UASFM
  • 107 Authorized Above UASFM
  • 107 Authorized Within UASFM
  • 107 Rescinded Awaiting Acknowledgement
  • 107 Manually Processed
  • Runways
  • Airspace Boundary Map Data
  • Operation Grid Counts
• Status Key (Shows a visual key for the operation area shapes. Please assign a visual treatment - color or style - for each type of operation.):
  • Pending Above UASFM
  • Authorized Above UASFM
  • Authorized Within UASFM
  • Rescinded Awaiting Acknowledgement
  • Manually Processed
  • UAS Facility Map Data
  • Runways
  • Operation Grid Counts

02. Map
The Map is the primary visual and viewable at most times in the application. The map area displayed will change depending upon user settings, selections made, filters enabled and zoom controls. The default view should be relevant to the specific user’s needs.
The Map should include:
Visual of a map including the facility area.

• UASFM Grid defining the facility area.
• Areas of operations requested (Each operation is shown on map as a shape and colored per Status Key)
• Operation count per quadrant
• Controls: Zoom in / Zoom out

Grid details:

• Each grid quadrant represents a 1-minute latitude by 1-minute longitude.
• The 0->400 numbers on the grid represent the automatically approved altitude criteria. 0 represents a lower altitude for the drone while 400ft is the highest altitude they are authorized to fly in that quadrant. If a planned operation meets the criteria, it will display in the list as Authorized Within UASFM. Our ATM user will not need to manually approve that operation.
• The number of operations in a specific quadrant is shown as a number within a circle.

03. Authorizations Panel
The content in this panel allows the user to monitor and manage approved authorizations and pending requests. This list also includes auto-approved authorizations. The user should have the ability to find a specific authorization based on detailed filters and search. The user should be made aware of authorizations that need immediate attention.
Approved authorizations are removed from the list after the operation “End Time” is reached and considered complete. Pending authorization requests are removed from the list 24 hours before the “Start Time” of the operation.

The Authorizations Panel should include:

• Search Terms filter (form field element)
• Date Range filter
• Operation Types filter
  • Recreational:
    • Authorized Within UASFM
    • Rescinded Awaiting Acknowledgement
    • Manually Processed
  • Part 107:
    • Pending Above UASFM
    • Authorized Above UASFM
    • Authorized Within UASFM
    • Rescinded Awaiting Acknowledgement
    • Manually Processed
  • All Facilities
• Pagination and # items displayed
• List of Authorization Requests
  • Sort options: Reference ID /Type; Start / End; Status / Location
  • Each operation is selectable (User will see 04. Pending Request Details or 07. Authorized Operation Details)
• Print Details (link to 09. Print Details)

04. Pending Request Details
On selection of an authorization request, the user sees the details for that operation. The user can take an action to Approve or Deny the request, or Cancel out of the screen. The details displayed relate to an area on the map view where the operation is planned.

Pending Request Details should include:

• Type of Request: Pending. (This heading aligns with the request type shown in filters for 03. Authorizations Panel.)
• Details content
• Action buttons:
  • Approve (Will give authorization for the described operation. User will see 05. Confirmation Required.)
  • Deny (Will not give authorization for the described operation. User will see 05. Confirmation Required.)
  • Cancel (Will not make any changes or updates to the authorization request. Close window with no changes made.)
• Control icons:
  • Print (link to 10. Print Details (preview of Single Selected Operation w/ map))
  • Collapse window
  • Close window
  • Zoom To (gives quick zoom to single quadrant related to operation details)

05. Confirmation Required
After a user selects an action to an authorization request (Approve, Deny, Rescind) they are asked to confirm or cancel their choice.

• Message options to confirm the action to Approve, Deny, or Rescind the operation (see sample content in PDF)
• Action buttons:
  • Cancel (Will not Rescind the authorization. Close window with no changes made.)
  • Confirm (Will continue with the action selected. User will see 06. Confirmation Message)

06. Confirmation Message
After a user Confirms their action to an authorization (05. Confirmation Required) they will be given feedback that the action has taken place.

• Message to acknowledge the action to Approve, Deny, or Rescind the authorization (see sample content in PDF).
• Action button: OK (User knows that the action has been completed.)

07. Authorized Operation Details
On selection of an approved authorization, the user will see the details for that operation. The user has the option to Rescind this authorization, or close the screen. The details displayed relate to an area on the map view where the operation is planned.

Authorized Operation Details should include:

• Type of Request: Authorized. (This heading aligns with the request types shown in filters for 03. Authorizations Panel.)
• Details content
• Action buttons:
  • Rescind (Will change the previously approved authorization to Denied.)
  • Cancel  (Will not Rescind the authorization. Close window with no changes made.)
• Control icons:
  • Print (link to 10. Print Details (preview of Single Selected Operation w/ map))
  • Collapse window
  • Close window
  • Zoom To (gives quick zoom to single quadrant related to operation details)

08. Planned Operations within Selected Grid Quadrant
On selection of a specific grid quadrant from the map, the user is able to see details of operations designated for that area. These details will correspond to the visual representation of the operation area on map surface (shape).

• Sortable list of requests and authorizations
• Grid area details
• Control icons:
  • Collapse window
  • Close window

09. Print Details (preview of filtered Request List)
From the Authorization Panel, the user is able to preview and print the details displayed for that group of operations. The preview should include:

• The filter criteria that was applied. For example: Date Range, Operation Type, Facility.
• Details (All details filtered and surfaced at Authorization Panel. This includes details for each of the operations that is in the filtered list.)
• Home link (Will take the user back to the main working interface.)
• Print button

10. Print Details (preview of Single Selected Operation w/ map)
From the Operation Details screen, the user is able to preview and print all details provided for a single operation.

• The Type and Reference Number of the selected operation.
• Details (All details of the selected operation and the zoom view of the operation area on map.)
• Home link (Will take the user back to the main working interface.)
• Print button

BRANDING GUIDELINES

• Palette: Open to suggestions. Use the palette shown at www.faa.gov as a starting point.
• Application Title / Logo: LAANC / Use a simple placeholder logo for LAANC
• Fonts: Open to legible and accessible modern web fonts.
• Important: The actual FAA logo and LAANC logo may NOT be used in the design solutions.

SIZE

• Desktop: 1366 x 768px. All content to display within viewport, no scrolling.

DIGITAL ASSETS

• Link to Google Drive Folder with assets (LAANC UI - Content references.pdf)

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)

STOCK ARTWORK

• Photos, fonts and icons are allowed to be used as per Topcoder Policy

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

FINAL PRIZE PAYMENTS
The final placement prizes for this challenge will be paid through Topcoder’s partner, Ensemble. See details.