THE PROJECT
In April 2020, Executive leadership requested adding a live flight map to our homepage to increase user engagement. The Product Owner, Web Lead, and I felt there were more ways to deliver value on our homepage, and that we should use this update opportunity to better articulate what FlightAware has to offer. Within a few days we were ready to share our ideas with leadership.
Project Goals:
- Create a visually appealing and engaging homepage
- Represent FlightAware as more than just a flight tracking tool
- Highlight the current industry trends
- Explore ways to make live map more useful and engaging for users
To prepare for the conversation I created a simple proof-of-concept to give our ideas context and ensure alignment. The mockup included key concepts we wanted to deliver on:
- Messaging: content placement that articulated who we are and what we sell.
- Data: provide meaningful aviation data for users to interact with.
- Live Map: shorten the path to a popular feature.
We also discussed modifying the search block on the homepage, and ultimately decided to collect more data before proceeding with changes.
The project was approved and we embarked on a 6-month journey during which we released new elements as soon as they were ready.
Shortly after adding the live map "as is" to our homepage, we added a limited set of graphs showing aviation trends. The purpose of the new graphs was to help users better understand FlightAware as a data provider.
I worked with the developers to find a simple charting library we could use to present the data. While my original concept presented the data through stylized text, the charts give a more comprehensive look at our data and allow the users to interact with the information in ways simple text won't allow.
Next up was one of the most important aspects of the project: introducing ourselves to our users. One of the biggest pain points of our previous homepage design was that it lacked any messaging about what FlightAware is.
I collaborated with our marketing team to add content to the hero section at the top of our homepage which articulated who we are. We proudly revealed our new tagline, Central to Aviation, with supplementary text to further explain the concept.
The project stakeholders were very excited about the new messaging, and requested that the visual shown here further communicated the concept. We decided the best way to show FlightAware's influence in the industry would be to create a video highlighting the moments where our data makes the biggest impact.
I searched through stock libraries to and created a story board of screenshots to make sure all key applications were included. I then created a demo reel and uploaded it to a Webflow prototype of the design so stakeholders could truly evaluate the story before we purchased any of the media. An added benefit of using Webflow through the process was seeing everyone's excitement as the design came together.
Up until this point, FlightAware had never highlighted products on the homepage. During this project, we added new content to highlight our premier data services.
The product content was created by our marketing team, and our graphic designer then created small illustrations to represent the products. We initially linked the buttons to their respective product pages, however later changed the buttons to open contact forms per the request of project stakeholders.
We added the Live Flight Map to the homepage by copying it directly from the "Live Flight Tracking" page on our website where it lived. Now that it was front and center, we wanted users to be able to have full control of the view by allowing them to customize which flights appeared on the map.
Users can now filter flights by the following criteria:
- Altitude (range)
- Speed (range)
- Flight Type (multi-select)
- Aircraft Type (type or mult-select)
At the beginning of the project, our Product Owner defined a list of KPIs to measure success of the work. Once the work was completed we saw:
- A slight increase in average time spent on the homepage (+5%)
- An increase in number of visits to product pages from the homepage
- An Increase in data product sales
- Positive anecdotal feedback from users
Since adding product content to the homepage, traffic to the Firehose page increased by 10% and traffic to the FlightXML product page increased by 11%. Their contact forms generated conversion rates of 5% and 6% respectively.
Most notably, the Custom Reports product page saw a 164% increase in traffic. We don't have exact numbers to tie to conversion, but reports sales have seen a sizable increase as well.
Before starting Phase 1, we noted ideas to explore in Phase 2. We refined the list further at the completion of Phase 1, after reviewing our metrics and getting input from other stakeholders.
Items slated for the next iteration:
- Improve how users search for flights
- Make our verticals graphic clickable so users can visit solutions pages
- Refresh the Squawks and Photos design to match the rest of the new look
- Encourage mobile web users to download app
The verticals graphic was something added by stakeholder request. The existing diagram is taken directly from a powerpoint to show FlightAware's reach. Our graphic designer is currently working on a more stylized visual, but one thing we decided to add after looking at metrics is the ability to click on the graphic.
Users clearly want to see what FlightAware has to offer in these areas, and I look forward to them being able to explore our solutions very soon!
