![Page 1: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/1.jpg)
1TSAI, SAMPSON 0316793103167931 TSAI, SAMPSON
Sampson TsaiVisual Designer
MA FINAL PORTFOLIOCASE STUDIES
![Page 2: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/2.jpg)
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.
![Page 3: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/3.jpg)
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
![Page 4: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/4.jpg)
TEAM PROJECT
![Page 5: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/5.jpg)
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
![Page 6: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/6.jpg)
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
![Page 7: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/7.jpg)
7Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Gen Z Characteristics
-Non-conformists
![Page 8: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/8.jpg)
Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Persona
8
![Page 9: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/9.jpg)
9Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Empathy Map
![Page 10: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/10.jpg)
10Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Technology
![Page 11: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/11.jpg)
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
![Page 12: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/12.jpg)
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
![Page 13: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/13.jpg)
13Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Exterior Configuration
Fingerprint Access
OLEDHeadlight
Beta Testing NetworkingHello
![Page 14: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/14.jpg)
14Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Interior Configuration
Reconfigurable Input
Passenger Color
Screen Range
![Page 15: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/15.jpg)
15Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
User Scenario for Work
![Page 16: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/16.jpg)
16Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
User Scenarios for Storage
![Page 17: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/17.jpg)
17Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Work Flow
![Page 18: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/18.jpg)
18Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Full-Size Usability Testing
![Page 19: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/19.jpg)
19Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R1
![Page 20: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/20.jpg)
20Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R2
![Page 21: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/21.jpg)
21Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
UI Development – R3
![Page 22: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/22.jpg)
22Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Team Schedule
![Page 23: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/23.jpg)
23Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Collect Inspirations
![Page 24: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/24.jpg)
24Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
![Page 25: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/25.jpg)
25Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Search Nearby Workstations
![Page 26: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/26.jpg)
26Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
![Page 27: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/27.jpg)
27Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Collaboration Space
![Page 28: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/28.jpg)
28Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
![Page 29: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/29.jpg)
29Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
![Page 30: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/30.jpg)
30Automotive UI Claudia DallendorferCourse Instructor Semester
Fall 2015
Business Case
![Page 31: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/31.jpg)
VOYANCE
![Page 32: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/32.jpg)
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.
![Page 33: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/33.jpg)
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.
![Page 34: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/34.jpg)
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
![Page 35: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/35.jpg)
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
![Page 36: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/36.jpg)
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
![Page 37: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/37.jpg)
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
![Page 38: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/38.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
38
Mood & Typography Board
![Page 39: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/39.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
39
Primary UsersAmbitious, imaginative, observant, mid-lower class city dwellers
Needs
Motivation Inspiration Relaxation
![Page 40: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/40.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
40
LifestyleHealth Achievement
Secondary UsersDelicate, adaptive, capable, middle class city dwellers
Needs
![Page 41: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/41.jpg)
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
![Page 42: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/42.jpg)
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
![Page 43: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/43.jpg)
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
![Page 44: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/44.jpg)
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
![Page 45: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/45.jpg)
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
![Page 46: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/46.jpg)
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
![Page 47: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/47.jpg)
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.
![Page 48: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/48.jpg)
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.
![Page 49: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/49.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
49
Technical Specification
![Page 50: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/50.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
50
Logo Exploration
![Page 51: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/51.jpg)
FALL 2015SAMPSON TSAI
INSTRUCTORALEXANDER PINEDA
COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE
51
Logo Anatomy Geometry
XX
X X
2X 2X
![Page 52: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/52.jpg)
52
COURSEINTERACTIVE DESIGN & CONCEPTS
INSTRUCTORALEXANDER PINEDAVOYANCE FALL 2015
SAMPSON TSAI
VOYANCE
Use on Dark Background
![Page 53: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/53.jpg)
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
![Page 54: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/54.jpg)
![Page 55: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/55.jpg)
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
![Page 56: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/56.jpg)
HomeThe mission here is to introduce sustaintable and beautiful furniture through clean design layout.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
56
![Page 57: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/57.jpg)
Story“Simplicity is the ultimate sophistication.”I want to show their authenticity through minimal design elements.
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
57
![Page 58: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/58.jpg)
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
![Page 59: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/59.jpg)
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
![Page 60: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/60.jpg)
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
![Page 61: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/61.jpg)
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
61
![Page 62: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/62.jpg)
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
62
![Page 63: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/63.jpg)
Wireframes – R1
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
63
![Page 64: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/64.jpg)
Wireframes – R2
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
64
![Page 65: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/65.jpg)
Logo Anatomy
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
65
![Page 66: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/66.jpg)
Use on Dark Background
66
SEMESTERFall 2016
INSTRUCTORMichael Catanzaro
COURSEWeb Tech 2
![Page 67: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/67.jpg)
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
![Page 68: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/68.jpg)
Typeface Research
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
68
![Page 69: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/69.jpg)
Color Exploration
COURSEWeb Tech 2
INSTRUCTORMichael Catanzaro
SEMESTERFall 2016
69
![Page 70: MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography Board Primary Users Secondary Users Key Persona 01 Key Persona 02 Key Persona 03 Primary](https://reader033.vdocuments.us/reader033/viewer/2022050301/5f6aa7808297be45c36078dd/html5/thumbnails/70.jpg)
Thanks!