ID portfolio_2015

Research Interests Industrial Design / Augmented Reality / Human Computer Interaction Human Factors / Interaction Design / User Interface Design

Specialty Product Rendering: Solidworks / Pro E / AutoCAD Programming: C / C # / objective C / html5 / actionscript / Arduino / Processing Game Design Engine: Unity 3D Visual Design: Adobe Photoshop/ Illustrator/ Flash / Indesign Statistics: SPSS

Experience & Achievement 2015 HCI international conference, Los Angeles, CA, USA 2014 CHI PLAY conference, Toronto, Canada 2013 Design workshop with Chiba University and Nanyang Technological University 2012 NCKU presidential award 2011 China design workshop with Beijing Institute of Technology 2011 ADA design workshop in Kanazawa College of Art 2010 Museum volunteer of the magic school of green technologies, NCKU

Index Design for the Society ARotation: Augmented Reality Based Spatial Visualization Training Game for the Elderly Ready to Bake: Baking Utensil for Mentally Disabled Bakers

Design for Culture Hidden Lion: Location Based APP Game for Sowrd Lion Searching Transformation: Blue and White Pattern Based Aroma Diffuser Cook in V Way: Vietnamese Spring Roll Making Tool for Taiwanese People

Design for Human Computer Interaction Night Owl: Smart and Innovative Computer Using Assistant

Design for Interest Processing Gallery Sketch Gallery

Design for the

Society

ARotation

see video from:

-6-

https://www.youtube.com/watch?v=V2JmIDbtY8M

Design for the Society

ARotation

Augmented Reality Based Spatial Visualization Training Game for the Elderly ARotation is a spatial visualization training tool for older adults to practice and play with. Due to the decline of visualization ability of older adults, some spatial problems such as map reading and wayfinding will occur, which influences the life of the elderly.

ARotation boasts of Augmented Reality(AR) technique. AR is very beneficial to the visualization perception; additionally, with the implementation of this multimedia, older adults are more immersed in the training game and keep practicing with it.

ARotation is conducted in APP for ios and Android system, and thus older adults can directly use their mobile devices to download it and start visualization training.

Project of Interface Design, 1st year of Graduate School of Industrial Design, NCKU responsible for user research, implementation, evaluation

-7-

ARotation

Decline of

Spatial Visualization Ability

Spatial Visualizaiton Ability

mentally transform complex stimuli such as 3D objects in the space

Among all the cognitive abilities, spatial ability is a skill that refers to the capability to think about objects in three dimensions. More specifically, according to Lohman's definition, spatial ability includes spatial visualization, spatial orientation and spatial relations[3].

Spatial visualization is defined as the abiltiy to mentally transform compex stimuli such as three dimensional(3D) objects in space[4]. Human beings are endowed with this abiltiy to orient themselves in physical space and navigate from place to place[2]. This abiltiy is conducive to the capability of map reading and wayfinding as well, which are very critical in the directional perception and other spatial functions.

-8-

Design for the Society

Ageing & Visualizaiton When one is growing older, the cognition ability will also get worsen[6]. Among all cognitive abilities, the decline of spatial visualization ability results in the poor sense of direction and environmental psychology, causing the elder people to have spatial problems and low spatial awareness in real life.

Lateral prefrontal cortex

Hippocampus

(Hedden & Gabrieli, 2004) In practice, the fact that cognitive ability declines with age has been corroborated by numerous neuroscience evidence. White matters serve as the function of processing speed and reasoning ability in the brain; nevertheless, older adults tend to show decreased white matter integrity compared with younger adults, suggesting that older adults have poor performance on memory and attention. On the other hand, lateral prefrontal cortex which is largely associated with human's thinking as well as cognitive perception and hippocampus volume which is tightly connected to the ability of processing spatial information decrease drastically across the adult lifespan[1,7].

-9-

ARotation

Problems

of Current Training In fact, the goal of delaying the degradation of spatial visualization ability can be achieved by taking cognitive training considerably[5]. The most classic type of training is visualization standard tests. Participants conduct a true or false test to finish tasks.

Participants need to judge if these two pictures are the same or the mirrored[8].

Three Chief Drawbacks of paper training test

LESS SENSORY COGNITIVE LOAD TEDIOUSNESS tasks are mostly conducted current tasks are “tests�

INTERACTION current in 2D form, which may cause rather than intriguing the behavior in current tasks is only looking and answering without much sensory irritation

lots of cognitive load for testers, re d u c i n g t h e i r i nte re st s a n d learning motivation

-10-

games.

Design for the Society

Goal of ARotation x AR technology x manipulation x game

The basic goal of this project is to transfrom the conventional training ways into a more interesting and effective training game which is more appealing to users.

As a game, it is favorable to adopt interactive technique and manipulation functions into it in order to enhance the training immersion. Hence, ARotation will consist of not only innovative game content but the manual control function and multimedia technology

-11-

ARotation

Augmented Reality

AR is the real environment whos elements are augmented by computer-generated sensory input.

Hence, viewers can see the virtual items through the devices that are equipped with camera. When the camera is projecting marker patterns, the virtual items will come up from the patterns in the screen of the device.

SPATIAL INFORMATION AR can provide correct spatial data and enhance spatial notions. People can directly realize 3D concepts in AR rather than in flat formats

REDUCE COGNITIVE LOAD AR increases germane load and reduces extraneous load. By keep training in AR environment, AR can help users reduce intrinsic load; therefore, the overall load is down[9].

-12-

ENHANCE IMMERSION With the features of immediate interaction and digital manipulation with the virtual objects, AR can enhance the immersion and interest of testers when they are training

Design for the Society

Design Process In order to create user centered game and controller, an experiment is conducted to collect older adults' behaviors when they are handling visualization problems. Next, transform these behaviors into controller and games design.

-13-

ARotation

Idea Generation

-14-

Design for the Society

Implementation

coding Augmented Reality in Unity 3D by javascripts and C sharp

-15-

ARotation

We use computer software: Unity We also keep modifying the form 3D to implement the game and and the setting of the controller in upload it to tablet to test the order to make users use fluently functions

Older adults are invited to test the usability of ARotation

Evaluation Process This part shows the whole process of finishing the ARotation project. First, implementation. Second, usability testing. Finally, real world evaluation by single subject research

-16-

Design for the Society

Single subject research is used to testify the training effect of ARotation. Eight older participants are recuited in the experiment. First, their initial visualization performance is evaluated by taking visualization paper tests. Next, they receive ARotation training. Finally, we require them to take paper tests again

-17-

ARotation

3D Printing model making

To make the mirror device and the iPad's stand, we make good use of 3D printing to implement them, saving the cost and the time of development

3D printer we use is MakerBot. The material is ABS. Implementation time is around 6 hours

A piece of mirror is attached to the mirror device. The mirror device is angle-adjustable

playing / training process First, user is able to rotate the cube marker controller to rotate the virtual object that is above the floor

Next, press the marker which projects the red virtual button on the screen, and the object will fall down

-18-

The camera projecting route is directed toward the ground by the reflection of the mirror

Design for the Society

Future Work change the content to more meaningful objects In the future, it is highly likely to change the content to meaningful objects that are more familiar to older adults. The new trainig content is also related to spatial visualization abiltiy

use key to unlock the door: users have to rotate the key to turn it into right angle in order to match the hole of lock

falling vegetable: users have to use basket to catch the falling vegetable from the sky.

Different kinds of vegetable have different shape, so users also rotate the basket to match the shape of vegetable

-19-

ARotation

Open Sources with Cloud Computing

-20-

In the future, ARotatin will be the open sources which are accessible through the cloud service. A website of ARotaton will be set up. Older adults and their families can download the marker pictures and print them out. The original 3D file of iPad stand is also available. After downloading the ARotation APP and prepare everything well, older adults can directly start training at all times!

Design for the Society

Reference [1] Hedden, T., & Gabrieli, J. D. E. (2004). Insights into the ageing mind: a view from cognitive neuroscience. Nat Rev Neurosci, 5(2), 87-96.

[2] Lee, S., & Kline, R. (2011). Wayfinding Study in Virtual Environments: The Elderly vs. the Younger-aged Groups. International Journal of Architectural Research, 5(2), 63-76.

[3] Lohman, D. F. (1979). Spatial ability: individual differences in speed and level.

Stanford, CA: Stanford University.

[4] McGee, M. G. (1979). Human Spatial Abilities: Psychometric Studies and Environmental, Genetic, Hormonal, and Neurological Influences. Psychological Bulletin, 86(5), 889.

[5] Mowszowski, L., Batchelor, J., & Naismith, S. L. (2010). Early intervention for cognitive decline: can cognitive training be used as a selective prevention technique? Int Psychogeriatr, 22(4), 537-548.

[6] Park, D. C., & Gutchess, A. H. (2002). Aging, cognition, and culture: a neuroscientific perspective. 859-867.

[7] Peich, M.-C., Husain, M., & Bays, P. M. (2013). Age-related decline of precision and binding in visual working memory. (1939-1498 (Electronic)).

[8] Shepard, R. N., & Metzler, J. (1971). Mental Rotation of Three-Dimensional Objects.

Science, 171, pp. 701-703.

[9] Shelton, B. E., & Hedley, N. R. (2004). Exploring a cognitive basis for learning spatial relationships with augmented reality. Technology Instruction Cognition and Learning, 1, 323-357.

-21-

Ready to Bake

see video from:

-22-

https://www.youtube.com/watch?v=jt4K4WEUgwQ

Design for the Society

Ready to Bake Baking Utensil for Mentally Disabled Bakers

Ready to bake is a set of baking utensil designed for the mentally disabled people who are bakers. Three baking precedures are focused: weighing, mixing and dividing. In order to help them realize the abstract concepts such as weight, amount and time, we adopt a principle to design these baking utensils: Aligning with Referential Objects.

First, wide and colorful tags of ingredients on the recipe ring, which is put on the interface of the scale, help them weigh correctly. Second, they can fill the ingredient tube with bean pasteand then use a slicer to align the stripe to get the precise weight of paste.

Third, by the beep sound from the counter, they can know when to stop whisking.

Project of Graduation Design, 4th year of Department of Industrial Design, NCKU responsible for field study, implementation

-23-

Ready to Bake

Mentally Disabled People & Sheltered Bakery Mentally disabled people have difficulty in learning social rules and problem solving skills. Thus, it is more difficult for them to find the suitable jobs and live independently. To support their own living capabilities, many sheltered houses are set up.

Shelterd houses managed by local governments offer resources such as instruction, training and work for them. In Taiwan, most sheltered houses are bakeries.

Instructors will teach them how to bake, cook and finally sell their handmade products.

However, even if mentally disabled people receive intruction from these professional instructors, some working problems are still there: They may be too dependent to the instructors, causing instructors to be too exhausted to take care each worker very well.

In addition, without the instruction, some of them will not be able to handle things on their own.

-24-

Design for the Society

Field Study Process 1.focus on one sheltered house f i rst , we v i s i te d m a ny sheltered houses to realize the working environment.

We chose Zhanyi Backery to keep the observation.

Zhanyi Backery is located in Tainan. Around eight mentally disable people and two instructors worked in this backery.

2.observe and discover problems we kept visiting and observing at Zhanyi B a c k e r y. D u r i n g t h e observation, we realized t h e b a k i n g p ro c e s s o f baking, and the tools mentally disabled people used to assist their working. We also observed their behaviors and activities.

3.discuss with the instructors At t h e s a m e t i m e , w e also discussed with the instructors to realize the more closed and detailed information about mentally disabled people. Besides, we shared our design ideas with them and discussed together.

4.design and develop After defining problems, we came up with more ideas and kept designing the best solutions to help them deal with their current working problems.

-25-

Ready to Bake

1.WEIGHING bakers start baking by weighing ingredients such as flour, sugar, butter, egg, and stuffing.

The tools they use are traditional or digital s ca l e s a n d we i g h i n g bowls

Baking

Process

main baking procedures in the Zhanyi Sheltered Bakery, Tainan

2.WHISKING they put all ingredients together into a larger bowl to mix them. Next, the raw paste will be made. The tools they use are larger bowl and a whisk

3.DIVIDING

4.FILLING

bakers begin to divide the stuffing such as red bean paste into equal amount.

Usually they will use digital scales to finish this work

bakers stuff the paste with the stuffing and combine them into the raw bread.

They will not use any tool in this step

-26-

Design for the Society

Main Problems of Baking Process Weighing They cannot realize the meaning of each figure and unit on the screen of the scale which are too abstract for them to understand

5.TOASTING bakers put the raw bread on the stainless plate and send to the oven to toast the bread

Whisking They are unable to catch the finish time of mixing and often stop earlier or overtime. Besides, the original whisk is hard for them to hold well to mix the sticky and thick ingredients

Dividing It is difficult for them to divide the paste in equal weight. The only solution is to use the scale to weigh the paste one by one

-27-

Ready to Bake

Vision of Project

Apply to more shelterd workplaces in Taiwan

In the beginning, we cooperate with single sheltered bakery and then come up with the design solution. After the implementation and real practice of our design, we keep seeking resources such as applying for the patent and competing in the design awards held by the authorities to get the support from the local government.

With the power and the support from the government, we hope more enterprise and social charity can collaborate with us. Finally, our design can be successfully applied to more sheltered workplaces in Taiwan in the future.

-28-

Design for the Society

Idea Generation

scale, whisk and other assistance

These idea sketches are based on different procedures of baking process. Scale sketches come from weighing process.

W h i s k s ke t c h e s a r e f r o m whisking. Sketches of other assistance belong to the other procedures in baking process; fo r i n sta n c e , h ow to ke e p balanced when whisking or how to hold the weighing bowl well

-29-

Ready to Bake

Model Making Process

material:ABS & aluminium; method: CNC & 3D printing

Basically, the material of all products is ABS. The whisk and the divider are made through 3D printing, and the body of the scale is made by CNC. Another material we use is aluminium.

This metal is used on the base of the scale, the web of the whisk and the ladle part of the divider

-30-

Design for the Society

Baking Scale The interface of baking scale is a recipe ring whic h s hows the appropriate amount of every ingredient. Hence, what bakers do is to add more ingredients to make the indicator correctly point to the colorful location which is where their precise weight should be. Therefore, what bakers need to recognize is the clear colorful regions rather than conventional numbers.

1.put the recipe ring on the scale

2.point to the original zero

3.finish the weighing process

First, choose the suitable recipe ring according to the feature of mixed ingredients. Next, put the recipe ring on the surface of the scale

Place the weighing bowl on the scale, and the light will shine to remind bakers to press it to make the indicator rotate to original zero

Finally, weigh the ingredients to make the indicator rotate to their corresponding locations

easy to hold A large space between the body and the base is easy for bakers to hold the scale and move it less strenuously

-31-

Ready to Bake

Baking Guidiebook The content of baking guidebook is the procedure and tools in baking process. The recipe rings are also stored in it. Before baking, bakers can read it to realize what they need to prepare and take out the recipe ring to start weighing. Baking guidebook is made of plastic board that is convenient to be cleaned.

baking procedure and guidance Mentally disabled bakers sometimes forget the detailed procedures and requirement in baking so that the instructors have to remind them vey often. With this book, bakers can check the necessary items and the procedures on their own

recipe rings The weight of every ingredient is marked on the recipe rings in colorful and remarkable pattern that is clear and remarkable for bakers to notice and weigh easily

-32-

Design for the Society

Whisk & Counter

Counters are used as the timer that makes noise to help bakers catch the finish time. Counter labeled 1 is used for mixing simple ingredients that take little time to finish mixing, while counter labeled 3 is for handling sticky paste that may be more time-consuming. Bakers can attach the counter to the whisk when mixing the ingredients so that they can realize when to stop mixing

1.attach the counter F i rs t , c h o o s e t h e s u i ta b l e counter according to the feature of the mixed ingredients. Then, attach the counter to the whisk

2.catch the finish time Next, bakers can realize when to stop mixing by listening to the noise made by the counter

-33-

Ready to Bake

Divider

Divider is composed of two tools: slicer and ingredient tube. The ingredient tube is equally separated by the bright yellow lines into three parts. Each part is equal to the amount of bean paste that will be used in making one red bean bun. Thus, bakers are able to divide the stuffing correctly with this handy divider

1.fill the ingredient tube with the red bean paste

2.smoothe the paste with slicer

3.divide the paste equally

To begin with, insert the ingredient tube into the red bean paste and use slicer to help fill the tube with bean paste. With the ergonomic form of the handle, bakers feel comfortable and not strenuous to finish this procedure.

Then, the ingredient tube is filled with the red bean paste

Second, flatten the surface of the bean paste in the ingredient tube by slicer. Thus, the amount of paste is identical in the space separated by yellow lines

Use slicer to divide the red bean paste in equal amount by aligning with the bright yellow lines on the surface of the ingredient tube

-34-

Design for the Society

Ready to Bake After Ready to Bake is implemented, we contact the instructors in the backery and discuss with them. In addition, these tools are also being used by mentally disabled bakers and they show the positive feedback. We have already promoted Ready to Bake to the Ministrey of Labor, Taiwan in order to carry out Ready to Bake to more sheltered bakeries in Taiwan

-35-

Design for

Culture

Hidden Lion

see video from:

https://www.youtube.com/watch?v=R3bspSyBtB4

-38-

Design for Culture

Hidden Lion Location Based APP Game of Sword Lion Searching

Hidden Lion is a Location Based Service(LBS) APP game which is related to sword lion culture in Anping, Taiwan. We develop a storyline and theme that has a connection with the local culture. While playing the interactive games at each sword lion sites with this APP, visitors can find sword lions and experience the background story of each sword lion. Furthermore, Hidden Lion creates a service system in Anping. From the support from Anping district office, more and more visitors can come here and play the Hidden Lion. After completing all the interactive games, the visitors will receive a coupon of sword lion model coloring from Sword Lion School as a reward, which gradually forms a business cycle and culture connection.

Project of Human Computer Interaction, 1st year of Graduate School of Industrial Design, NCKU responsible for user research, UI design, implementation

-39-

Hidden Lion

Sword Lion traditional local protector in Anping, Taiwan

Sword Lion Statue

Tainan is a place full of traditional culture and atmosphere in Taiwan, which is also the reason why many visitors are attracted to come here and travel. Among all activities, the most special traveling activity in Tainan is Sword Lion Searching in Anping.

In the past, Anping was a crowded region near the sea; therefor, local people built sword lion statues in front of their houses to keep bad evil away. Sword lion statues are the stone plates set on the wall. The appearance of each sword lion is different from each other. Different sword lions represent different protecting abilities and stories. Nowadays these sword lion statues decay with time and weather and leave a few in Anping.

different sword lions have different protecting capabilities. However, sword lions decay with time and are left only a few nowadays

-40-

Design for Culture

Sword Lion Searching

find out remaining sword lions in Anping Recently, with the promotion of Anping District Office, many travelers are attracted to come here to find out remaining sword lions and experience the cultural stories of these protectors

Activity Theory

method for analyzing sword lion searching

In order to analyze sword lion searching more specifically, research method: Activity Theory is adopted in this project. It's clear for us to collect data and details of sword lion searching

According to interview and observation, outcome of inter view for most travelers is sharing pictures and experience on social media and personal blogs

-41-

Hidden Lion

Problems of sword lion searching

H o w e v e r, c u r r e n t s w o r d lion searching has some disadvantages. First, too many types of published map may confuse visitors, and lions are h a r d t o b e fo u n d . S e c o n d , sword lion searching may cause disturbance to local people.

Third, visitors do not understand the cultural story of sword lions

Vision of our project

Thus, we devoted to creating Hidden Lion which is a LBS APP helpful for sword lion searching that includes interactive games to make visitors learn the sword lion story in a more interesting way

-42-

Design for Culture

SERVICE SEEKER

Mrs. Hsueh loves to go traveling to other counties in the weekends with his families. She likes Tainan for its cultural value and fascinating history. She always plays with her son especially during each traveling not only for teaching him local culture but for strengthen the parentchildren tie.

-43-

Hidden Lion

Dramatic Elements

save sword lions from the evil's invasion in Anping

In order to make the APP similar to a game, we create the game story. Since Anping is an island in the past and sword lions fend off evils, we create the plot “Anping is attacked by evil spirits�. Powerful lions are imprisoned, so players need to locate and play interactive games to save them. Sword lions will gain more powerful throughout the game by defeating evils and bringing peace in Anping again.

Formal Elements

We follow the formal elements to plan the game procedures. The detailed information and functions of Hidden Lion are listed through 4W1H questions. Hidden Lion is suitable for everyone to use. The basic reqirement in each procedure is shown in the left table.

Dramatic Arc

-44-

Design for Culture

APPLE iBeacon

l o cat i o n s e n s o r to d ete c t t h e distance between your iphone and iBeacon itself so that we can use it to trigger incidents in the game when players are approaching it

Location Based APP

Implementation GOOGLE GPS

Our system uses the google map service as the main guide view and connect to the Parse database for getting the annotation data

ELECTRONIC COMPASS

We set up compass functions in the APP so that user's walking direction is detected

MULTITOUCH

In one mission, the mapping function is applied, so multitouch code is needed

IMAGE RECOGNITION

User opens camera to recognize sword lion so that the mission will get started

technique and sensors required in the APP -45-

Hidden Lion

Island of

Sword Lion

We redesign the Anping region into more cartoon-alike image which will be used in our APP. Anping island is divided into four parts. The style of these parts is related to the landscape in current environment in Anping

A. empire city The most powerful sword lions are mainly located in this area

B. military camp In the past, soldiers and general lived here. Many historic sites are also in this zone

C. harbor zone This area is near the canal and Anping harbor

D. ghost town -46-

This zone is named Ghost Town due to many tombs located here

Design for Culture

Empire City detailed view Basic Function of the APP Since the whole area is too large, we only implement the empire city area in the APP. Here we show the detailed map view of empire city above. Icons on the right side are the basic functions users can use to help them in searching process such as the location of sword lion, tourist spots, other players, restaurants, mayor 's home and temple

sword lion site

tourist spots

the location of sword lions in empire city area

the location of famous tourist spots in Anping

other players

restaurant

the location of other p l aye rs w h o a l s o have Hidden Lion APP. User can invite them to join the searching together

Anping is famous for its delicious snack.

The location of these restaurants is also noted

mayor's home

temple

mayor serves as a searching instrutor so user can ask him for help

temple is also where user can ask for the searching help

-47-

Hidden Lion

Once upon a time, sword lions lived peacefully in the sword lion island

Detailed map view of empire city. If player discovers sword lions, he can press catch button

Suddenly, the devil came Almost all sword lions However, one little lion here and destoyed the died of the devastation escaped from the attack island. Some lions were safely even imprisoned

He was devoted to coming back again and saved his friends and other imprisoned lions

First, little lion introduces the background story and asks players for help

Then, player chooses the region where he wants to take the challenge

Press the icon of noodle, and the interface shows the introduction of famous restaurant

Press the icon of rocket, to ask other players for searching help

Press the icon of sword lion, and the interface shows the location and introduction of lion

Press the icon of camera, and the interface shows t h e i n t r o-48duction of tourist spot

Design for Culture

Players go to visitor information They are attracted to the game center to realize the Hidden Lion and scan the QRcode to download APP the APP

Players can realize the background story and the mission in this APP. Next, they choose the reqion where they tend to search for sword lions

Player are able to see the detailed Next, start their searching journey On the way of searching, they may view of the region they choose and use the function of the APP discover the sword -49- inadvertently lions

01

BACKGROUND

of HIDDEN LION GAME

02

INSTRUCTION of PLAYING GAME

03 FUNCTIONS

AVAILABLE in SEACHING

Hidden Lion

Press CATCH button to Yu Jian Er story: One recognize the Yu Jian Er day, he was taking rest sword lion and start the peacefully game

Suddenly, ghosts were approaching here

These ghosts attacked Yu Jian Er sword lions

Yu Jian Er could not prevent the attack t o t a l l y, a n d g o t imprisoned

F i r s t , t h e g a m e Players need to finish introduces how to finish running the star circle to the mission release Yu Jian Er

If the mission is finished successfully, it will show the congradulations page

Bagua Models

Bagua models are the container of iBeacon. It is used for tracking players' location so as to finish the Yu Jian Er mission. The model is made through 3D printing and the material is ABS

-50-

Design for Culture

But Yu Jian Er left the Magic circle and waited for players to finish the Magic Circle to save him

Players can use image recognition The game starts, and they browse function to scan the sword lion the game introduction

Players need to run the five star circle to finish the mission. On the each end of the star is set the bagua model which contains iBeacon sensor; thus, when players are approaching the bagua, then APP will sense the iBeacon to confirm players really run the star

Bagua & Magic Circle Bagua models with iBeacon inside are put on the five ends of the Yu Jian Er space. Hence, when players finish sensing these bagua models, they also finish the star route

-51-

04 YU JIAN ER

SWORD LION

STORY

05 YU JIAN ER

SWORD LION

MISSION

Hidden Lion

Press CATCH button to Xi Peng Peng story: One recognize the Xi Peng day, he took a walk on Peng sword lion and the street comfortably start the game

In a Sudden, the weather got worse a n d t h e wate r d e v i l appeared

In order to protect the However, the water devil island, Xi Peng Peng was too strong and hurt fighted with the devil Xi Peng Peng greatly

First, the game introduces how to finish the mission

Players need to keep If the mission is finished mapping the interface successfully, it will show to get rid of the bubbles t h e c o n g ra d u l a t i o n s page

Players can press the crown button -52- to open the achievement page

In achievement page, If one region is finished, i t s h o w s h o w m a n y players get the coupon missions players finish of lion model making

Design for Culture

Finally, Xi Peng Peng was imprisoned

06

The game starts, and the players browse the game introduction

XI PENG PENG SWORD LION

STORY

Mapping Players need to map the interface to conduct this mission: eliminate the bubbles

Players keep mapping the interface to remove the bubbles to save Xi Peng Peng

After finishing the mission, players Then, they go to sword lion school They are enjoying the model get the coupon of model making to make pottery model process and finish the -53- making service sword lion searching journey

07

XI PENG PENG SWORD LION

MISSION

08

COUPON for MAKING LION MODEL

Hidden Lion

CHI PLAY 2014

conference of game competition in Toronto

Hidden Lion project was also public in CHI PLAY 2014 in Toronto Canada. We are accepted to attend CHI PLAY conference and introduce Hidden Lion APP in Canada

In addition, Hidden Lion project was presented in the exhibition held by the Fundation of Historic City Conservation and Regeneration. We are devoted to cooperating with local government and promote its into real market

-54-

Design for Culture

Through Hidden Lion, which has a storyline and theme that connects the local culture, we can link the government, sword lion promotion organization, local restaurants and stores. We not only make it an ideal medium for exploring cultural history b u t a l s o a p e r fe c t a p p ro a c h fo r revitalizing local economic

Future Goal of

Service System -55-

Transformation

-56-

Design for Culture

Transformation Blue and White Pattern based Aroma Diffuser

Transformation is the aroma diffuser whose design elements come from Chinese blue and white porcelain. In order to make modern people more acceptable to Chinese precious culture: blue and white porcelain, I redesign the traditional blue and white porcelain and turn it into a modern aroma diffuser with practical use. Inside the Transformation is the small motor fan. Users can put something fragrant in the middle part and the fan will send out the aroma through the engraved hollow blue and white patterns. Therefore, users can experience the fragrance as well as Chinese cherished culture while using this beautiful and modern aroma diffuser.

Project of Industrial Design, 3rd year of Department of Industrial Design, NCKU personal work, responsible for pattern research, sketch, rendering, modeling

-57-

Transformation

Blue & White Porcelain the most valuable Chinese culture and art

Blue and White Porcelain designates white pottery and porcelain decorated under the glaze with a blue pigment, generally cobalt oxide. The decoration is commonly applied by hand, by stencilling or by transfer-printing, though other methods of application have also been used.

The blue-and-white technique was fully developed in China with porcelain technology in the 14th century. It has also so much influence all around the world in the past. In spite of the procelain making technique, the beautiful and meaningful patterns on the procelain are valuable as well. These patterns show the traditional life of former people. Besides, different kinds of flower patterns represent different meaning, class and story. Hence, blue and white porcelian transmits not only the art value but also the historic value of the ancient China.

-58-

Design for Culture

Current Challenge

being less emphasized and cherished by modern people 1.too classical and outdated for current life and people

However, since it is the traditional artifacts, less people nowadays cherish it. They would not like to appreciate it and even don't realize how great and how meanful blue and white porcelain is

2. be regarded as the exhibits rather than useful articles Traditionally, blue and white porcelian serves as many functions such as vase, plate, bowl and other useful tools. However, nowadays they are regarded as no useful products but the exhibits displayed in museums

-59-

Transformation

Design Vision

modern definition of traditional blue & white porcelain

from pottery to plastic

from nobility to normal people in the past, only the rich are able to own blue and white porcelain. However, nowadays it should be available to all people in the society

traditional porcelain is made of pottery.

However, nowadays if the design product is able to be manufactured, it should be made of plastic

from royal palace to home

from decoration to product

blue and white porcelain is used to be royal treasure. In modern times, it is ought to be a household product and will be popular in normal home

c o n v e n t i o n a l l y, p o r c e l a i n s e r v e s a s nothing but the decoration or the vase.

Nevertheless, the modern porcelain will become the product with practical purpose

-60-

Design for Culture

Pattern Design

Deconstruction In order to regenerate the blue and white porcelain, I deconstruct the tradtional pattern by adopting hierarchical method. These patterns are composed of circles with different combination and intercepts

evolution of stem

draw the outline of stems of traditional blue and white patterns

reconstruct the outline by combining different circles

evolution of petal

draw the outline of petals of blue and white patterns

cut off the unnecessary part of cirlces

combination

reconstruct the petal patterns by combining circles with different size

combine the stem and the petal to finish the pattern

reconstruction of new pattern

finish the stem: draw circles with different sizes and cut off the unnecessary parts

finish the petal: draw different circles and take the intersection part

-61-

combine the stem and the petal to reconstruct the new pattern

Transformation

many people like to collect aroma sachet to make the air fresh and fragrant. However, these sachets do not have a suitable place to be placed. Hence, the Transformation can serve as the container to collect the aroma sachet

container of

Aroma Sachet

Interior Structure of current product

Before product design, it is important to realize the interior structure of current product so that I can design something really practical. Hence, I take a blender and deconstruct it to realize required parts in the blender. Next, build them in 3D model and combine the parts again. Thus, it is much easier to understand how to assemble a real product and how to design

-62-

Design for Culture

Idea Generation 1.the form and the pattern design

2.interior mechanical structure

-63-

Transformation

serve as the lid. Users can put flowers and water in this part

aroma sachet and dried flower can be put here.

T h e re a re e n g rave d hollow patterns around t h e s u r fa c e , s o t h e fragrant breeze can flow through

with a set of motor and fan. the wind can flow through the web above

-64-

Design for Culture

Procedures

01

02

03

04

pick up the top of this product

put flower in the top, and put something fragrant in the middle part

combine the top and the middle together, and plug in

fan is triggered to work, and the fragrant breeze flows through the engraved hollow patterns

pick up the top

put the aroma sachet

combine & plug in

-65-

enjoy your cultural moment

Transformation

Renew

the spirit of

blue & white Porcelain keep the concept of pattern retain the patterns of blue and white porcelain by deconstructing the current patterns and regenerating the new ones

engraved hollow patterns make flower patterns not only the flat pictures on the vase. The engraves hollow patterns can really send out the fragrance

new household product As the vase and the sachet container, Transformation is not only the decoration anymore; it is a useful and practical product available in every house

-66-

Design for Culture

-67-

Cook in V Way

see video from:

-68-

https://www.youtube.com/watch?v=WelWaW3zDBE

Design for Culture

Cook in V Way Vietnamese Spring Roll Making Tool for Taiwanese People

Cook in V Way is a Vietnamese spring roll making tool for Taiwanese people. With Cook in V Way, Taiwanese people can deal with the delicated Vietnamese spring roll easily and conveniently. What's more important, Taiwanese are able to realize the cooking value of Vietnamese dishes: Health. By cooking spring roll with Cook in V Way, they will know how Vietnamese cook and what the concept Vietnamese people have when cooking. If more Taiwanese people can realize the healthy food culture of Vietnamese dishes, the misunderstanding and discrimination against Vietnamese will also be reduced. Understand more, live peacefully more.

Project of MOE SPOSAD workshop 1st year of Graduate School of Industrial Design, NCKU personal work, responsible for culture research, sketch, rendering, programming

-69-

Cook in V Way

No Understanding about Vietnam Culture in Taiwan Lack of social environment for interaction Each year, many migrants come to Taiwan for working or for marriage. Among all migrants, Vietnamese people occupy the greatest proportion. However, even if living in the same island, Taiwanese and Vietnamese do not have so much interaction with each other

Discrimination against Vietnamese Due to the lack of social environment for interaction, Taiwanese have nearly no chances to interact with Vietnamese. Gradually, without the social understanding toward Vietnamese, many Taiwanese will discriminate against these foreign groups and dislike them

-70-

Design for Culture

Benefit from Vietnam's Food Culture However, what Taiwanese do not know is Taiwanese can benefit from Vietnamese food culture. Take the most representive Vietnamese food, spring roll, for example.

The ingredients are mainly herb and vegetable. These ingredients are made edible mainly by blanching. Spring rolls are cooked step by step with careful procedures.

Unlike Taiwanese spring rolls, Vietnamese spring rolls are much healthier and better

Taiwan Spring Roll

Vietnam Spring Roll

sugar, pepper, salt

herb (cilantro, basil)

free

One ingredient for one specific cooking way

fry mostly

blanch or steam mostly (less oil)

at random

in order keep nutrition balanced

Much Healthier

-71-

Cook in V Way

Power Distance Hofstede's Model of National Culture

Cooking way of spring rolls is different in Taiwan and Vietnam. I adopt one of the Hofstede's theories, Power Distance, to explain this discrepancey. Since Taiwan is a democracy country, the cooking style is vey free. However, Vietnam is a communist country, so the cooking style is also very strict, formal and often follows rules

Design Vision Transform Vietnamese cooking value into Taiwanese cooking utensils learn the value of Vietnamese cooking culture Hence, the design vision is how to make Taiwanese realize the heathy cooking value of Vietnamese food culture. If the healthy notion is applied to Taiwanese cooking utensils, Taiwanese can cook easily as well as learn the healthy concept of food when making a dish, gradually improving the body health and dwindling the cultural misunderstanding

-72-

Design for Culture

Vietnam Spring Roll

Taiwan Spring Roll

Expected Goal

cook healthy but complicated Vietnam spring roll in Taiwanese fast style Vietnamese spring rolls are healthy but complicated to made. However, Taiwanese spring rolls are easy to made but not very healthy. Hence,

-73-

the expected goal is how to make Taiwanese finish Vietnamese spring roll easily. At the same time, they can learn the healthy concept of this dish

Cook in V Way

Idea Generation

the features and using process of Cook in V Way

-74-

Design for Culture

Blanch in V Way used for making food edible

glass material

Glass is suitable to be put in boiled water rather than in oil, so users are likely to cook food by blanching

ingredient proportion The removable board with ingredient proportion pattern implies more vegetable in the dish

removable

Removable dividers allow users to change their ingredient proportion

Four Principles of Vietnam Food Culture

more vegetable

less oil

ingredient combination

ingredient proportion

Ingredients in Vietnamese food are less meat and more vegatable

Vietnamese do not cook with too much oil. They prefer blanching

Vietnamese do not only take on kind of ingredients. They prefer the combination of differnt ingredients

Vietnamese spring roll always follow this regular imgredient proportion

Roll in V Way

ingredient proportion

used for rolling spring roll

It implies users the correct imgredient proportion in the spring roll

smaller end

It implies users to start rolling in from this smaller end

color gap

This gap is used as the hint to remind users to start folding two sides the spring roll wrappers

-75-

Cook in V Way

at most four sets of Cook in V Way can be put in the same pot at the same time

Cooking Procedures

take out the board which p u t t h e c o r r e s p o n d i n g is painted with ingredient ingredients in each divided proportion patterns space

put Blanch in V Way on Roll in V Way which is already covered by a spring roll wrapper

take out the painted board

put the painted board back

put Blanch in V Way in the boiled water to blanch the ingredients

take out Blanch in V Way, and all ingredients fall down on the correct position

rolling the spring roll though the guidance of Roll in V Way

-76-

Design for Culture

Website of

Cook in V Way promote Vietnam's healthy value

I also made a website of Cook in V Way by coding in html. This website shows the instuction of Cook in V Way, the recipe of different Vietnamese dishes and the informaion about Vietnamese food culture. Users who buy Cook in V Way can also browse this website to learn Vietnamese Culture

1.instruction of Cook in V Way 2.recipe of Vietnamese dishes 3.Vietnamese food culture www.Cook-in-V-Way.com

-77-

Cook in V Way

families target users love exotic food feel strenuous to handle the dishes

Scenarios

one day, young parents go buying the cooking ingredients for dinner

they go to a supermarket

they buy it and try to use it to make Vietnamese spring rolls for dinner

they find spring rolls to be easy to cook and also learn the healthy value of Vietnam food

they arrive at the exotic food area and find Vietnamese food

they also see a special cooking utensil and be curious about it

Thus, they are motivated to browse the Cook in V Way website to see more information

-78-

they learn so much about Vietnam's culture and appreciate their value and culture

Design for Culture

More Respect & Understanding With Cook in V Way, Taiwanese people can easily and conveniently deal with complicated and delicated Vietnamese spring rolls. What's more, they also learn Vietnamese healthy food culture. With more understanding about Vietnam's culture, less discrimination will occur. Hence, all people living in Taiwan respect each other and get along with each other through this food kit

-79-

Design for

HCI

human computer interaction

Night Owl

see video from:

https://www.youtube.com/watch?v=KEsa79L_yDc

-82-

Design for Human Computer Interaction

Night Owl Smart and Innovative Computer Using Assistant

Night Owl is a useful computer using assistant to protect computer users from incorrect behavior of using computers. It combines with Arduino and other sensors to achieve the human computer interaction. First, when user is too closed to the screen , Night Owl will trigger the window to enlarge so user can see the text clearly rather than approach to the computer. Second, if the light in the environment is weak, the additional light on Night Owl will shine to provide enough lighting. Third, if user has used computers for a long time, the software of Night Owl will make sound to remind user to take a break and replenish some water. With Night Owl, users are able to use computer in correct using bahavor and prevent from physical illness Project of Simulation in Ergomomics Design 1st year of Graduate School of Industrial Design, NCKU personal work, responsible for user research, modeling, programming

-83-

Night Owl

Without a doubt, with the advanced technological development, computer has always been a necessay item in current times. In spite of providing entertainment, computer also functions as the working or learning tool for most people such as engineers, researchers, and students. These people are required to keep concentrating on the screen and focus on the work for a long time without appropriate rest and break, gradually resulting in some physical illness like eyestrain, stiff shoulder, carpal tunnel syndrome and so on.

Protential Problems of

Using Computer

rate of using computer

problems caused by using computer

some statistics data about using computer are collected. For instance, 35 % of people require to use computer when working.

These people are mainly composed of young population aging from 25 to 34, which shows the importance of computer nowadays

However, if users do not ke e p b e n i g n b e h av i o r when using computer, much physical problems will happen such as stiff shoulder and myopia

-84-

Design for Human Computer Interaction

Behavior Observation

be too close to the screen

neck pain

Indeed, computer is essential for us. However, many ignore the incorrect behavior of using computer. This is also why so much physical illness occur. Hence, in order to design a product that can help users use their computer in a good way, first of all, observe how people work with computers. Without any previous notification, these subjects are being observed when using the computer. They are all graduate school students who usually use notebooks. Each of them is being observed for two hours or so. With the observation, we can realize the incorrect behavior of using computers, and the reason why these behavior will happen.

incorrect posture

subject no support for elbow

hunchback

graduate school students PHD students , all notebook users

location ergo lab, department of ID, NCKU

procedure

be too close to the screen

they are observed without previous notification. Each of them is observed for around 2 hours

goal to realize the incorrect behavior of using computer. Additionally, the reason why the behavior occurs will also be understood

hunchback

result too close to the screen, neck pain, incorrect posture, hunchback, without taking a rest and so on

neck pain

without rest

-85-

Night NightOOwl Owl

Result of

Observation do not turn on the light all subjects do not turn on the light when using computer

do not take any rest

too close to the screen

incorrect posture

most people are used to finishing their assignment without any break

if users need to see something tiny, they will likely approach the screen

when users feel tired, they may have the incorrect posture when working

hunchback

no support for elbow

this incorrect behavior often follows by approaching the computer

s o m e p e o p l e m ay n o t notice no support for their elbow, which may hurt the muscle of elbow

neck pain this problem often follows by keeping focusing on the screen without enough rest

-86-

Design for Human Computer Interaction

Expected Goal

Considerate Computer

enlarge the window computer can detect the distance between itself and user. If user is approaching, indicating he wants to see tiny text, the window will enlarge

additional light

emotional element

provide lighting if the light in the environment is weak

This assistant also serves as little helper that enhances user's comfort

time reminder make sound to remind user to take a break if he has worked for a long time

-87-

Night Owl

implemented by

Arduino

& Flash

Arduino is a small processor that deals with the electrical signals and functions. It is very suitable to be used for implementing the expected functions mentioned before

Photoresistor it can sense the light current in the existing space

Light-Emitting Diode it is used for output use for it will shine after receiving signals

Resistance resistance can control the amount of current flowing through the coil

Adobe Flash

Supersonic Sensor

this software that will be connected to Arduino is adopted to show the scaling effect of window

it can detect the distance between itself and the front obstacle

-88-

Design for Human Computer Interaction

Connection between sensors and software

-89-

Night Owl

Kitten

computer using assistant best comfort when working at midnight

in order to add emotional element into design, I create a kitten puppet which includes the sensors and electric wire. This adorable computer using assistant will make users feel comfortable and warm when they work at midnight time reminder this little cat is a software that will get started after user sets up the kitten puppet on the computer.

It functions as the time reminder

photoresistor set on the head of kitten.

Since it is sensitve to the light in the environment, the top of the puppet is the best position for it

supersonic sensor set on the face of kitten.

The feature of this sensor is two little cylinders which are similar to eyes of kitten

light emitting diode set on the neck of kitten.

The shining LED serves as the necklace on kitten 's neck

-90-

Design for Human Computer Interaction

set up the kitten puppet buy the Night Owl kitten and put it on the computer

start the software

after the kitten is put well, the Night Owl software will get started

enlarge screen

if user is too close to the screen, window will enlarge. Thus, user can clearly see the content and return to the correct position

additional light

when the light in the environment is weak, the necklace on the kitten will shine serving as additional light source

time reminder

if user has worked over 30 mins, the virtual kitten will make sound to remind user to take a break

-91-

Night Owl

Correct

Keep Behavior when using computer

By Night Owl, all users can keep correct behavior when using computer for work. This project make me realize how to study user behavior and use more profound methods to analyze the interaction between human and computer. Through the implementaion of Arduino and Adobe Flash, the interactive effect is easily achieved. In the future, computer users will get to know the correct way of using computer and prevent physical illness from happening

-92-

Design for

Interest

Processing Gallery

Processing Processing, a programming language, has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals.

Nostalgia

Can you still remember the scene of paddy field when you are young? Can you smell the fresh air from the grass and the soil in summer? Sit down in the paddy field, watch the sky, and recall your childhood right away

enjoy the interaction from

http://www.openprocessing.org/sketch/118358

-94-

Design for Interest

Dream of Lady

She always dreams of being a butterfly flying through flowers. If you are her beloved, you can get into her dream, she will show you the ripple and blue little flowers to welcome you for coming

enjoy the interaction from

http://www.openprocessing.org/sketch/119346

-95-

Processing Gallery

Starring Night

Can you remember the night we enjoyed the starring sky together? It was very charming and fascinating. Also, please do not forget we once made a wish when the blue stars are full of the night

enjoy the interaction from(remember to click the mouse) http://www.openprocessing.org/sketch/124049

-96-

Design for Interest

Rose

Simple but complicated. Creating a delicated pattern with a number of simple spiral curves, which shapes the outline of rose flower

-97-

Sketch Gallery

-98-

Design for Interest

-99-