Tesla Roadster Website Redesign- MediaMonks (Internal)
Media.Monks has multiple internal assignments used to asses the skills of designers who are applying for a position within the company. These assignments are also used when existing employees are looking to switch to another department. The following brief is one example of such assignments.
‘Design the Roadster page addressing both desktop and mobile use. Consider that Tesla is very premium. We expect you to experiment with form and layout in order to prove that Tesla is the best on the market. The main page should not be targeted to hard-sell the product, but focus on explaining why their product is better than the competition.’
I started by researching how Tesla is currently promoting the Roadster on their website and social media. I looked into details such as specs, main feature points that make the car unique, expected release date, available colours etc. This helped me determine how I wanted to setup the website. I then made lot of sketches and ended up with the mockups as shown in the gallery below.
For the colour palette I stuck to contrasting and modern / industrial colours such as blacks and grays, in combination with white for the text and other UI elements. To add a pop of colour I implemented a vibrant red, which matches the red Roadster and the Tesla logo.
The brief specifically mentions not to focus on sales but rather on promoting why the Roadster is the best of the best, which is why I decided to display some of the main feature points of the Roadster directly on the landing page.
The landing page is horizontally divided into three different sections with images of the Tesla Roadster. Each image features a specific part of the car with its corresponding feature point. The images light up on hover, indicating the possibility of interaction. On click, the selected image expands horizontally. A short description of one of the three mentioned feature points appears under the title.
The second page contains a slogan, which describes the Roadster in one powerful sentence. Accompanied by the slogan is a 3D model of the Roadster, which the user can rotate in all directions. For people with disabilities or who prefer not to navigate through swiping / dragging motions, there are two arrow buttons. On click, the model automatically rotates into a set of predetermined positions. Alongside the 3D model are the three main specs related to the speed of the car, which Tesla originally features on their landing page. A complete list of specs can be found on the third page.
On the fourth and final page, the user is provided with the current information regarding the release and reservations of the Roadster. The three available Roadster colours that have been officially confirmed so far are visualized in the accompanying imagery.