The document provides a design brief for a Tesla Members Club mobile application. The purpose is to maintain high brand engagement and encourage advocacy among Tesla owners. The target audience are wealthy, tech-savvy Tesla owners ages 25-60. The app look and feel should be minimalist, modern and streamlined like the Tesla website. Key features include viewing vehicle status and controls, accessing Tesla events, store and news, and connecting with other Tesla owners. The budget for design and development is $15,000. Detailed specifications are provided for app pages like login, home, and "My Tesla" vehicle profile.
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