Tesla: Cybertruck
Category: UI, UX
For: Humber College
Challenge: Produce a Phone Application using Adobe Xd, using variety of the program’s animation features.
Inspiration: The Release took the world by storm and became a trending topic, I myself have saw it and heard about it first from Youtube, The creativity and uniqueness of the design of the truck to its specification have blew my mind, to learn more about the truck myself and eventually share them to others, I have decided to test out my skills and create one of my first app using Adobe Xd.
Goal: Hope the Users of the App can get inspired by Tesla’s Cybertruck and learn some basic facts as much as I did!
Early Wireframe
Project Requirements:
• Minimum of 10 Artboards (2 for Animation)
• At least 1 Voice Trigger
• At least 1 Auto-Animate
• At least 1 Drag
• At least 1 Overlay
Early Wireframe
Final Wireframe
Project Requirements*:
• Minimum of 10 Artboards (2 for Animation): 12 Artboards, 3 Animation Artboards
• At least 1 Voice Trigger*
• At least 1 Auto-Animate: An animated transition of red line moving in the Artboard Shop
• At least 1 Drag: Used for User to click and drag (power up) the logo to transfer them from Artboard Home 1 to Home 2
• At least 1 Overlay: Used to show the Price of CyberTruck
*Some requirements are completed not in the Final Wireframe but in Final Layout, Final Prototype of the App.
Final Layout
Project Requirements Fulfilled:
• Minimum of 10 Artboards (2 for Animation): 12 Artboards, 3 Animation Artboards
• At least 1 Voice Trigger: User must say “Showtime” to move from Artboard Welcome 1 to Artboard Welcome 2
• At least 1 Auto-Animate: An animated transition of red line moving in the Artboard Shop
• At least 1 Drag: Used for User to click and drag (power up) the logo to transfer them from Artboard Home 1 to Home 2, Used for User to click and drag to see Specification Charts between Artboard Spec 1 and Artboard Spec 2
• At least 1 Overlay: Used to show the Price of CyberTruck
Future Improvements:
• Improve user-friendly components by using gallery or carousel function for versatile board by making it more interactive and less space will be required.
• Open up “The Shop” and add more Content, in-depth information about each versions of the car and background on the company Tesla as well and benefits of electric cars.
• Refine the UI to make it more neat and professional, use grid function.
What would I do differently:
• Rather than having the UI look like a typical Tesla app, I want to try implementing a futuristic, punk vibe which was the theme used at the reveal, while keeping the minimalism approach (for user interactability)
Download the Prototype here:
https://xd.adobe.com/view/f7ecbf2b-ce82-4a3a-4663-2f947f6d5ac9-81dd/