SlideShare a Scribd company logo
1 of 6
Download to read offline
UI Design Brief
UBC Digital Marketing & Communications Accelerated Diploma Program
Course 4: Planning the Customer Journey | Assignment 4
Team members:
Abe Nito, Shayo Lasekan, Shruti Moorthy, Audrey MacCormac
Tesla Members Club mobile app
Purpose:
What problem(s) are you trying to solve? What opportunities are you trying to gain?
What goal(s) are you trying to fulfill?
To develop a Tesla Members Club mobile application in order to maintain a high level of
post-purchase brand engagement with the (Tesla) customer segment and to encourage
brand advocacy, with a target live date of April 1, 2017.
Target audience:
Who are the users? Include demographics, psychographics, geographies, and behavioural
information.
TESLA OWNERS
Wealthy professionals, early adopters,:
- The app should include customizable features, should work seamlessly with the
vehicle, should be very personalized
- Simple and easy to use
● Gender: Male
● Age: ~ 25-60
● Income: 100K+
● Mindset: Interested in tech, active, car enthusiast, environmentally conscious
● Needs: High performance vehicle, functional for recreational activities,
sustainable/eco-friendly, technologically advanced vehicle, want to live in luxury,
desire possessions that represent milestones / accomplishments in their life
● Aspirations:
○ Be perceived as an early adopter, progressive, tech-savvy, forward-thinking
Look & feel:
How do you want it to look? What impression(s) do you want to impart?
● Minimalist, Modern
● Clear, simple, streamlined, straight to the point & easy to use = EFFORTLESS
● Only precise information
● Tesla Logo
● Basic colour palette
● Same fonts as TESLA website, same colour scheme for navigation tabs and CTAs
Tesla Members Club mobile app
Tesla Website: tesla.com (for reference)
Optimization: iPhone, Android
Brand Personality:
Tesla is a brand rooted in sustainability, innovation, style and luxury while being
environmentally friendly
Brand Perception:
Prestigious, luxurious, sophisticated, safe, and reliable
Logo Color Palette
Budget:
Creative design cost: $5,000
Development cost: $10,000
Hard costs: $750
Tesla Members Club mobile app
UI Page Specifications
App Launch Screen
(Log-in Page)
USERNAME:
PASSWORD:
Tesla Logo
● To welcome users to
the very prestigious and
exclusive Tesla
members club
Sign-in form:
● Members will be
provided a username
and password upon
receiving their vehicle
● The username and
password is their
access to the app,
which will contain
details and features of
their specific vehicle
● They will only have to
sign-in once
Tesla Members Club mobile app
● No scrolling required on page
The log-in page will load upon
launching the app for the first
time
UI Page Specifications
Home
(After log-in)
HOME
MY TESLA
EVENTS
TESLA STORE TESLA NEWS
SERVICE
TESLA COMMUNITY
Help Button:
● Same location on every page
in application (easy to find)
● Prompts a drop-down menu
● Provides link to FAQ page
● Links to Tesla contact
numbers and local
dealerships
Application Subsections:
● Home page has 6 app
subsections in total
● Represented with symbols and
formatted similar to apps on a
mobile phone
○ Not cluttered
○ Easy to navigate
○ Precise
Tesla Members Club mobile app
Primary Navigation Tab:
● Links to all pages in
application
● Prompts a drop-down menu
● Same location throughout
app (easy to find)
● Single navigation button for a
minimalist and precise layout
Title:
● Clearly states which page
in the app the user
currently has opened
● Standard Tesla font
● No scrolling required on page
MY TESLA
● Leads to page that
gives owner access to
features of their
vehicle:
○ Information
○ Control
TESLA STORE
● Link to online
store where
users can
purchase Tesla
merchandise
and accessories
for their vehicle
TESLA EVENTS
● A calendar of all
members-only Tesla
events in their location.
They have the option to
RSVP.
SERVICE:
● Links to a scheduling page
for the user’s local
dealership and vehicle repair
shops
● Displays scheduled /
upcoming appointments
TESLA NEWS
● Company information
● Current projects,
initiatives
● Updates from Elon
Musk
TESLA COMMUNITY
● Forums for the owners
to share car-related
questions and answers.
● Events
Tesla Members Club mobile app
UI Page Specifications
My Tesla
MY TESLA
STATUS CONTROL MY INFO
Title:
● Clearly states which page in the app
the user currently has opened
● Standard Tesla font
Primary Navigation Tab:
● Links to all other pages in application
● Prompts a drop-down menu
● Same location throughout app (easy to
find)
● Single navigation button for a
minimalist and precise layout
Social Share Buttons:
● Allows users to easily share
information such as the
specs of their Tesla
● Allows users to easily share
features of the app
CONTROL Button:
● Prompts a drop-down menu
● Accesses functions that are synced with
user’s vehicle, including but not limited to:
○ Lock/Unlock
○ Open/close sunroof/trunk/hood
○ Honk horn/flash lights
STATUS Button:
● Prompts a drop-down menu
● Accesses real-time vehicle information
including but not limited to:
○ Battery life
○ Tire pressure
○ Mileage / Tracking
○ Safety and maintenance alerts
● Importance to Target Audience:
○ Connected to own vehicle = an effortless/seamless extension of the car
○ Personalized
○ Customizeable
MY INFO Button:
● Prompts a drop-down menu
● Accesses vehicle information including but
not limited to:
○ Purchase information
○ Dealership information
○ Insurance
○ Warranty
Interactive TESLA image:
● Represents customer’s actual vehicle (same
model and aesthetic features)
● Interactive image which reacts to actions
executed by the app (e.g. shows trunk open)
● Layout is similar the Tesla website “Design
Studio” - users are already familiar with this
and it will therefore be easy to use
Real-Time Module
● Shows live information about vehicle (e.g.
current battery level)
● Shows command being executed (e.g. locking
vehicle)
Help Button:
● Same location on every page in application
(easy to find)
● Prompts a drop-down menu
● Provides link to FAQ page
● Links to Tesla contact numbers and local
dealerships
● No scrolling required on page

More Related Content

Similar to UI Design for Tesla App

Appreal guides rixos eng
Appreal guides rixos engAppreal guides rixos eng
Appreal guides rixos eng
Appreal
 
Appreal guides eng
Appreal guides engAppreal guides eng
Appreal guides eng
Appreal
 
Appreal guides tour
Appreal guides tourAppreal guides tour
Appreal guides tour
Appreal
 

Similar to UI Design for Tesla App (20)

Car Selling Major project report
 Car Selling Major project report Car Selling Major project report
Car Selling Major project report
 
Marketing Strategy: 'Plan It' App
Marketing Strategy: 'Plan It' AppMarketing Strategy: 'Plan It' App
Marketing Strategy: 'Plan It' App
 
Mychoice -classified site for buying, selling, rent etc
Mychoice -classified site for buying, selling, rent etcMychoice -classified site for buying, selling, rent etc
Mychoice -classified site for buying, selling, rent etc
 
Appreal guides rixos eng
Appreal guides rixos engAppreal guides rixos eng
Appreal guides rixos eng
 
Mobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising ConversionMobile App UX Principles: Improving User Experience and Optimising Conversion
Mobile App UX Principles: Improving User Experience and Optimising Conversion
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 
Mobile app ux_principles
Mobile app ux_principlesMobile app ux_principles
Mobile app ux_principles
 
Appreal guides eng
Appreal guides engAppreal guides eng
Appreal guides eng
 
Appreal guides tour
Appreal guides tourAppreal guides tour
Appreal guides tour
 
Advanced Technology and Luxury: Behind the Latest Lexus App
Advanced Technology and Luxury: Behind the Latest Lexus AppAdvanced Technology and Luxury: Behind the Latest Lexus App
Advanced Technology and Luxury: Behind the Latest Lexus App
 
Human Computer Interaction .docx
Human Computer  Interaction .docxHuman Computer  Interaction .docx
Human Computer Interaction .docx
 
Automotive community platform - My Garage
Automotive community platform - My GarageAutomotive community platform - My Garage
Automotive community platform - My Garage
 
Android app review sample work
Android app review sample workAndroid app review sample work
Android app review sample work
 
Car Care.pptx
Car Care.pptxCar Care.pptx
Car Care.pptx
 
Cartell
CartellCartell
Cartell
 
Project design
Project designProject design
Project design
 
Good Deeds App Design
Good Deeds App DesignGood Deeds App Design
Good Deeds App Design
 
Saravana cv
Saravana cvSaravana cv
Saravana cv
 
Saravana cv
Saravana cvSaravana cv
Saravana cv
 
Saravana cv
Saravana cvSaravana cv
Saravana cv
 

More from Abe Nito (12)

InVision - Portfolio Website Design
InVision - Portfolio Website DesignInVision - Portfolio Website Design
InVision - Portfolio Website Design
 
Portfolio - Style Guide
Portfolio - Style GuidePortfolio - Style Guide
Portfolio - Style Guide
 
Facejam
FacejamFacejam
Facejam
 
Whitecaps
WhitecapsWhitecaps
Whitecaps
 
GoPro Presentation
GoPro PresentationGoPro Presentation
GoPro Presentation
 
User Acquisition and Engagement
User Acquisition and Engagement User Acquisition and Engagement
User Acquisition and Engagement
 
BGC Holidays AR Challenges
BGC Holidays AR ChallengesBGC Holidays AR Challenges
BGC Holidays AR Challenges
 
BGC Holidays Photoshoot Deck
BGC Holidays Photoshoot DeckBGC Holidays Photoshoot Deck
BGC Holidays Photoshoot Deck
 
BGC Holidays
BGC Holidays BGC Holidays
BGC Holidays
 
BGC Holidays Print Ads
BGC Holidays Print AdsBGC Holidays Print Ads
BGC Holidays Print Ads
 
Cherry Mobile TVC
Cherry Mobile TVC Cherry Mobile TVC
Cherry Mobile TVC
 
Nokia E7 Final Presentation
Nokia E7 Final PresentationNokia E7 Final Presentation
Nokia E7 Final Presentation
 

Recently uploaded

WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di PasuruanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
infoobataborsi24
 
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di SampangWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
infoobataborsi24
 
obat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganyaobat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganya
infoobataborsi24
 
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
ahmedjiabur940
 

Recently uploaded (20)

WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di PasuruanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
 
Niche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptxNiche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptx
 
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di SampangWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Sampang
 
The seven principles of persuasion by Dr. Robert Cialdini
The seven principles of persuasion by Dr. Robert CialdiniThe seven principles of persuasion by Dr. Robert Cialdini
The seven principles of persuasion by Dr. Robert Cialdini
 
Digital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginnersDigital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginners
 
obat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganyaobat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganya
 
Killer Packaging | PrintAction
Killer Packaging | PrintActionKiller Packaging | PrintAction
Killer Packaging | PrintAction
 
youtube_marketing_partner_vling_service_introduction
youtube_marketing_partner_vling_service_introductionyoutube_marketing_partner_vling_service_introduction
youtube_marketing_partner_vling_service_introduction
 
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdfGenerating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdf
 
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
Top Abortion Clinic in Muscat +918761049707!!!!!!!!!!! Get Cytotec kit availa...
 
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdfTea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
 
Digital PR & Content Marketing Lecture for Advanced Digital & Social Media St...
Digital PR & Content Marketing Lecture for Advanced Digital & Social Media St...Digital PR & Content Marketing Lecture for Advanced Digital & Social Media St...
Digital PR & Content Marketing Lecture for Advanced Digital & Social Media St...
 
Best Digital Expert Corporation of India
Best Digital Expert Corporation of IndiaBest Digital Expert Corporation of India
Best Digital Expert Corporation of India
 
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdfThe Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
 
5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptx5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptx
 
Taprank - Boost your Google reviews with personalized NFC cards
Taprank - Boost your Google reviews with personalized NFC cardsTaprank - Boost your Google reviews with personalized NFC cards
Taprank - Boost your Google reviews with personalized NFC cards
 
The Majestic Salar de Uyuni A Natural Wonder of Bolivia.pptx
The Majestic Salar de Uyuni A Natural Wonder of Bolivia.pptxThe Majestic Salar de Uyuni A Natural Wonder of Bolivia.pptx
The Majestic Salar de Uyuni A Natural Wonder of Bolivia.pptx
 
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting AppsFantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
 
Rhys Cater, Precis, The future of media buying with Generative AI.pdf
Rhys Cater, Precis, The future of media buying with Generative AI.pdfRhys Cater, Precis, The future of media buying with Generative AI.pdf
Rhys Cater, Precis, The future of media buying with Generative AI.pdf
 
Intelligent Cryptocurrency VIP Digital - Membership Area
Intelligent Cryptocurrency VIP Digital - Membership AreaIntelligent Cryptocurrency VIP Digital - Membership Area
Intelligent Cryptocurrency VIP Digital - Membership Area
 

UI Design for Tesla App

  • 1. UI Design Brief UBC Digital Marketing & Communications Accelerated Diploma Program Course 4: Planning the Customer Journey | Assignment 4 Team members: Abe Nito, Shayo Lasekan, Shruti Moorthy, Audrey MacCormac Tesla Members Club mobile app
  • 2. Purpose: What problem(s) are you trying to solve? What opportunities are you trying to gain? What goal(s) are you trying to fulfill? To develop a Tesla Members Club mobile application in order to maintain a high level of post-purchase brand engagement with the (Tesla) customer segment and to encourage brand advocacy, with a target live date of April 1, 2017. Target audience: Who are the users? Include demographics, psychographics, geographies, and behavioural information. TESLA OWNERS Wealthy professionals, early adopters,: - The app should include customizable features, should work seamlessly with the vehicle, should be very personalized - Simple and easy to use ● Gender: Male ● Age: ~ 25-60 ● Income: 100K+ ● Mindset: Interested in tech, active, car enthusiast, environmentally conscious ● Needs: High performance vehicle, functional for recreational activities, sustainable/eco-friendly, technologically advanced vehicle, want to live in luxury, desire possessions that represent milestones / accomplishments in their life ● Aspirations: ○ Be perceived as an early adopter, progressive, tech-savvy, forward-thinking Look & feel: How do you want it to look? What impression(s) do you want to impart? ● Minimalist, Modern ● Clear, simple, streamlined, straight to the point & easy to use = EFFORTLESS ● Only precise information ● Tesla Logo ● Basic colour palette ● Same fonts as TESLA website, same colour scheme for navigation tabs and CTAs Tesla Members Club mobile app
  • 3. Tesla Website: tesla.com (for reference) Optimization: iPhone, Android Brand Personality: Tesla is a brand rooted in sustainability, innovation, style and luxury while being environmentally friendly Brand Perception: Prestigious, luxurious, sophisticated, safe, and reliable Logo Color Palette Budget: Creative design cost: $5,000 Development cost: $10,000 Hard costs: $750 Tesla Members Club mobile app
  • 4. UI Page Specifications App Launch Screen (Log-in Page) USERNAME: PASSWORD: Tesla Logo ● To welcome users to the very prestigious and exclusive Tesla members club Sign-in form: ● Members will be provided a username and password upon receiving their vehicle ● The username and password is their access to the app, which will contain details and features of their specific vehicle ● They will only have to sign-in once Tesla Members Club mobile app ● No scrolling required on page The log-in page will load upon launching the app for the first time
  • 5. UI Page Specifications Home (After log-in) HOME MY TESLA EVENTS TESLA STORE TESLA NEWS SERVICE TESLA COMMUNITY Help Button: ● Same location on every page in application (easy to find) ● Prompts a drop-down menu ● Provides link to FAQ page ● Links to Tesla contact numbers and local dealerships Application Subsections: ● Home page has 6 app subsections in total ● Represented with symbols and formatted similar to apps on a mobile phone ○ Not cluttered ○ Easy to navigate ○ Precise Tesla Members Club mobile app Primary Navigation Tab: ● Links to all pages in application ● Prompts a drop-down menu ● Same location throughout app (easy to find) ● Single navigation button for a minimalist and precise layout Title: ● Clearly states which page in the app the user currently has opened ● Standard Tesla font ● No scrolling required on page MY TESLA ● Leads to page that gives owner access to features of their vehicle: ○ Information ○ Control TESLA STORE ● Link to online store where users can purchase Tesla merchandise and accessories for their vehicle TESLA EVENTS ● A calendar of all members-only Tesla events in their location. They have the option to RSVP. SERVICE: ● Links to a scheduling page for the user’s local dealership and vehicle repair shops ● Displays scheduled / upcoming appointments TESLA NEWS ● Company information ● Current projects, initiatives ● Updates from Elon Musk TESLA COMMUNITY ● Forums for the owners to share car-related questions and answers. ● Events
  • 6. Tesla Members Club mobile app UI Page Specifications My Tesla MY TESLA STATUS CONTROL MY INFO Title: ● Clearly states which page in the app the user currently has opened ● Standard Tesla font Primary Navigation Tab: ● Links to all other pages in application ● Prompts a drop-down menu ● Same location throughout app (easy to find) ● Single navigation button for a minimalist and precise layout Social Share Buttons: ● Allows users to easily share information such as the specs of their Tesla ● Allows users to easily share features of the app CONTROL Button: ● Prompts a drop-down menu ● Accesses functions that are synced with user’s vehicle, including but not limited to: ○ Lock/Unlock ○ Open/close sunroof/trunk/hood ○ Honk horn/flash lights STATUS Button: ● Prompts a drop-down menu ● Accesses real-time vehicle information including but not limited to: ○ Battery life ○ Tire pressure ○ Mileage / Tracking ○ Safety and maintenance alerts ● Importance to Target Audience: ○ Connected to own vehicle = an effortless/seamless extension of the car ○ Personalized ○ Customizeable MY INFO Button: ● Prompts a drop-down menu ● Accesses vehicle information including but not limited to: ○ Purchase information ○ Dealership information ○ Insurance ○ Warranty Interactive TESLA image: ● Represents customer’s actual vehicle (same model and aesthetic features) ● Interactive image which reacts to actions executed by the app (e.g. shows trunk open) ● Layout is similar the Tesla website “Design Studio” - users are already familiar with this and it will therefore be easy to use Real-Time Module ● Shows live information about vehicle (e.g. current battery level) ● Shows command being executed (e.g. locking vehicle) Help Button: ● Same location on every page in application (easy to find) ● Prompts a drop-down menu ● Provides link to FAQ page ● Links to Tesla contact numbers and local dealerships ● No scrolling required on page