Warn Letter

Created for users to effectively for the specific goal of inputing, editing and managing critical data

In this page


Sept 12th, 2020

Warn Letter

Main page

The main page is straightfoward. It displays latest Warns based on the current date. Each Warn listing should be clickable; hence, linked to a product page.

The Main Page


The UI displays four sections.

  • Main
  • Hotel
  • Destination (search by airport code)
  • Extras

Each of these sections, have a starting point. The starting point MUST ALWAYS SHOW A DISABLED STATE (this is evident on the prototypes) with the exception of the main page.

Hotel Page

Destination Page

Extras Page

Warn Data for Hotel

This following shows what occurs after a user has entered the name of the hotel and clicks in the Show Warns button.

Hotel with Warn Data

Create Warn

The Create Warn button will go to the Create Warn page. There are 3 buttons on the Create Warn page. They each have particular task.

  • Cancel: Takes user to previous page without saving any changes.
  • Save: Save any additions or changes on the form.
  • Verify: Completes the form.

Create a Warn


These pages are important as they direct the user on the next task. After the user clicks on the SAVE button or VERIFY button, they will get confirmations.

Confirmed: Saved

Confirmed: Verified

Email and Bookings

THis pages shows the Verified section. On the first verified listing, the toggle menu is active.

Verified: Email & Bookings

Warn Data for Destination

After the user enters the Airport Code and clicks on the Show Warns button, they will see the Warn data associated with the City/Airport code.

Destination with Warn Data


Update: CSS stylesheet has been update. File name:

  • warn-09-08-20.css MODIFIED: September 15, 2020

Download Dev Files