Flightradar24 mobile design update

 

Flightradar24’s mobile design update aimed at fixing immediate UX/UI issues, and additionally focused on bringing their interface and branding up to the new standards of flat design trends. The app icons for android were redesigned to fit material design, and icons, buttons, switches, sliders were flattened, colors were brightened to bring a fresh feel.

 

In a series of app updates, we tackled issues of all kinds for both iOS and Android. Main features for the map view which were only accessible inside the side menu were brought directly to the map, making an easier more seamless user experience. Many other updates were added including: the addition of delay/cancelation trends for airports, cleaning up arrival/departure boards to a clearer format, a fresh main search design and new shortcuts to help the user to find a flight in a quicker manner, a first version of a walkthrough for first time users, wearable versions of the app for both Android Wear and Apple Watch, the addition of Chromecast support, and a concept for updating UX of alerts.

 

Process:

 

The startup had been around for about 7 years, but never had a full time designer. I stepped in and addressed UX/UI challenges of all kinds to get Flightradar24’s design-side back on track. I represented Flightradar24 at design critique meetings with Apple/Google design teams in London and Stockholm. After the issues were prioritized, I came up with some concepts that had very custom solutions to our list of issues. I worked alongside the entire process of updating their mobile apps– from user personas, sketches, wireframes, flows all the way to designing all UI graphics and doing user testing.

 

Screen Shot 2016-06-27 at 6.17.30 PM              Screen Shot 2016-06-27 at 6.18.20 PM

 

Being a startup with small design resources, my ideal design process was not always implemented. Lean startup and bootstrap methods were typically used. Formal user research was not a big part of this project. However, because Flightradar24’s data relies on a large community of people to host their receivers, their users are involved in collecting data, and therefore are heavily interested in how this data is displayed inside the app. Because of this, the company has a huge loyal and committed community behind them who provides steady and solid feedback to the support team daily. We utilized this feedback for prioritizing our next features and fixes. Although our user base was very wide, we boiled our user personas for this first design update into two: advanced loyal users (usually true plane spotters) who had intense knowledge of aviation and used our app almost daily, and basic users who used the app occasionally, and had very basic knowledge of aviation.

 

The actual designs almost always started as sketches in a notebook, and were transferred into digital sketches and flows. Depending on the feature, the design would be first created for Android and then transferred into a design for iOS or vice versa. Wireframes with detailed notes were created before passing the designs to developers.

 

Challenges:

 

-Working on a large wide global user base and balancing advanced and basic users: Our users came from all kinds of countries, cultures, languages, levels of tech-savyness, levels of aviation knowledge, screen sizes, etc. We aimed at finding solutions that would be advanced enough to intrigue true aviation nerds with the most detailed data possible, and simple enough for more main stream users to get basic flight info they were looking for.

 

-Screen space: At this time, iPhone 4 and smaller android phones still made up a large portion of our users. Cramming as much info as possible onto the screen to satisfy our advanced users was a challenge, and still remains a huge struggle. How to balance between very clean, sleek simple design trends, and yet satisfy every detail of aircrafts and flights were struggles.

 

-Feature crazy: FR24 has many, many features for a mobile app. And this is expected from their users in order to satisfy advanced plane spotters. How we were to prioritize the importance of these features, and how we were to move buried features directly on the map without taking up too much screen space were both struggles.

 

-Finding solutions that fit for iPhone, iPad, Android, Tablet and web: Being the only designer, we had limited time and resources to make every platform perfectly fit each guideline. Although the goal was always to follow Apple/Google guidelines, at some points in our process this was not possible, we had to put up with some “awkward” phases of design. We had issues on how to prioritize a solution for one platform over the other, and how to translate a very custom solution on iOS to Android and vice versa.

 

-Pioneering the new Material Design in beta: At the this time, the beta version of google’s Material Design had just come out. Although we were able to match some of the newer flat, paper-style trends, there were also other priorities that took over, such as functionality while these new guidelines solidified.

 

-Balancing function vs visual design: As their only designer, I sometimes had to prioritize function over visual design which was especially frustrating. Although I was excited for motion design and animation to finally explode in the mobile world, there were basic functionality issues that needed to be addressed first. I resonated greatly with Aarron Walter‘s pyramid, where a lot of work on this project was still focused towards the bottom to make the app functional, reliable, and usable:

 

maslow-hierarchy-interface-design

 

-Stepping in late in the process: Because the startup had been around for about 7 years, solid design was implemented pretty late in the game. A lot of time was spent at the beginning unifying functionality between platforms, and fixing very basic UX/UI issues. While addressing a list of existing issues, new features were also pumped out at the same time. This made unification of branding and design styles across platforms tricky.

 

————-Specific update details:

 

-Filters buried in side menu brought directly to the map: Map filter options that were previously deep inside the side menu were brought to the map where users have direct access to filter actions. Previously, in order to add a filter to the map, the user had to navigate Map>Side Menu>Filters>Add Filter.

 

Screen Shot 2016-06-24 at 3.20.59 PM

 

-Creating a test filter or “quick filter” vs a “saved filter”: Previously, users were forced to go through the steps of creating a filter to be saved without even testing to see how it looked on the map first. We worked to find a solution where the user could have the option to create a “quick filter” that they could use right away and then decide if they wanted to save later. This also helped support our two user groups as well: our advanced users continued to be able to save their filters to play with later, while our basic users were able to apply a filter to test out without having to take time to jump through the hoops of naming and saving it. I came up with some example filters for our more basic users to see when they first download the app, to encourage them to explore how filters could be useful for them.

 

Screen Shot 2016-06-24 at 4.32.38 PM

 

Knowing when a filter is applied to the map: Besides accessibility or forced saving, the other issue for map filters was that users misunderstood when a filter was applied to the map. To differentiate a normal map from a filtered map, a red border was added, along with a toggle button to view aircrafts in a normal filter mode vs a new highlighted state. Previously, when a filter was applied, only a small filter button appeared which was usually mistaken by the user for always being present.

 

filter - android

 

-Map settings brought directly to map: Previously, users who wanted to change map settings had to access them from deep within the side menu, without being able to test how their changes to settings looked. We brought a button directly to the map to open up a map settings shortcut. We made sure the settings view did not fill the entire screen, leaving part of the map available to showcase how the map looked as settings were changed by the user. The new design used actual image examples as buttons, helping users understand each setting a bit faster. In the end, we decided our settings were a bit too complicated to understand using the simple, flat, material-style icons that we first tried. The aircraft icons were added to the settings shortcut as a native ad for an in-app purchase. Once we placed it here, sales increased 470% for this in-app purchase on iOS.

 

settings shortcut - android

 

-Search function improvements – providing shortcuts to find flights: The main search’s design was also updated along with adding shortcuts to help the more basic user to find a flight in a quicker manner. The main top navigation bar was replaced to follow a similar solution of Google Maps app or Apple’s Maps app, where the bar at the top became the main search box. Searching was one of the main features that users utilized, we wanted users to seamlessly know how to search, so we followed the trends of Google/Apple maps that users were accustomed to. Beyond giving them example search tips in the search box, we listed out four other ways below to find their flight: searching for a “flight by route”, searching for a “flight by airport”, searching for a “flight by airline”, and searching “nearby flights.” This helped basic users who might not know a flight by the flight number. We also included recent searches, so users would not have to retype flights they had recently searched.

 

search

 

-Airport feature updated, and data about delays added: Design for arrival/departure boards within the airport feature were updated to a cleaner, fresher, more readable format. Icons to distinguish live vs historical/future flights were added. Live flights now have a blinking (animated) airplane to encourage users to tap to view this flight on the map. Flights that are not live (either already landed or that have yet to take off) have a simple info icon. If a user taps an info icon, they are given the appropriate info for the flight’s upcoming take off or it’s last landing info. We also discussed how the close “x”  buttons needed to be moved to the top to follow basic design guidelines.

 

airports -ios

 

A main tab for airports was also added, now making the satellite image of the airport much larger, with new weather data overlaying the image. METAR data was also added for our advanced users, they could now expand to see full METAR info. Also reviews about the airport were now integrated from Flightdiary.net, users could also now expand this to read the latest review.

 

airport - ios

 

An additional tab was added to the airport feature to showcase detailed information about delays from the last 2 hours, today, and yesterday. This now matched the information showcased on their website.

 

Screen Shot 2016-06-24 at 5.56.22 PM

 

-Walkthrough added: Because the app is very feature heavy, many features were unknown to the user. We added a walkthrough shown when the app is first opened. This also doubled as our tutorial guide in the help section of the app, where users could look into features whenever they pleased. The next phase aimed at simplifying the walkthrough we created, and adding small tips as the user used the app over time.

 

walkthough

 

-AR controls updated: Design of the AR view controls were updated with a slimmer slider and buttons. FR24 logo also updated.

 

AR-ios

 

-Main features brought to Apple Watch and Google Wear: When Apple watch came out, we added support for the “nearby flights” feature. Android wear was also supported.

wear

-New in-app purchase page:

 

in-app purchase

 

-Concept for alerts: A concept for updating the alerts interface was created. Previously, interface was greatly outdated, with lots of confusion for the user about alert triggers. Some triggers allowed in the interface were also not actually supported by the backend. Alert history view’s design was also updated.

 

alerts - ios

 

Also, alerts could now be added in 3 new locations, instead of just in the side menu as before to increase sales and make an easier user experience. User could now add an alert directly from a flight that user is viewing from the map, or from a flight they found on search, and also from a flight selected from the arrival/departure board from the airport view.

 

alert-flow-top

 

A concept was also created to move alerts to a subscription model instead of a one time in-app purchase. Here we discussed again having a simple version of alerts for our basic users and a more complex version of alerts for our advanced users. 

 

Subscription - android

 

-Side menu concept: A concept was also created to simplify the side menu and to add a place for a user profile to manage subscriptions. The aim was to make the side menu all about the user and their flights, alerts, and locations. The top “Explore” option was aimed specifically at the more basic user to help them find interesting flights on the map. The user literally has a world view at their fingertips of the flights up in the air at that moment. This means thousands of flights, which is a lot for a newbie at plane spotting to handle. The explore function would highlight specific flights that were interesting to check out.

 

side-menu concept

 

-Main Nav/Action button concept: The main goal of this concept was to help users navigate the different features of the app more seamlessly. Many features were buried inside the side menu, and so a goal was created to bring as many features to the map, out in the open where users could see their options. At the same time, we needed to avoid covering the map too much with buttons, and keep the features that were related together in an orderly fashion that would not overwhelm the user. The concept arranged the features into three main groups: Map specific interactions (including your location, map settings, map filters), Quick actions (adding an alert, saving a location, sharing a flight, sharing a screenshot), and alternative ways to explore flight data (with AR view, with Chromecast).

 

nav / actions

 

-New locations (bookmark) concept: Another feature that is buried in the side menu on the ios version is “locations” (previously named bookmarks). To save a location on the map, the user would navigate: Map>Locations>Add location, without even seeing the area of the map they were saving. Although the Android version had the add button on the map view already, it was also unclear what the user saving. The new concept would add a “add location” button to the map, and then open a new interface to select the area they want to save, without leaving the map view.

 

locations

 

-New logo for android:

 

logo

 

 

Learn more about Flightradar24: www.fr24.com

Collaborators: FR24 Product + Development teams