MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography...

transcript

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

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

Fall 2015

Gen Z Characteristics

-Non-conformists

Automotive UI Claudia DallendorferCourse Instructor Semester

Fall 2015

Persona

Fall 2015

Empathy Map

Fall 2015

Technology

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

Fall 2015

User Flow

Login 09:00AM

Work Session

Progress

Today’s Task

Task Completion

Schedule

Today’s Route

Today’s RouteNotifications

Fall 2015

Exterior Configuration

Fingerprint Access

OLEDHeadlight

Beta Testing NetworkingHello

Fall 2015

Interior Configuration

Reconfigurable Input

Passenger Color

Screen Range

Fall 2015

User Scenario for Work

Fall 2015

User Scenarios for Storage

Fall 2015

Work Flow

Fall 2015

Full-Size Usability Testing

Fall 2015

UI Development – R1

Fall 2015

Team Schedule

Fall 2015

Collect Inspirations

Fall 2015

Search Nearby Workstations

Fall 2015

Collaboration Space

Fall 2015

Business Case

VOYANCE

FALL 2015SAMPSON TSAI

INSTRUCTORALEXANDER PINEDA

COURSEINTERACTIVE DESIGN & CONCEPTS VOYANCE

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.

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.

Statistical Research308 million-plus citizens in the United States, only 30% have passports

Canada

My SolutionA digital window wrap for the city dweller to see another side of the world through their window

SWOT Analysis

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

GLARE REDUCTION

HEAT REJECTION

DAYLIGHTING

TINT ADJUSTMENT

SOCIAL MEDIA

INTERACTIVE INTERFACE

WATCH VIDEO

MOBILE APP SUPPORT

REAL-TIME EXPERIENCE

MULTIPLE LOCATIONS

RECONFIGURABLE ENVIRONMENT

VOYANCE

Competitive Analysis

Mood & Typography Board

Primary UsersAmbitious, imaginative, observant, mid-lower class city dwellers

Motivation Inspiration Relaxation

LifestyleHealth Achievement

Secondary UsersDelicate, adaptive, capable, middle class city dwellers

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

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

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

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

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

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

!"#"" $%

+-./0-123.44556

Wifi Camera

768-19./-12*156-2

Emissive Layer

Conductive Laye

Substrate

VOYANCE

Activities & Hobbies

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.

Relax > Paris

Discover

VOYANCE

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.

Technical Specification

Logo Exploration

Logo Anatomy Geometry

COURSEINTERACTIVE DESIGN & CONCEPTS

INSTRUCTORALEXANDER PINEDAVOYANCE FALL 2015

SAMPSON TSAI

VOYANCE

Use on Dark Background

Color Palette

Gradients Core Palette

Chart and Data Visualization Palette

#4d6cb3

R78, G109, B180 R148, G149, B151

#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

HomeThe mission here is to introduce sustaintable and beautiful furniture through clean design layout.

COURSEWeb Tech 2

SEMESTERFall 2016

Story“Simplicity is the ultimate sophistication.”I want to show their authenticity through minimal design elements.

COURSEWeb Tech 2

SEMESTERFall 2016

Design FlowSpreading out the text from left to right in each section helps viewers seamlessly connect with the visual.

COURSEWeb Tech 2

SEMESTERFall 2016

ProductsShowing quality not quantity through different colors and sizes brings a much richer feel to the brand.

COURSEWeb Tech 2

SEMESTERFall 2016

Inspiration Inserting a section for viewers to be inspired from different ways of stacking their modular cube seems ideal here.

COURSEWeb Tech 2

SEMESTERFall 2016

COURSEWeb Tech 2

SEMESTERFall 2016

COURSEWeb Tech 2

SEMESTERFall 2016

Wireframes – R1

COURSEWeb Tech 2

SEMESTERFall 2016

Wireframes – R2

COURSEWeb Tech 2

SEMESTERFall 2016

Logo Anatomy

COURSEWeb Tech 2

SEMESTERFall 2016

Use on Dark Background

SEMESTERFall 2016

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

SEMESTERFall 2016

Typeface Research

COURSEWeb Tech 2

SEMESTERFall 2016

Color Exploration

COURSEWeb Tech 2

SEMESTERFall 2016

Thanks!

sampson-tsai.com

MA FINAL PORTFOLIO CASE STUDIESgradshowcase.academyart.edu/content/dam/Grad...Mood & Typography...

Documents