Brief 1 - BFR UI - Application of visual elements and initial user testing

Initial digital layouts

Wireframe alignment 

A light blue was initially chosen as the primary colour due to its inherent UI advantages (see blog post about colour blue), but that was later changed to a vibrant yellow-orange based on user feedback. The orange was deemed more sophisticated, more exciting and more in-line with the other dark coloured visual elements. An improvement made over the wireframe was the inclusion of a Floating Action Button (FAB) to allow users to search for other, unlisted flights. In later version this was removed, because of the small quantity of available flights in this design time zone. The top-bottom split colourway, inspired by contemporary editorial design, was later made all black as a result of user feedback. Testers felt it only distracted from the overall experience, and ruined the immersion of a dark mode app.

Incremental improvements 

In user testing two primary points of improvement were the contrast of the type on the 'Other flights' widgets and the obscurement of the imagery behind the background blur. Moving the journey title to the top of the image box solved both of these problems. The inclusion of the flight times of 'Other flights' reminds people that this is no ordinary global travel network, and helps to inspire and delight the user.  

Testers remarked positively on how the product had only subtle homages to its space-faring nature. Just like the Trainline app doesn't shout about the fact you're catching a train, the BFR app doesn't have to shout about the fact you're getting on a rocket. This doesn't negate the inclusion of other exciting and inspiring areas of the product, however, such as the in-flight info and flight speed etc. 

A vibrant and energetic colour, with incredible dark mode legibility.

Users corroborated the decision to use San Francisco as the primary typeface - it's contemporary and scientific in appearance, and designed specifically for digital interface use. It works incredibly well at small sizes, and looks well rounded and appealing in large sizes and weights. It also falls in line with Apple's iOS human interface guidelines.



Final Home layout 

Though iconography is usually either stroke-based or fill-based, the BFR app utilises both for their own advantages. Tickets has a filled icon because filled icons instil a lower cognitive load on the user and allow them to be more rapidly identified, and in the case of this interface, the Tickets section is the most important for active users. Stroke-based icons are used for the other two because of their more contemporary and engaging appearance.

This showfloor variant of the app is designed for iPhone X. There is no point in designing interfaces for devices that are already outdated when the app is released. Designing for iPhone X brought two new considerations into effect - taking account of the top screen 'notch' and ensuring no content was truncated, and making use of the additional real estate afforded by the replacement of the home button with a swipe gesture.

The product is designed to echo iOS guidelines just enough that it is visually harmonious with the rest of the system without losing brand integrity, unique visuals or an exciting experience. In reality, the background image of Earth could slowly animate as if rotating. More interestingly, it could show a high-resolution live stream from in-flight Falcon rockets. This would greatly enhance the delight and joy of the user without compromising usability. An additional Floating Action Button could then toggle the visibility of other on-screen elements, allowing the user to just view the live stream.