Customize Price estimator Layout and Usability

Problem: Conversion too low Description: Our Price estiamtor on webpage needs to get optimized. We had running mouseflow on the site for a period and found out that usability is not good enough. Our Website: [login to view URL] Price estiamtor on top of the page Example of better practice: [login to view URL] ------------------------------------------------------------------------------------------------------------------------------- Task 1: Optimize Layout -> See attached graphic -> Placeholder Text should show that user has to type in information. They only should get exchanged by inserted Information, if these are valid. ------------------------------------------------------------------------------------------------------------------------------- Task 2: Use better practice for inserting Departure and Arrival airport Problem: Lots of users type in a city, but don´t select an item from the SuggestBoxList. But we do need to have items selected from SuggestBoxList, because estimator needs to have the correct airport code. Solution: If User klicks somewhere else on the page, without selecting an item: -> if there is only one Element, get 1st Element of the List -> else: delete user information and show placeholder text again ------------------------------------------------------------------------------------------------------------------------------- Task 3: Use scrolldown menu for "selecting number of passengers" ------------------------------------------------------------------------------------------------------------------------------- Task 4: Selecting departure and arrival date - LOGIC Problem: Users sometimes select only arrival date and get an error, because of course the returning flight needs to be in future in relation to the departure flight. We call: depature flight = 1st leg AND Returning flight = 2nd leg Solution: After user selected 1st leg date -> automaticly switch to selection of returning flight date - 2nd leg should be by default 1st leg + 1 day -> BUT User should be able to select same date for 1st and 2nd leg manualy, if he wants to fly both on the same day Some rules: - User is only allowed to select 2nd leg date >= 1st leg date - By default 2nd leg date = 1st leg date + 1 day - If user does klick somewhere on the page without selecting 2nd leg -> 2nd leg = 1st leg + 1day ------------------------------------------------------------------------------------------------------------------------------- Task 5: Selecting departure and arrival date - Layout -> see graphic