Warn

Design specifications including prototypes, code and annotations.

In this page

September 13, 2020

Four Sections

Because of the complexity of Destinations (search by airport code), I replaced the product type pulldown with a navigation. This allows the UI to initiate from starting points which will reduce confusion, and provide ease‐of‐use.

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

Main

September 14, 2020

Warn Data for the Main page

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

The Main Page

Hotel

September 13, 2020

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

Confirmations

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

Destination

September 13, 2020

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

Res Agent

August 20, 2020

Reservation Team UI

These are the pages that are designated for the Reservations team.

  • Pes Agent View Start page
  • Res Agent View Booking ID page
  • Res Agent Hotel page

Res Agent Start PageRes Agent Booking ID pageRes Agent View Booking ID page

September 24, 2020

Code

Update: CSS stylesheet has been update. File name:

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

Download Dev Files