Date post: | 08-Sep-2014 |
Category: |
Design |
Upload: | adriana-morales |
View: | 117 times |
Download: | 3 times |
Analysis of Interactive ProgramsAdriana Morales | Feb 7, 2014 | COMM.4960
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Background & Intended Audience of Tesla Motors
Tesla Motors targets an elite market of electric car enthusiasts, wealthy individuals in STEM industries, Silicon Valley startup executives, and other working professionals with an income greater than $150k. Similarily to BMW and Audi, Teslas are symbols of high economic status and the technocracy; therefore, the website is designed to attract an elite audience.
Call to Action: Order nowHuman Element: Customer Stories
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Objective as a Marketing Tool
Along the Californian Pacific coastline and Palo Alto valleys, Tesla vehicles are renowned for their sleek design, elegant engineering and environmentally friendly features.
The Tesla Model S Design Studio allows a user to customize a Tesla car to fit their vision and lifestyle. As a marketing tool for Tesla, it’s main objective is to entice and persuade the user to buy the vehicle. As well, its customized experience and interactivity allows the user to become familiar with the features and capabilities of the car.
Featured: Tesla Car
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Tab Menus to show customizing options Carousel slider showcases more images/perspectives
Intuitive, Responsive Design
Users are able to customize the car by selecting different designs and colors for the roof, wheels, interior and paint. The selections are reflected in the div located to the right of the menu.
This design allows the user to refer back to the their decisions while showing the calculated price of purchasing the vehicle.
The carousel allows the user to switch back and forth between different images/perspectives of the vehicle. The carousel loads quickly and reflects the customization. Overall, it creates an immersive experience for the user.
Customizationsand pricing are shown
Highlight selected link
Responsive Navigation
Content is loaded dynamically, preventing the user workflow from being disrupted. Visual cues such as a loading icon are given to notify the user that more content is being loaded and the paging is responding.
Built using HTML5/CSS 3, the Design Studio loads quickly and gives the user instant gratification.
The interfaces uses a combination of global and local navigation systems located at the header of the page. The top header graphic provides flexibility and context for a hierarchical navigation system illustrated in the light and dark grey banners. A slide out menu is show underneath the global menu when hovered over. The slide out menu shows the users more options.
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Global Navigation: navigate to the mainsections of the website
Loading image: gives a visual indicatorto the user that content is loading
Local navigation system:subsections and more information
Interactivity & Responsiveness
The Model S Design Studio aesthetics are consistent with company’s branding and product design. Subtle gradations in color, sleek lines, and mosaic tiling are used to reflect the look and feel of the car. The striking visuals (images of the car) elude the lifestyle of Tesla cars and the type of life the user can obtain if they buy the car. Bright orange buttons are used to show call to actions such as the order button.
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Tooltips are used to provide more informationwithout obstructing the main content
Call to action Call to Action with the price shown
A floating menu is used to provide the user with quick reference to their customizations and calculated price
Borders are used to show whichbattery is selected.
Tesla Motors: Model S Design Studio (teslamotors.com/models/design)
Objective & Target Audience
Adobe Kuler provides artists and designers with a quick tool to create and find color schemes. Color schemes can be created from uploading a photo, browsing existing themes, or by using the color wheel on a desktop or through the mobile app.
As part of the Creative Cloud package, Kuler syncs the color schemes with Photoshop, Illustrator, etc. so that user does not have to log onto the site each time. The main objective is to improve and speed the creative process for artists/designers whenever and wherever they are.
Adobe Creative Cloud: Kuler (kuler.adobe.com)
Indicates which colors are shown in the color scheme
Clear, big buttons to save
Interactivity & Responsiveness
The interface mimics the design and behavior or a physical color wheel. The user can click on and drag one of the color hands to adjust the color scheme. The selected color is highlighted with a white border. On the left hand side, the user is able to select six different color schemes types and the the color wheel automatically adjusts. The quick adjustments were made possible with HTML5/CSS 3. Kuler loads quickly compared to the previous-Flash based service.
Adobe Creative Cloud: Kuler (kuler.adobe.com)
Visual indicator of main colorHighlighted color
Selected color scheme type
Visual Design
Kuler uses a minimalistic flat UI to allow the color schemes to pop. Nonetheless, the dark grey background influences the way the human perceives the colors. Dark purples and blues are lost in the grey while bright oranges and golds seem brighter than what they actually are.
Users should be given the option to change the background color to white, black or gray to see the colors in a different context.
Adobe Creative Cloud: Kuler (kuler.adobe.com)
# of views | # of favs | # of commoentsintuitive icon design
menu options to edit colorscheme
Adobe Creative Cloud: Kuler (kuler.adobe.com)
Searchability &Findability
Along with creating an original color schemes, users are able to search and filter themes. Color schemes can be searched by key terms or tags, while filtered by most popular, used and random. Nonetheless, the search functionality is not optimized because the color schemes are based on user tags.
Infinite scrolling is used to quickly load color schemes without disrupting the user workflow.
Users are able to comment and save colors by clicking on the color schemes.
Infinite scrolling, cutoff visually indicates more contentShows previous favoriteSearchbar is visibleIcon design