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.

1. Analysis of Interactive Programs
Adriana Morales | Feb 7, 2014 | COMM.4960

2. 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 now
Human Element: Customer Stories

3. 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

4. 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.
Customizations
and pricing are shown
Highlight selected link

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 (teslamotors.com/models/design)
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. 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 information
without obstructing the main content
Call to action Call to Action with the price shown

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 (teslamotors.com/models/design)

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 (kuler.adobe.com)
Indicates which colors are shown in the color scheme
Clear, big buttons to save

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 (kuler.adobe.com)
Visual indicator of main color
Highlighted color
Selected color scheme type

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 (kuler.adobe.com)
# of views | # of favs | # of commoents
intuitive icon design
menu options to edit colorscheme

11. 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 visible
Icon design