Federal Aviation Administration Notice to Airmen (NOTAM) Developer Portal Design UI Challenge

Welcome to the Federal Aviation Administration Notice to Airmen (NOTAM) API Developer Portal UI Design Challenge.

We are looking for your help to create a creative visual design that will accommodate all features and functionality requirements explained below as a consolidated Federal Aviation Administration Notice to Airmen (NOTAM) API Developer Portal.

CHALLENGE OBJECTIVES

• Create UI screens for a web application in desktop format.
• There are # unique features/screens need submitted for this challenge.
• The result from this challenge will be build in the next Development challenge
• Explore concepts design around the Developer Portal.

Round 1

Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.

A). API User Role
B). Admin User Role

Round 2

Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.

A). API User Role
B). Admin User Role

APPLICATION OVERVIEW

The Federal Aviation Administration (FAA) in collaboration with Topcoder is working to further improve timely access to Notice to Airmen (NOTAM) data by developing required Application Programming Interfaces (APIs) to meet the diverse needs of the aviation industry.

A Notice to Airmen (NOTAM) is the real-time notification component of the FAA's Aeronautical Information System and contains up-to-date information related to any change in the National Airspace System (NAS).

Who uses NOTAMs?

• Commercial, General Aviation, and Drone pilots need access to NOTAM data before and during flight.
• The FAA issues NOTAMs to support multiple Federal Agencies, Airports, protect critical infrastructure, disaster relief efforts, and space operations.

This Developer Portal will be a self-service web portal for developers, internal employees or 3rd party partners to:

• Discover published APIs and get access to the documentation, standard metadata (such as Swagger, OpenAPI and WSDL), code and message examples.
• Self-manage developer accounts, API Subscriptions and API Keys for the offered API Products.
• Access monitoring & reporting capabilities to help manage the use of the API platform and providing usage statistics.

AUDIENCE

• Developers
• FAA Internal Users
• FAA 3rd Party Partners

PERSONA

Persona #1

• Quickly find API or SDK reference about how to use each of the services & endpoints
• View all available services & endpoints
• Post questions related to API usage and getting the feedback

Persona #2

• Manage published API & SDK
• Manage User
• View statistics of API & SDK Usage
• Manage content on Developer Portal

USER STORY

User Story #1
Robert is a Javascript Developer that needs to use the FAA NOTAM API integration with his latest web application about Aviation Industry. He landed on the Developer Portal and was able to quickly find references specifically for Javascript language. In some points, he faces errors when pulling data with a combination of parameters. He navigates to the support page to post his questions and waits for responses from other developers or Admin to suggest a proper solution.

User Story #2
Carl is an Admin for the NOTAM API Developer Portal. He is required to check the statistics of API & SDK usage. In addition, he knows that top level management needs the API endpoint for Pilot Activity to be closed. Carl navigates to API & SDK management where he will turn off the API endpoint.
 

DESIGN GOALS & PRINCIPLES

• Modern, simple and clean look & feel.
• Reduce the number of clicks required from API developers as much as possible
• Some required features for the FAA NOTAM API Developer Portal are as explained below. Feel free to suggest other pages that will be useful for the Developer Portal.
• The Developer Portal design should not require any proprietary software or interfaces on the backend to ensure interoperability with a future hosting environment.  
• These features below are just starting points, feel free to suggest best practices for navigation and usability design for the Developer Portal.

EXPLORATION SCORE

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

Aesthetics: 9
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design

Exploration: 5
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: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

GLOSSARY

• FAA: Federal Aviation Administration
• NOTAM: Notice to Airmen
• NAS: National Airspace System
• Aviation: Activities surrounding mechanical flight and the aircraft industry.
• Developer Portal: A self-service web portal for developers to discover published APIs and get access to the documentation
• API: Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.
• SDK: Software Development Kit is a collection of software development tools in one installable package.
• API Endpoints: When an API requests information from a web application or web server, it will receive a response. The place that APIs send requests and where the resource lives, is called an endpoint. For example: the /users endpoint refers to https://api.example.com/v1/users

SCREENS/FEATURES

Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allows for the same functionality that is shown on the attached wireframes

A). API User Role
Here are main responsibilities for API User Role:

• Access the API, SDK, Help, Documentation, FAQ, and Support sections (and all functionality within each section)
• Request API keys
• Be assigned API keys
• Feel free to suggest another helpful pages for API User Role

1). Dashboard
(API User)

Listed below are some page elements that can be your starting point to display on the dashboard page. Feel free to suggest any new ideas.

• Header
  • FAA Logo & NOTAM Developer Portal title
  • Main Navigations:
    • API
    • SDK
    • Help, Documentation & FAQ
    • Support
    • API & SDK Management (For Admin Only)
    • User Management (For Admin Only)
    • Statistics (For Admin Only)
  • Search button
  • Register or Sign In
• Body
  • Introduction of FAA NOTAM Developer Portal
  • API Quick information
  • SDK Quick information
  • List of API & SDK services
  • Documentation, QA, or Support area
• Footer
  • Footer links
  • Legal
  • Privacy Policy

2). User Access
(API User)

• Register
  • Use these fields for user registration (note: an * reflects a required field):
    • name (first, last) *
    • email *
    • password *
    • company *
    • address *
    • city *
    • state *
    • country *
    • Postal/zip code *
    • primary phone *
    • alternate phone
    • Intended use of NOTAM data
  • Registration design should consider the use of reCAPTCHA for registration.
  • Also, I need to show a data access agreement in order to get access to the data. We could use similar language within the portal registration:  https://aa.data.faa.gov/data/home.jsf
  • Before accepting the agreement their account will not be valid or wouldn’t get the API access keys.
• Forgot Password
  • Display email text input to Forgot password page
• Login
  • Display email address and password fields for Login screen.
  • Design how the error validation workflow will work for this page
• User Profile
  • Modify user profile
  • Generate Access Key, this will be similar like GitLab/GitHub personal access token page.
• Logout

3). APIs
(API User)

• Description of each API service.
• Display list of API Services & Endpoints, put some random placeholder data for now.
• Need to show different style color for method POST, GET, UPDATE like sample on https://petstore.swagger.io
• A flexible menu of the NOTAM APIs that will be available to select from (e.g. query types, output formats)
• Query type properties:
  • Location;
  • NOTAM type;
  • Location and NOTAM number;
  • Effective start and end dates;
  • Affected feature types and;
  • Last updated date.
• Output format examples:
  • AIXM 5.1;
  • AIDAP;
  • GeoJSON.
• Sample request and response format for Success or Error.

4). SDK
(API User)

• Some potential features that can be displayed for SDK page:
  • Introduction of SDK
  • Technology needs to be supported: Javascript, Java, Python.
  • Details page about how to use the SDK

5). Help, Documentation & FAQ
(API User)

• Need to create Help, Documentation or FAQ page.
• Also, please create how the detail page should look.
• Put a dummy placeholder for now, we’ll swap with actual content later.
• Refer to the Developer Portal reference as mentioned above

6). Support
(API User)

• This feature is about feedback capability, so users can send us their feedback.
• This will be like a blog or forum where users can post the problem about API and get response from Administrator.
• Portal can include the ability to add emails of users that would get notified when feedback is provided.

B). Admin User Role
Here are main responsibilities for Admin User Role:

• Inherit all functionality as the API User role.
• Approve/reject the API users.
• Revoke the keys and also disable the API users.
• Add other Admins. There will be a default (seed) Admin.
• Access statistics on usage of the APIs.
• Manage static content for the APIs (such as help documentation, editable FAQs, other static references. etc.)
• Feel free to suggest another helpful pages for Manage User Role

Required pages need designed for Admin User Role:

1). Dashboard
(Admin User)

• Create dashboard design for Admin User Role
• What are things that could make the Dashboard for an Admin user different from the API user?

2). API & SDK Management
(Admin User)

• This page will be used to manage the content for available APIs & SDK for users with Admin Role
• Some potential features that can be displayed for the API & SDK Management page:
  • Set published API or SDK
  • Remove API & SDK
  • Changelog features

3). User Management
(Admin User)

• This page is intended to manage the API User. This is only accessible for users with Admin Role.
• Ability to view user registration requests and take action to “Approve” or “Reject” user registration
• Managing the available APIs and user accounts
• Ability to add more admin users
• Ability to revoke individual API keys, or disable user accounts
• We’re looking for your ideas about other features that can be helpful to display on this page.

4). Statistics
(Admin User)

• This page should be for Admin only
• This page should show some charts or visualization to explain the Developer Portal Activities. Some ideas for this Statistics page:
  • Display metadata to capture the geolocation,
  • number of requests for API and time so we can look at usage patterns
  • Total users registered
  • API services that were used recently
  • Most used API services
  • Number of SDK being used
• We’re looking for your ideas about other features that can be helpful to display on  this page.

 

BRANDING GUIDELINES

• Following FAA website design style: https://www.faa.gov
• Make sure your design follows the web accessibility.
• Please get inspiration about Best Overall Developer Portal Awards from this web reference: https://devportalawards.org/category/best-overall-developer-portal  

FINAL DELIVERABLES

• All original source files
• Create files in Adobe Photoshop, Adobe XD or Sketch.
• Marvel Prototype -
  • Upload your screens to Marvel App.
  • Send your marvel app request to challenge forum
  • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.