I designed an app to display the various services offered by New Era Fuels including delivery tracking, full shop of products, placement of orders and personal account log-in. This involved an agile design process from concept to build, including thorough UX/UI design and 3D rendering of the App in situ for advertising purposes.

Interface Screens - Having realised my New Era branding in both a Brand Guidelines book and in the office space, now I had to bring it to life on the small screen. In order to design a powerful and dynamic interface, I combined flat shapes and colours of the New Era Fuels branding with my 3D renders of products to give the feeling of depth.

Annotated UI - An annotated breakdown of the design rationale of the screens was crucial to pitch the interface to the directors; and having to hone in on every aspect of my design required inspecting and evaluating the effectiveness of every micro-step of the user-experience.

App and Product Render - To really bring the app design to life, I displayed the interface on a 3D model of a phone in a scene with a product. The image subtely shows the UX of ordering from the app, frol left to right; the phone on the left is displaying the Popular Products screen, the phone in the middle of the image shows the product selected, and to its right the product itself can be seen. This graphic was the conceptual foundation of my advert series for the app.

App Advert Render - Again using the Red Line motif of the app (and of the wider New Era branding) into a 3D space, I created a visual journey from app to the product, highlighting the ease of ordering. This (and the wider advert series) combines several of my multi-disciplinary skills in a single, succinct image.

Building the UI - To build the UI design, I started with bold and impactful shapes and colours, and the inclusion of the Red Line on-screen. This sparked the idea of using the line to guide the user's eye across the screen. I also took care not to overload the user with priority visual information and as such limited the red highlight buttons to one per screen; 'Track Order' in this case.