Challenge Summary
Welcome to the “Metropolis Airport Website Responsive Design Concept Challenge”. Metropolis is one of the largest international passenger airport, as measured by the total number of annual international passengers. It’s a hub for the movement of people and goods across the country and the continent, and also around the globe. In this challenge we would like to design a very creative website for this airport by keeping in mind the two way communication with Passengers, Community, and Business Partners. We are looking for mobile enabled responsive page designs - mobile first design.
Best of luck! We are looking forward to your amazing and creative design ideas.
Round 1
Submit your initial design for a Checkpoint Feedback
1. Landing page (Desktop & Mobile)
3. Flight Info page (Desktop & Mobile)
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates
1. Landing page (Desktop & Mobile)
2. Business Partner/ Vendors page (Desktop & Mobile)
3. Flight Info page (Desktop & Mobile)
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Challenge Goals
For this challenge we are looking for easy access to information and to design a very creative approach to solve a specific problem: improve end user experience. We want to see how you can capture two way communication with Passengers, Community and Business Partners. The designs needs to be of higher quality & aesthetics to impress the sophisticated stakeholders at Metropolis
Design Considerations
- We are looking for fresh, high quality and modern design. Bring out the WOW factor in the designs.
- Mobile Enabled Responsive Pages - Mobile First Design.
- You can use the attached colors and any other color you feel can complement the main colors.
- Improve customer experience.
Required Pages/Features
For this challenge, we are looking for below mentioned pages. Feel free to incorporate any other features that you would like to add. Do not allow the suggestions below to impact the creativity of your design.
1. Landing page
Design landing page for Passenger Persona for international airport site
- Flight Search : By Airlines, Location or Flight Number
- Promotion Banners/Carousels
- Shop & Dine in each terminal
- Parking options at the airport
- Main Navigation and Sub Categories:
Flight - It has Flight Search, Arrival Guide, Departure Guide, Connecting Guide, Meeting Passengers, Travel Updates, Airlines & Destinations, Baggage & Pets
To and From - It has Directions, Parking, Ground Transportation, Ride the Terminal Link
Shop & Dine - It has Food and Drink, Shopping, Duty Free, Current Promotions
While you are here - It has Our Lounges, Arts & Exhibits, Airport Services, Accessibility Services, Terminal Maps, Area Hotels
About Metropolis - Connects, Community Relations, Airside Tours, Community Events, Civic Partners, Stay in the know, Economic Impact, Environment, Noise Management, Keeping you safe, Preclearance
2. Business Partner/ Vendors
Design sample page for business partner / vendors who work with airport (i.e. food supplies, transport, shopping etc.)
- Promotion Banners/Carousels
- List of Business Partners
- Main Navigation and Sub Categories:
Business Opportunities - It has Advertising, Airport Suppliers, Doing Business at Metropolis, Retail
Air Services - It has Aeronautical Charges and fees, Incentive Program, Operating at Metropolis, Statistics and Reports, Contact Us
Cargo Services - It has Aeronautical Charges and Fees, Advanced Cargo Facilities, Metropolis Advantage, Contact Us
Existing Business - It has The handbook for business partners, Activity Permits, Construction, Material Movement, Our Performance, Crane Permits, Online Payments, Employee Parking Online Payments
Employees - It has Employee News, Program, Pass Permit control Office, Parking Permit Office, Safety & Security, Employee Car Care
3. Flight Info page
Design experience for Flight info page with flight search and notification views
- Flight Search: By Airlines, Location or Flight Number, Advanced Search
- Flight Schedules : list of flights with their schedules
- Notifications
- Main Navigation and Sub Categories:
Flight - It has Flight Search, Arrival Guide, Departure Guide, Connecting Guide, Meeting Passengers, Travel Updates, Airlines & Destinations, Baggage & Pets
To and From - It has Directions, Parking, Ground Transportation, Ride the Terminal Link
Shop & Dine - It has Food and Drink, Shopping, Duty Free, Current Promotions
While you are here - It has Our Lounges, Arts & Exhibits, Airport Services, Accessibility Services, Terminal Maps, Area Hotels
About Metropolis - Connects, Community Relations, Airside Tours, Community Events, Civic Partners, Stay in the know, Economic Impact, Environment, Noise Management, Keeping you safe, Preclearance
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Reference Sites
Best Airport UX sites
(Note: please be creative while proposing new designs – these sites are for reference only. Do not copy content as is from these sites)
Site 1 - www.changiairport.com
Site 2 - https://www.cph.dk/en/
Site 3 - http://www.dubaiairports.ae
Branding Guidelines
The design can follow the attached branding guidelines.
- Metropolis Branding Guidelines.pdf.zip
Presentation Screen - 1920x1080 (16:9 Ratio)
We want a presentation screen to showcase your design. So keep it simple and make it look good.
Target Devices
- Desktop Standard Screen Size: 1366px(w) × 768px(h)
- Phone Retina Screen Size (iPhone): 750px(w) × 1334px(h) (@2x)
Make sure your work is in a vector format, for retina scaling and high fidelity.
Stock Artwork (Icons, Photography)
- Stock artwork and icons are allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- Check the branding guidelines!
MarvelApp Prototype
- You need to upload your screens to Marvel App.
- You can request for your Marvel App link by posting on forum or by sending a mail to Challenge Copilot
- Remember to include your Marvel app URL in your Notes or Declaration document while uploading your submission.
Target Audience
- Passengers
- Business Partners
- Community
- Internal Employees
Judging Criteria
Your submission will be judged on the following criteria:
- How interesting and engaging is the whole process?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.