Redesigning the ATL Airport Website
With Ruilin Chen, Aditya Prakash, and Rhea Ramachandran
Introduction
For our team’s first Human Computer Interaction design sprint, Design for Dimensions, we redesigned the Hartsfield-Jackson Atlanta International Airport (ATL) website. As of February 2024, ATL is the largest airport in the United States, so it’s important that its website can effectively serve the needs of thousands of travelers who visit it daily. As you’ll see, that’s not exactly the case.
Digital displays have become a hallmark of the internet age, from electronic billboards designed for large audiences to tablets designed for personal use. To accommodate the variety of devices used by travelers, we were challenged to redesign the ATL website for 3 screen sizes: an Apple Watch, a desktop computer, and a large multi-modal display like the Microsoft Surface Hub.
Who we designed for
In January 2022, over 12 million international travelers visited the ATL Airport. Keeping this in mind, we picked international travelers as our target audience and redesigned the website to cater to them.
To start, for travelers coming from all over the world, the website needs to be multi-lingual, so we keep the language selection tool central on the website. Additionally, to help international travelers with passport control, we wanted to ensure that information related to immigration and customs was easily accessible in our redesign. To enhance their experience of the city itself, we decided to emphasize resources for navigating Atlanta and its tourist attractions.
Current Design Flaws
Upon visiting the ATL airport homepage, we first noticed that a lot of space is taken up by a carousel and weather forecast. The carousel doesn’t offer much information relevant to the user, despite occupying the majority of the screen. Additionally, the home page displays two menus with overlapping links circled below, many of which are redundant.
After scrolling down, the rest of the home page is dedicated to airport news. It’s not clear who this feed is targeted towards, since there are articles for travelers (parking), business partners (outreach and prosperity report) and staff (employee recognitions). Instead of being scrambled together on the homepage, these links should be moved to sections tailored for each audience.
The bright yellow footer is very distracting since it breaks from the palette of the rest of the website, and despite being labeled “Alerts,” it doesn’t contain any announcements which are urgent for most visitors.
The maps page shows a 3D model of the airport covered in dense labels and map elements which make it difficult to read. The map takes a long time to load, and doesn’t load at all on some devices. The most important functions, searching and navigating, are hidden inside a menu. On smartphone, the 3D map is even more difficult to peruse because of the small menu buttons. It’s difficult to find maps for the International Terminal, navigate to different floors, and find Concourses E and F which are buried in a secret menu.
Mood board and style guide
In order to illustrate ideas and aesthetics for our design, we created the following mood board. The board includes content inspiration, color schemes, and typography which inspired our designs.
Creating a mood board allowed us to refine our vision before moving forward with execution. Now, we knew what we didn’t love about the ATL airport website and had a vision for how we could improve it. In the next section, we get designing.
Desktop
Main ideas
To inspire our desktop design, we brainstormed cases where someone might use the site on a personal computer. We came up with several ideas— tourists planning a trip, finding places to stay, researching ride shares and public transportation.
Initial sketches
After exploring potential use-cases, we brainstormed what to change in the original ATL airport website. Our additions included:
- An easily accessible translation button to help with language barriers.
- A Find-a-Flight box to help with flight tracking
- Quick Links to help travelers find hotels, transportation, baggage, immigration and customs info, shops and restaurants, and FAQ
- Popular Atlanta attractions to help travelers learn about the city
- A section where users can share feedback or reporting suspicious activities
- Redesigned the footer to be less crowded
To address information overload, we decided to compartmentalize information by categories (Arrivals/Departures and Domestic/ International). This way, users can select the information they want to see and aren’t overwhelmed by irrelevant information.
Now, moving on to the maps page:
- We replaced the 3D map with a 2D one. The 3D map did not add any information, but it did make the map very clunky and slow to load, especially on a mobile device.
- We also added a search bar, where users could type in their destination, or a shop name and the map will guide them towards there, much like Google Maps.
- Left of the map, we added a filters section, which included options like: shops, lounges etc. inside the ATL airport. Users can click on those filters and they will be highlighted on the actual map.
Paper prototype
Based on the ideas and learnings above, we came up with the following paper prototype:
Figma design
After we started working on the Figma design, we received some more feedback from our classmates, which led to some minor changes from the paper prototype. Those changes are directly reflected in our Figma design.
Large Multi-Modal Display
Main ideas
For our large multi-modal interface, we considered the contexts in which these devices are employed: devices like the Microsoft Surface Hub are often used within professional environments, so we wanted to facilitate travelers on work trips in Atlanta. Therefore, we focused on creating an interface which appeals to international business travelers through emphasizing the device’s enhanced touch interaction capabilities. We aimed to create an interface which is intuitive, accessible, and effectively meets the needs of professional travelers.
During the brainstorming phase, we iteratively refined our sketches with small adjustments, altering sizing, text, and icons to optimize readability and navigation. Similarly, for the maps page, we used an iterative methodology to incorporate features into the map functionality which we believed would be effective on the multi-touch screen.
Paper prototype
After finalizing our low fidelity design drafts, we created the following paper prototypes to gather feedback from users:
To test our home page, we asked users to imagine a setting in which they would use a large screened device. We noted the following observations:
- Users preferred larger icons to interact with
- Users wanted to zoom in and out while viewing maps
- Users attempted to click on various destinations to navigate
Figma design
For our Figma design, responding to user feedback, we introduced larger icons to facilitate touch interaction. Additionally, corporate section is emphasized to accommodate business travelers visiting the Atlanta airport.
For the maps page, we focused on navigation via touch. Users have the capability to select different floors, zoom into specific areas, and interact with categories of interest, leveraging the affordances offered by large multi-touch displays.
Apple Watch
Main ideas
Because Jordan had never used an Apple Watch, let alone design for one, he borrowed a watch from a friend to familiarize himself with its affordances and design patterns. Here are some key takeaways which informed our Apple Watch designs:
- The screen is tiny (184 x 224 pixels for the 44mm model), so we didn’t include pages from our larger screens which are informationally dense. We kept designs minimalist to avoid information overload.
- The watch relies on the Digital Crown for navigating pages, mostly through vertical scrolling, so content should be contained on one screen or arranged in a vertically scrollable layout.
- Smartwatches can help guide users during activities, so we prioritized information and pages which facilitate simple actions like airport navigation and flight tracking.
Initial sketches
With these ideas in mind, we created the following low fidelity sketches for the Home and Maps pages on Apple Watch:
- To keep the home page less informationally dense, we moved the menu links to a hamburger menu
- Essential functions like change language, flight tracking, and help are accessible from the home screen
- The most challenging decisions were how to structure the information hierarchy (e.g. ordering menu items by importance) and which pages were impractical to include on the smartwatch screens.
Paper prototype
Using our favorite ideas from the low fidelity sketches, we created the following paper prototypes for the Home and Maps pages. Changes to the initial prototypes are highlighted in blue—we discuss our reasoning for those changes in the next section.
Preliminary feedback and revisions
To test our paper prototypes, we asked classmates to perform the following tasks and simulated computer responses by scrolling between screens:
- Change the language to your preferred language
- Check your flight status
- Find a store in Concourse C where you can buy clothing
- View all your options for dining in the airport
- Get a sense of the airport layout and see your current location
Here’s some of the feedback our classmates gave us and the corresponding changes we made, highlighted in blue in the images above.
- HOME: FAQ and Help buttons are redundant →
Consolidated FAQ and Help into Help - HOME, MAPS: Buttons are too small →
Replaced button grid with vertical list, enlarged buttons on maps page, added search bar to menu to make off-screen items reachable
Figma designs
Next, we built the revised Apple Watch prototype in Figma. Following existing smartwatch design patterns, we implemented a minimalist interface, organized pages into vertically scrollable layouts, and kept text to a minimum to avoid information overload.
One reason for working in Figma is the ability to create interactive prototypes—whereas paper prototypes rely on designers to play the computer, Figma supports immersive prototypes which more accurately simulate user experience. You can access the interactive Apple Watch prototype here.
Conclusion
Our team learned a lot from our redesign of the Atlanta Airport’s website. This was our first group design project, and it was made challenging by the fact that some team members got sick so we rarely met in person as a whole team. Still, we actively learned from experience and will take several lessons with us moving into our next design sprint.
First, designing for three screen sizes required research. We’re pretty familiar with personal computers, but large multi-modal displays and Apple Watches come with different affordances: the watch can’t display nearly as much information as the larger screens, while the multi-modal display’s stationary nature, extra-large size, and touch screen encourage other kinds of interactions. Before we started designing, we had to learn how we could best use these affordances.
Next, without much experience using Figma, and mostly without the ability to work together synchronously, it was difficult to agree on visual design rules to make the designs cohesive. Given more time, we’d use components and variables to establish similar branding for all dimensions to make the user experience across devices more consistent and memorable.
Finally, despite the obstacles limiting our ability to meet in person, our best ideas came when we worked together. Bouncing ideas off one another, giving constant feedback on each other’s sketches and prototypes, and staying in communication helped us overcome the challenges we faced and learn together.
One thing is certain—as the busiest airport in the U.S., Hartsfield-Jackson Atlanta International Airport needs a more user-friendly website. We hope our ideas can help!
