Brief 1 - BFR UI - Design boards

Brief 1 - BFR UI - Device mockups

Brief 1 - BFR UI - Website

An accompanying website was created to show how the user experience could be extended to a variety of form factors and screen sizes

Example content helps the user understand what they should be inputting

Using the same iconography as the app ensures users can easily transition from one device to the next without a significant learning curve

The rounded corners have been removed to avoid the site echoing iOS too much - the design must not revolve around another style, rather fit well into it.

Brief 1 - BFR UI - Creation of other pages and style alignment

The challenge of the Tickets section was including the most amount of useful information possible without making the design too cramped or reducing legibility/usability; or having a significant negative effect on necessary cognitive load. By the time this system is active or widespread, it is possible that machine intelligence/an artificial-general-intelligence would be used to recognise the legitimacy of passengers rather than a traditional digital barcode system, but this product has to be designed with current technological reach and advanced redundancy in mind.

A rejected variant of the Tickets section - the background imagery was deemed to compromise legibility and interfere with the barcode reading algorithm. Additionally, the majority of testers preferred the visual appearance of no background imagery. 

Though top placement of back buttons is less than ideal given the finger reach required, this is the solution that iOS uses given the placement of an almost universal bottom nav bar. Additionally, back swipe gestures are becoming more common and the BFR app is designed to almost never need the use of a back button. The continued use of #FF9500 significantly improves user recognition of features and important information. In the screen above, almost every tester looked first at the rocket name, then at the back button. This proves the incredible power of colour in creating more usable user experiences.

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. 

Brief 1 - BFR UI - Reachability and The Thumb Zone

In Designing Mobile Interfaces, Steven Hoober shows that 49% of people hold their smartphones with one hand, relying on thumbs to do the heavy lifting. Josh Clark took this even further in his book Designing for Touch and determined that 75% of interactions are thumb-drive. Human thumbs can only stretch so far, and it is important for interface and experience designers to take this into account when designing products intended for their use. 

Thumb-zone mapping for left- and right-handed users. The “combined” zone shows the best possible placement areas for most users.

Apple combats the issue of thumb reach in their larger iOS devices with their Usability feature, which shifts the screen content down when needed.

Brief 1 - BFR UI - Wireframing

A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the hierarchy of items on a screen and communicate what the items on that page should be based on user needs.

The final wireframes for this concept allow for multiple elements to have varying levels of hierarchy - the top level being an access point to your upcoming flight ticket. If the user launches the app while they have a ticket available for use, chances are that's what they're looking for. The access point also gives vital information about the trip to save the user having to go somewhere else to find out. The next step in the hierarchy is the ability to find other trips, and then finally the ship tracking ability. Ship Tracking is a feature that goes alongside Ship Information in providing joy and convenience to the user - convenience in that they see how far away their ship is from them, and joy in the real-time, exciting nature of it.  

Brief 1 - BFR UI - Research - WIP

Side Scrolling

Most digital interfaces incorporate some form of vertical scrolling, but the rise of mobile app stores brought rise to side-scrolling. Its usage is usually limited to cases where not much scrolling is required e.g. a small number of choices are present, and is a very effective way of effectively making use of the small real estate without having to squash or truncate the content. 

Flat Skeuomorphism 

After skeuomorphism lost favour in the UI/UX community, extremely flat graphics and layout became popularised primarily by the Windows Metro UI. Apple helped to find a medium between the two with iOS 7 onwards, and Google with the Material Design language of Android. Currently, the overlaying trend is to treat user interfaces in their own right without having to play to their physical equivalents, but by also including a layer of metaphorical material or physicality to them e.g. through the use of drop shadows to create depth/distance/scale, and homages to their physical equivalents (e.g. the use of ticket shaped digital tickets) 

Cards 

Smartphones popularised a card-based user interface because of their efficient use of space combined with their highly usable press areas and ability to display a large (and adaptable) range and scale of content or imagery. In the above example you can also see a continuation of the colour gradient trend.  

iOS 11 and its use of Negative Space, Drop Shadows, Translucency and Large Type  

Apple's most recent smartphone operating system iOS 11 improves on a variety of aspects within its human interface. The wide ranging use of literal 'white' space corroborates the importance of the colour white to Apple's brand. A universal example of this is their white headphones - if you see someone walking down the street with white headphones in, your assumption is that an iPhone resides in their pocket. Major parts of Apple's industrial design have also included white materials, and their Human Interface team is now making it a key part of their UI. The use of large type headers helps the user understand exactly where they are at all times, and the almost universal presence of a bottom nav bar gives the user a way to go somewhere else. The top location of iOS's back buttons is not good for reachability, especially considering the much larger dimensions of contemporary devices, but the only alternative would be to create a bottom-heavy, cramped bottom bar. Instead they have adopted gesture-based back swipes; a welcome feature with only a small learning curve. Translucency helps to create the metaphorical sense of physicality and material through its visual links to materials like glass and plastic. Transitioning iconography from being outline-based to fill-based helps reduce cognitive load on the user, subsequently improving recognition and usability. 

Brief 1 - BFR UI - Initial Development, Considerations and User Personas

Purpose

Website
To provide information on and provide bookings for the BFR Earth-to-Earth rocket transportation network

App
To provide real-time info, allow users to view and book flights, use their tickets and see cool stats/live visuals etc. 


Considerations

No signal in space - does the app have an in-flight purpose?

UX of rocket travel will be mostly delivered through the speed and view, and the short distance of the trips further renders in-flight entertainment redundant. Why would you look at a screen when you could look into space/at Earth from space?

UX Elements + Mood Design 

Futuristic, realistic, exciting, simple, visual, live, fast, spacey-but-not-overly-so.

Archetypal User Personas 

26 y/o male 
Product Architect
Often travels from San Francisco - Shanghai for business meetings, liaisons etc.
Interested in tech, current affairs, efficiency, getting things done. Annoyed by gimmicks and things that get in his way. 

39 y/o female
Chief Designer 
Occasionally travels from London to Seoul for design reviews with her suppliers, problem resolution meetings etc. 
Very punctual, refined, and sophisticated. Lives in the future. 

Brief 1 - BFR UI - Experience design for SpaceX's Big Falcon Rocket

SpaceX's Elon Musk has proposed using their Mars rocket for Earth-to-Earth travel as well as space-based travel for incredibly fast cross-continent travel. An example flight, from New York to Shanghai, would take 29 minutes. 

A Trainline-style ticket booking and tracking app for the service would allow me to capitalise on the global attention around the proposal, and also allow it to feel more real and achievable. 


Features

Find flights, book flights, track flights. Get exciting stats and info.


Research Considerations


What does the Trainline succeed/fail at?
How much does the app have to shout about it being about spaceflight? Does the Trainline shout about it being about trains or do airline sites shout about aircraft? If so, to what degree? Why?

What information do users need, and what info do they want? Where do you draw the line? 


Design Considerations

Alignment with the SpaceX brand? Assumptions to be made about the future of the brand and its adaptations? 

Extended Practice - 10 Briefs WIP

The following briefs allow for necessary skill development to occur (particularly in user interface and experience design) whilst also expressing my personal interests, likes and desires - allowing for the creation of high useful and appropriate designs for my portfolio. 

 Digital Driver Display in the Range Rover Velar

Automotive instrument cluster
Design the digital instrument cluster for a Level 3 autonomous electric vehicle in order to propose a progressive but realistic vision for Jaguar Land Rover.

Approximate time to complete:  3 weeks 
COMPLETE

Concept UI in the Crew Dragon

Spacecraft UI - Crew Dragon
Is there a place in the future for manually operated spacecraft? This concept will explore a vision for a highly practical touchscreen user interface providing function and information to future astronauts based aboard the SpaceX Crew Dragon spacecraft.


Approximate time to complete:  3 weeks 

RINO Packaging
Help provide a design direction for RINO, a startup emergency supplies company from California. Create packaging mockups and UI direction using their pre-designed branding and inspirational research. 


Approximate time to complete: 5 days 

Earth-to-Earth space transport app/website UI - BFR
Create a conceptual website and app for the SpaceX Big 'Falcon' Rocket Earth-to-Earth rocket transportation proposal. Would allow users to book flights, check times, track flights etc. and have an inspiring but realistic and contemporary design direction (not overly futuristic and off-putting; the point is to enable people to put themselves in the shoes of those taking a flight). Allowing people to imagine themselves booking and taking such a flight helps to motivate optimism in order to actually realise the vision. 



Approximate time to complete: min. 2 weeks 
COMPLETE

SpaceX website redesign
Propose an aesthetic and tone-of-voice update to the SpaceX's website in order to better convey the mission, vision and execution of the company. Utilise the current branding to create a more exciting (but still approachable and realistic) appearance to better inform and motivate the average non-enthusiast.  


Approximate time to complete: 2 days

RSA Competition Brief
Design a product, service or system to improve health and wellbeing by encouraging and/or enabling better sleep


Approximate time to complete: min. 3 weeks 
COMPLETE

Space weather app 
Create a simple, beautiful space-weather app to encourage interest in space exploration


Approximate time to complete: min. 1 weeks  

Coffee-ordering interface
Create a brutalist-inspired, minimalist UI design for an interface allowing personalised coffee to be made. 


Approximate time to complete: min. 1 weeks  



Sci-fi video game UI
Design a set of user interfaces/digital designs which would be appropriate for use in a sci-fi setting, particularly a video game. 



Approximate time to complete: min. 1 weeks