Analysis of Interactive Programs/Interface design

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


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


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.


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.


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.


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.


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.


# of views | # of favs | # of commoentsintuitive icon design

menu options to edit colorscheme


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

Analysis of Interactive Programs/Interface design

Design

Transcript of Analysis of Interactive Programs/Interface design