Wireframing

Wireframes are a good way to create order and hierarchy before adding the distraction of visual elements and imagery. 

Wireframes focus on:

• The range of functions available
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• The effect of different scenarios on the display

It is good practice to keep as many elements as close to the user as possible. The Hyperloop interface that this concept is being created for would be a 25" adjustable, retractable UHD display. Though not as big an issue as on smartphones, it would still benefit the user to contain as many interactive elements as possible to the bottom of the screen so less arm travel is required. 

It also aids the UX if all the interactive elements are contained to one static screen where possible. This avoids hiding or obscuring content. In multiple feedback sessions, the following wireframe was deemed the most appropriate and so was developed further:

Gotham was chosen as a placeholder typeface because of its suitability for digital environments and its contemporary applications. Tesla employ Gotham for their brand and UI. San Francisco was later chosen because it was designed explicitly for digital use (high x-height, distinguishable characters).