1TSAI, SAMPSON 0316793103167931 TSAI, SAMPSON
Sampson TsaiVisual Designer
MA FINAL PORTFOLIOCASE STUDIES
2TSAI, SAMPSON 03167931
Introduction
I’m a visual interactive designer from Taiwan, studying and working in San Francisco. I am always passionate about doing power sport related design.
3TSAI, SAMPSON 03167931
Case Studies
NISSAN INKIntroductionProject BriefGen Z CharacteristicsPersonaEmpathy MapTechnologyUser StoryUser FlowExterior ConfigurationInterior ConfigurationUser Scenario for WorkUser Scenario for StorageWork FlowFull-Size Usability TestingUI Development – R1 UI Development – R2UI Development – R3Business Case
050607080910111213141516171819202130
3233343536373839404142434445464950515253
5556575859606163646566676869
Statement of InterestDemographic ResearchStatistical ResearchMy SolutionSWOT AnalysisCompetitive AnalysisMood & Typography BoardPrimary UsersSecondary UsersKey Persona 01Key Persona 02Key Persona 03Primary Task FlowSecondary Task FlowUser StoryTechnical SpecificationLogo ExplorationLogo Anatomy GeometryUse on Dark BackgroundColor Palette
BackgroundHomeStoryDesign FlowProductsInspirationMobileWireframes – R1Wireframes – R2Logo AnatomyUse on Dark BackgroundPrimary, Secondary ColorsTypeface ResearchColor Exploration
VOYANCE MOQU
TEAM PROJECT
5Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Nissan Ink is an autonomous mobile workspace that introduces the world to the mobilized economy by spreading the shared economy to all corners of the globe.
Introduction
My role as the lead UX/UI - Kick Off Concept Ideation - Create Compelling Use Cases- Design User Experience / User Interface - Finalize POC Video in After Effects
6Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
- High cost to bring your ideas to life
- Wasted time during transit
Problem
Solution- Easily attainable workspace that is ready to use
- Autonomous mobilization
Project Brief
7Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Gen Z Characteristics
-Non-conformists
Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Persona
8
9Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Empathy Map
10Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Technology
11Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
MODEMODE2D 3D
Project
1. Got a freelance project for modeling and branding.
3. Nissan offers a fully equipped studio with reconfigurable space.
4. They start to work more efficiently, saving more money. While they’re at the docking station, everything is within reach.
=
2. Unable to afford all the equipment + office space.
TX-5 ROBOT89KBuckers
70% Ffunded 49 days
1.4M USD
Pledged of $2M goal
5. When they are on the road, the exterior of the car will showcase their portfolio, as well as the clients they worked with.
TX-5 ROBOT89KBuckers
70% Ffunded4 9 days
1.4M USD
Pledged of $2M goal
6. They’re able to attract enough clients and raise enough money to buy an office and hire their own employees.
User Story
12Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
User Flow
Login 09:00AM
Work Session
Progress
Progress
Today’s Task
Task Completion
Schedule
Today’s Route
Today’s RouteNotifications
13Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Exterior Configuration
Fingerprint Access
OLEDHeadlight
Beta Testing NetworkingHello
14Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Interior Configuration
Reconfigurable Input
Passenger Color
Screen Range
15Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
User Scenario for Work
16Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
User Scenarios for Storage
17Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Work Flow
18Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Full-Size Usability Testing
19Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R1
20Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R2
21Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R3
22Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Team Schedule
23Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Collect Inspirations
24Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
25Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Search Nearby Workstations
26Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
27Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Collaboration Space
28Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
29Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
30Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Business Case
VOYANCE
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
32
Statement of InterestI’ve been living in big cities most of my lifetime because of money, school, work, and transportation. Instead of seeing cars and busy pedestrians through the window, I have always wondered what is it like to live in the wild safari, the forest or just a small beautiful village.
I usually wake up more naturally when the sunlight penetrates in. I also get a much deeper sleep when I can hear the raindrops falling on my windows. For this thesis idea, I want to bring people closer to the environment that they dream of and are inspired by.
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
33
Demographic ResearchWhy most Americans have never travel outside the U.S.?
Work Culture
Skepticism and Ignorance
Many Americans follow the same pattern: work hard in high school, go to college, accrue a load of debt and get a job right away to work it off, Arndt said. The United States doesn’t promote taking a year off between major life phases like New Zealand or the United Kingdom.
We buy goods from Sri Lanka and outsource business to India, but when it comes to traveling to these destinations, Americans would rather stick close to home.
Cost and LogisticsThe 30.3 million Americans who traveled overseas for vacation in 2009 spent an average of $2,708 each -- including airfare, lodging and other expenditures, according to the Office of Travel and Tourism Industries. It seems that getting there is about half the battle: Average airfare per person was $1,177.
Cultural and Geographical DiversityAmerica has it all: “From the mountains, to the prairies, to the oceans, white with foam,” as “God Bless America” proclaims.
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
34
Statistical Research308 million-plus citizens in the United States, only 30% have passports
% o
f ci
tize
ns h
ave
pas
spo
rts
75%
UK
60%
Canada
30%
USA
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
35
My SolutionA digital window wrap for the city dweller to see another side of the world through their window
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
36
SWOT Analysis
STREN
GTHS
THREATS
WEAKNESSES
OPPOTUNITIES
h Real-time experience h Reconfigurable environment h Multiple locations h No direct competitors
h Partnership with homeowners
h Interactive window market for
autonomous car
h Limited to autonomous houses h High initial cost
h Not enough autonomous house market
h Property get stolen h Private property might lead
to lawsuit
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
37
GLARE REDUCTION
HEAT REJECTION
DAYLIGHTING
TINT ADJUSTMENT
BLIND
SOCIAL MEDIA
YELP
INTERACTIVE INTERFACE
WATCH VIDEO
MOBILE APP SUPPORT
REAL-TIME EXPERIENCE
MULTIPLE LOCATIONS
RECONFIGURABLE ENVIRONMENT
VOYANCE
Competitive Analysis
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
38
Mood & Typography Board
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
39
Primary UsersAmbitious, imaginative, observant, mid-lower class city dwellers
Needs
Motivation Inspiration Relaxation
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
40
LifestyleHealth Achievement
Secondary UsersDelicate, adaptive, capable, middle class city dwellers
Needs
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
41
Key Persona 01
Riley, 22Skillful Fearless Sensible Graphic Designer
StatusSingle
EducationGraphic Design
Main GeariPhone 6,MacBook Pro
Salary$50,000
Most Used AppShazam, Linkedin,Dropbox, Notes
TransportationMuni and Bike
Tech Savvy4.5 Stars
HousingRent
LocationSan Francisco
Nothing is impossible, the word itself says ‘I’m possible’!
Riley just got her first job in a mid-sized consulting firm as a junior designer. Although she loves to explore different places and cultures, she can’t afford to own a car in the city. Her inspirations and research heavily rely on the Internet. She needs extra spark to produce creative works that would get her name on the map.
FAVORITE BRANDS
PERSONAL BACKGROUND
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
42
Intelligence without ambition is a bird without wings.
Key Persona 02
Erika,32Ambitious Imaginative Observant Actress
Erika is a Japanese actress, who has appeared in a few films. She’s been on numerous auditions to try out bigger roles in movies, but none of the producers see her potential on screen yet. She needs an environment to help her engage more with the roles she is trying to portray.
FAVORITE BRANDS
PERSONAL BACKGROUND
StatusSingle
EducationActing
Main GeariPhone 6s,MacBook
Salary$60,000
Most Used AppFacebook, Twitter,Instagram
TransportationUber
Tech Savvy3.5 Stars
HousingRent
LocationTokyo
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
43
Live life for the moment because everything else is uncertain!
Key Persona 03
Joshua,28Delicate Adaptive Capable Product Manager
Joshua is a product manager at Trident Case. He loves his job, and he works 40–60 hours a week. Even though he owns a house in Irvine, he still decided to rent a small apartment near the his office due to the long commute. He’s been dealing with stress and sleep problem for quite some time. He needs environment to help him relax and get rejuvenated.
FAVORITE BRANDS
PERSONAL BACKGROUND
StatusSingle
EducationMarketing
Main GeariPhone 6,PC
Salary$90,000
Most Used AppFB Messenger,Line, WeChat
TransportationCar
Tech Savvy5 Stars
HousingRent
LocationIrvine
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
44
Primary Task Flow
cStep 1:
Select a view to project on their window
cStep 2:
Simply sync the view on to the display
cStep 3 (optional):
Create weather “Effect” on your selected location
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
45
cStep 1:
Enable the app on the tablet
cStep 2:
Select “Discover” icon on top to enable the map
cStep 3 (optional):
Simply sync the view to the display
Secondary Task Flow
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
46
This is Sandy, and she works at a small consulting rm in San Francisco.
When she gets home from work at night, she closes her curtain for privacy and distraction from the outside.
Due to the resources, educations, work, and transportations, she’s been living in big cities her whole life.
We’ve discovered Sandy’s lifestyle has reflected on many city dwellers all around the globe. The ones who need to relax, inspire and connect with the real world.
She also see busy people catching buses.
We want to bring the beautiful and exciting views ,the views only the billionaires could have to your window by introducing Voyance.
VOYANCE
User Story
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
47
!"#"" $%
#&'
(#)*
+#,%'
+-./0-123.44556
*156-
Wifi Camera
768-19./-12*156-2
Light
Light
Emissive Layer
Conductive Laye
Anode
Substrate
5
Relax
VOYANCE
Activities & Hobbies
Moods
Daily Lifestyle
Productivity
Life Skills
Creativity
Social Life
Food Choices
Clothing Choice
Thoughts
Getting up From bed
Emotions
Voyance is a transparent 1mm OLED glass lm rolls up like paper, allows you to see and interact with the location of your choice.
It has proven that the environment we surrounded by could influence us in many ways.
All you need to do is applying the film on your window.
How do you use it?Simply touch the Voyance surface to enable the controller interface. Touch anywhere you like.
Your window will immediate link with our capturing devices after the installation.
As the user select “Relax”, Voyance will help you nd the location to project on your window.
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
48
Relax > Paris
Discover
VOYANCE
5
After the user select an destination, simply expand to full scale or manipulate the weather from the menu.
When you don’t know what you want for your scene, tap on “Discover” icon to explore from the map.
Once the scene is in full-screen, the user could also interactive with the glass.
If you have a killer view outside your window, make some money by sharing it with million of others.
When you don’t know what you want for your scene, tap on the “Discover” icon to explore from the map.
Voyance mission is bring people closer to the existing environment to their window even if they can’t be there at the moment.
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
49
Technical Specification
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
50
Logo Exploration
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
51
Logo Anatomy Geometry
XX
X X
2X 2X
52
COURSEINTERACTIVE DESIGN & CONCEPTS
INSTRUCTORALEXANDER PINEDAVOYANCE FALL 2015
SAMPSON TSAI
VOYANCE
Use on Dark Background
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
53
Color Palette
Gradients Core Palette
Chart and Data Visualization Palette
#4d6cb3
R78, G109, B180 R148, G149, B151
#4d6cb3
#4d6cb3
R73, G194, B194 R191, G192, B193
#4d6cb3 #4d6cb3
#4d6cb3
R170, G210, B206
R238, G42, B123 R39, G170, B225R170, G210, B206 R38, G34, B98R46, G148, B188
R255, G255, B255 R73, G194, B194
#4d6cb3 #4d6cb3
#4d6cb3 #4d6cb3 #4d6cb3#4d6cb3
BackgroundMOQU (木) simply translates to “wood” in Japanese. They want to express modern design and quality through the
simplicity of the brand and website.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
55
HomeThe mission here is to introduce sustaintable and beautiful furniture through clean design layout.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
56
Story“Simplicity is the ultimate sophistication.”I want to show their authenticity through minimal design elements.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
57
Design FlowSpreading out the text from left to right in each section helps viewers seamlessly connect with the visual.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
58
ProductsShowing quality not quantity through different colors and sizes brings a much richer feel to the brand.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
59
Inspiration Inserting a section for viewers to be inspired from different ways of stacking their modular cube seems ideal here.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
60
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
61
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
62
Wireframes – R1
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
63
Wireframes – R2
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
64
Logo Anatomy
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
65
Use on Dark Background
66
SEMESTERFall 2016
INSTRUCTORMichael Catanzaro
COURSEWeb Tech 2
Primary Color Palette
C:9 M:6 Y:7 K:0#E5E5E5
C:14 M:14 Y:16 K:0#D8D1CC
C:70 M:60 Y:57 K:42#3F4447
C:28 M:27 Y:34 K:0#BAAFA3
C:19 M:20 Y:42 K:0#D1C19B
C:21 M:28 Y:38 K:0#CCB29B
C:22 M:54 Y:100 K:5#BF7C28
Secondary Color Palette
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
67
Typeface Research
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
68
Color Exploration
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
69
Thanks!