Analysis of Interactive Programs/Interface design


Published on

Analysis of Tesla Motors and Adobe Kuler UI designs. Tesla Motors creates a customized experience for users that allows them to become familiar with the capabilities and features of the Model S. Adobe Kuler offers a consistent experience and speeds up a designer's work process.

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Analysis of Interactive Programs/Interface design

  1. 1. Analysis of Interactive Programs Adriana Morales | Feb 7, 2014 | COMM.4960
  2. 2. Tesla Motors: Model S Design Studio ( 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 now Human Element: Customer Stories
  3. 3. Tesla Motors: Model S Design Studio ( 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
  4. 4. Tesla Motors: Model S Design Studio ( 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. Customizations and pricing are shown Highlight selected link
  5. 5. 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 ( Global Navigation: navigate to the main sections of the website Loading image: gives a visual indicator to the user that content is loading Local navigation system: subsections and more information
  6. 6. 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 ( Tooltips are used to provide more information without obstructing the main content Call to action Call to Action with the price shown
  7. 7. A floating menu is used to provide the user with quick reference to their customizations and calculated price Borders are used to show which battery is selected. Tesla Motors: Model S Design Studio (
  8. 8. 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 ( Indicates which colors are shown in the color scheme Clear, big buttons to save
  9. 9. 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 ( Visual indicator of main color Highlighted color Selected color scheme type
  10. 10. 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 ( # of views | # of favs | # of commoents intuitive icon design menu options to edit colorscheme
  11. 11. Adobe Creative Cloud: Kuler ( 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 visible Icon design