Page 1

What is Design?

Liu Hsiu Liang

#initiative #independent #energetic #embrace challenge #learn fast

Education National Cheng Kung University Bachelor of Industrial Design 2011-2016

Experience ICDF Bamboo Industries Project Project assistant

/ 9.2016 - 8.2017 Guatemala, Guatemala

Hold skill-training workshops and exhibitions; Product improvements; Graphics and photography

Mediamatic Internship / 7.2015 - 8.2015 Amsterdam, Netherlands New developments in the arts; Photography for Ruud All Over ; Research of surface paint of oven

Planett Internship / 7.2014 - 8.2014 Tainan, Taiwan Design and plan working station of the workshop; Assist the construction of residency

Smart Seed Union Photographer / 9.2014 - 12.2015 Tainan, Taiwan Photography; Video editing; Film making.

Student association of NCKUID Vice president / 9.2014 - 6.2015 Tainan, Taiwan Restructured the association; More efficient in holding events and lectures and more participants; Organized the first design month in NCKU and attracted many students of different professions attending lectures and workshops

AIESEC India’s global community development program Volunteer / 6.2012 - 7.2012 Ahmedabad, India Volunteer in the Rural development project at Ahmedabad, India; International team; Teach village children about our culture

Skills Design / Userstudy, Model making, Design thinking, Product, UI, Web design Software / Adobe Ps, Ai, Pr, Id, Lr, Xd, Mu ; Solidworks, Cinema 4D Language / Mandarin, English, Spanish Other / Team work, Cross-cultural communication, Cross-disciplinary task


Product Design 8

- 51

Watchout 10 - 33 a project for the blind

Moonie 34 - 41 a chair for restless souls

Drops 42 - 51 a lively umbrella stand

UX/UI Design 52 Central Weather Bureau App redesigning weather information app

- 73

54 - 73

Product Design


#fun #wellbeing #environment #userstudy

“ How to cook if you can not see? ” Watchout

10 - 33

a project for the blind

“ Let’s move it move it! ” 34 - 41


a chair for restless souls

“ Utilize every water drop! ” 42 - 51


a lively umbrella stand


“ How to cook if you can not see? �

#kitchenware #blind #cooking #empower #userstudy

Watchout is a set of kitchenware that encourage the blind to cook and live beyond their disabilities.



My Role

Collaberated with Fu Yue and Tsao Hsin Yun As a thesis design project, we worked and made decisions together most of the time, but because my abilities in photography and 3D modeling, the jobs of interview recording, 3D modeling, showreal animation, and product film was my extra responsibilities.

The Challenge

Cooking without sight unworried Just try to fill your cup with hot water with your eyes closed, feeling worried right? That is the daily life of blind people, and they need more than a cup of hot water. The best care for the blind is to empower them to live on their own. We focused on removing the obstacles on this cooking-for-oneself path.



The Approach and Discovery

Surveys, interviews, observations, experiments, academic research, and accompanying the blind help us understand what they really need Ignorance can really limit imagination. Our lack of knowledge in blind people meant we needed to understand the nature of blind care service and their actual daily life thoroughly. We approached all aspects of the project collaboratively and spent great efforts interacting with blind people.


Starting with asking questions We streamlined the study by questions, the process of asking good question help us understand and find problems better: Who are the blind? Where to find them? What is cooking? Why does cooking matter? How do the blind cook? What problem do they face?

← Our note and references 2 Perception, the Eye and Assistive Technology Issues

4 Haptics as a Substitute for Vision

17 Assistive Technology for Daily Living

2 Perception, the Eye and Assistive Technology Issues

4 Haptics as a Substitute for Vision

17 Assistive Technology for Daily Living

Learning Objectives

Learning Objectives

Learning Objectives

The sense of sight results from the detection and processing of visual information in the eye, and the visual areas of the brain to which it is transmitted in the form of electrical signals by the optic nerve. One of the distinctive aspects of the sense of sight is the ability to use it to obtain an overview of a situation or scene. This involves the processing of very complex information and the formation of visual maps in the brain. Other features of the sense of sight include the ability to Learning understand Objectives and interpret both moving and still images and to perceive both two and three-dimensional objects. Unfortunately the mechanisms of visual processing The sense sight from the detection and processing of visual information in the brainofand theresults detailed functions of its different visual areas are still not fully in the eye, and the visual areas of the brain to which it is transmitted in the understood. form electricalcomprises signals byfive the sections, optic nerve. One of by theadistinctive aspects ofand the Theofchapter followed chapter summary sense of sight is the ability to use it to obtain an overview of a situation or scene. projects. The opening section, Section 2.1, introduces an overview of perception Thisseeks involves the processing very information and of thethe formation of and to place the sense ofof sight in complex this context. A description physiology visual maps in the brain. of the sense of sight the ability to of the visual system then Other followsfeatures in the next section. After theinclude presentation of the understand and interpret andto still bothprotwo main structures of the eye,both the moving focus turns theimages retina and and to theperceive subsequent and three-dimensional objects.and Unfortunately the mechanisms of visual cessing by the nervous system the brain. Section 2.4, entitled Visionprocessing in Action, in the brain andthe theeye detailed functions of its different areas are still not fully discusses how accomplishes operations such visual as image formation, accomunderstood. modation to focus on objects at different distances and colour vision. Section 2.5 The chapter comprises five followed bydesign, a chapter summary and discusses visual impairment andsections, assistive technology including the demoprojects. The opening section, Section 2.1, introduces an overview of perception graphics of visual impairment, the main different types of visual impairments and anduse seeks place thelenses. sense of sight in this context. A description of the physiology the of to corrective of The the visual system then follows ingive the an next section. Afterofthe of the main aim of the chapter is to understanding thepresentation main components mainfunctions structures eye, system, the focus the retina the subsequent proand of of thethe visual asturns well astosome of theand different types of visual cessing by the Specific nervouslearning system and the brain. Section entitled Vision in Action, impairments. objectives include the2.4, following: discusses how the eye accomplishes operations such as image formation, accom• Understanding in human perception. modation to focusthe on context objects of at vision different distances and colour vision. Section 2.5 discusses visual and assistive design, including the demo• Knowledge ofimpairment the main structures of thetechnology eye and their functions. graphics of visual impairment, the main different types of visual impairments and • A basic overview of the visual processing system in the brain. the use of corrective lenses.

The haptic perceptual system uses a combination of tactile and kinaesthetic information about the environment. Traditionally, this sense has been called touch, but it is nowadays often called haptics to emphasize that not only the sensors in the skin are involved, but also the sensors in muscles, tendons and joints. A related name is active touch. Assistive technology based on haptics has been historically important for the visually impaired and blind person, particularly in the fields of Learning Objectives obstacle avoidance for mobility and for accessing print resources. For example, the haptic low technology aid of the long cane made obstacle avoidance when The hapticaperceptual uses ainformation, combinationthe of tactile kinaesthetic infortravelling reality andsystem for printed adventand of the haptic medium mation about the environment. Traditionally, this hasbooks been called touch, but of Braille made the knowledge and information ofsense printed accessible. it is nowadays often called haptics towith emphasize that not only the sensors the Despite significant developments aural interfaces particularly for in print, skin are involved, the telecommunications, sensors in muscles, tendons and always joints. A related computer systems but and also mobile haptics will retain an name is active touch. Assistive technology based on haptics hasthe been historically essential role in the exploration, understanding and use of physical enviimportantFor for the and blind person, particularly in the fields of ronment. thisvisually reason impaired it is important to have a basic understanding of the obstacle avoidance for mobilityofand accessing printsystem. resources. For example, fundamentals and applications the for haptic perceptual theThe haptic low technology aidthe ofchapter the long cane made obstacle avoidance when learning objectives for include: travelling a reality and for printed information, the advent of the haptic medium •of Gaining an understanding the information principles and fundamentals haptics. Braille made the knowledgeofand of printed books of accessible. significant developments with aural interfaces particularly for haptic print, • Despite Obtaining an appreciation of the interrelationships between visual and computer systems and mobile telecommunications, haptics will always retain an perceptual systems. essential role in the exploration, understanding and use of the physical envi• Learning about the different ways in which haptics are used in assistive technolronment. For this reason it is important to have a basic understanding of the ogy systems. fundamentals and applications of the haptic perceptual system. • Understanding the advantages and alsoinclude: the limitations of haptics in assistive The learning objectives for the chapter technology systems for the visually impaired or blind person. • Gaining an understanding of the principles and fundamentals of haptics.

The activities attribute of the comprehensive assistive technology (CAT) model, developed by the authors and presented in Chapter 1, has six main categories, of which three are categorized as fundamental activities and three as contextual activities. The assistive technology required to support blind and visually impaired people in carrying out activities in the fundamental activity categories, mobility and communication and access to information, has been discussed in previous Learning Objectives chapters. Most blind and visually impaired people do not require assistive technology to support activities in the third category, cognitive activities. The activities of the18comprehensive assistive technology (CAT) model, This chapterattribute and Chapter will discuss the assistive technology required to developed by presented in Chapter 1, has main categories, of support blindthe andauthors visuallyand impaired people in carrying outsixcontextual activities. which three are fundamental activities aswhereas contextual acThis chapter willcategorized focus on theas technologies required for and dailythree living, Chaptivities. The assistive required to to support blind and visually impaired ter 18 will consider thetechnology technologies required support blind people in education, people in carrying out activities in the The fundamental activity categories, employment and recreational activities. chapter will also consider the mobility solution and communication access with to information, has been discussed intechnoloprevious of accessibility issues and associated communications and information chapters. blind and visually impairedtelecommunications people do not require techgies otherMost than computers and the Internet, andassistive print media. nology to support activities of inone the of third cognitive activities. Despite being a component thecategory, fundamental activities rather than a conThis activity, chapter and Chapter will discuss thecommunication assistive technology required to textual this access to 18 information and topic fits logically support blind and visually impaired people in carrying out contextual activities. into this chapter, since it includes the use of smart cards and information kiosks, This chapter will focus technologies required for daily living, whereas Chapwhich are mainly used on in the daily living applications. terAs 18the willname consider the technologies required to support blind people in education, implies, daily living involves a wide range of different activities that employment and activities. The day chapter willseveral also consider are carried out onrecreational a regular basis, often every or even times a the day.solution Most of of accessibility associated with communications and information technolothese activities issues take place in the home environment, though some of them, such as gies other take thanplace computers the Internet, telecommunications and print media. shopping, outsideand it. The CAT model is used to provide the categorization Despite component of onein of order the fundamental rather than a conof daily being living aactivities required to provide aactivities comprehensive treatment textual activity, this access toneeded information and communication fits logically of the assistive technology to support these activities topic and enable blind into this chapter, since it includes the use of smart cards and information kiosks, and visually impaired people to live independently in their home setting. The which are mainly used in daily living applications. assistive technologies used to overcome accessibility barriers in daily living range As the name implies, daily living involves a wide range of different activities that from simple low technology devices to very sophisticated and specialized high are carried out on a regular basis, often every day or even several times a day. Most of technology devices, giving the chapter a large number of subsections and coverage these activities place the home environment, thoughsolutions. some of them, such as of a very widetake range of in different types of engineering The chapter shopping,descriptions take place outside it. Theand, CAT in model is used provideofthe categorization provides of devices some cases,todetails the engineering

• The Understanding thechapter activities carried by the visual system, including spatial main aim ofofthe is to give anout understanding of the main components form processing, vision, and colour vision. and functions of thebinocular visual system, asmotion well as detection some of the different types of visual

• Obtaining an appreciation of the interrelationships between visual and haptic systems. 4.1perceptual Introduction

• Learning about the different ways in which haptics are used in assistive technology systems. The hands are remarkable organs that have had an enormous importance for both the biological and cultural development of human beings. In fact, the hand was


Who are the blind?

The blind is a general term for visually impaired people, many of them still have subtle sight With their subtle sight, they can feel light and shade, and some can see a few centimeters away. There are around 60,000 of them in Taiwan. And most of them are working class or even the poor.

Where to find them?

Volunteering in social welfare organizations, became familiar and know them better Establishing long term relationship with the blind and social worker is very important, the results of userstudy depend on their trust and support. Taiwan blind person welfare National Christian Council and Eden Social Welfare Foundation were the organizations we collaborated with, their rich experiences and resources such as connections to individuals, case studies, training material inspired us a lot.

What is cooking?

Cooking is a series of actions that process ingredients into food These actions could be divided into several processes such as ingredient obtaining, preparing, heating, finishing. Dividing actions into groups could help us understand the problem the blind is facing better.

Why does cooking matter?

Reduce dependence, build confidence, gain control on own health, and save money Living on one’s own without aid is the ultimate goal of welfare works. Cooking is a basic living skill, controling the making of one’s own food also means taking one’s health in his own control, and the process of making things can generate confidence and happiness, which are crucial to mental health. Further more, the cost of a meal in modern city life is really high, cooking for one’s self could save a lot.


↑ Interviewing for general knowledge of ↑ daily life of the blind

↑ Using subtle sight to measure the amount of oil

These general understanding gave us keener senses toward insights while we studied further into blind-cooking →


How do the blind cook?

They cook just the same as everyone else only much slower and more systematically Every thing has to be organized- oil is at the second shelf counting from left, salt is in the plastic box at the first shelf, fish is in the square plate on the table near the left edge, etc. We recorded their cooking process, and the video was just like a cooking tutorial- step by step, clear and precise. They usually cook cuisines that don’t involve complicated process and too many kind of ingredients, some dishes can be done with a knife and an automatic steamer.

Difficulty in placing pot on heating area precisely Lack of clue and sign to tell the relation of stove and pot


The controller is hard to find without sight Incomprehensible or even lack of feedback make power controling difficult Flame is really dangerous especially for blind people

Lack of feedback a to tell the state of

Easily get burned removing the lid fr heated pot

Using position as alternative to visual feature

Couldn’t perceive the amount of water filled

Easily get burned while adjusting pot

Lid is unstable wh placed on table

Put ingredients in order

Fill water into pot

Place plot onto stove

Turn on stove and adjust fire

Wait for water to b

Touch, Position

Touch, Hearing, Position

Touch, Position

Touch, Hearing, Position


To recognize ingredients without sight, the blind would put them in seperated dishes and place them strictly in order.

They used their finger and the changing pitch of sound of water entering the pot as water level indicator.

They spent a lot of time adjusting the position and level of cooking vessels, but couldn’t be certain if correct or not.

They verify the state of fire through the hissing sound of gas emission and the heat of fire; with eletric stove, they only have beaping sound of control panel as clue.

They risk their han ing for the handle their vague percep spatial position ne source.

and clue water

while rom



nd grope with ption of ear heat

What problem do they face?

Positioning, heat controling, and safety issues We summarized materials we collected from observation, interview, quationaire and experiment into the table below. Finding position of things, relative position of body and objects; Being burned by hot objects; Uncertainty of results, these are their main concerns in the heating process of cooking. Many of the blind don’t cook because they feel insecure, they can’t afford severe injury or other consequences.

Couldn’t confirm the relative position of hand and pot while adding ingredients

Difficulty in finding the handle of ladle/spatula after leaving them in pot

Incomprehensible or even lack of feedback make power controling difficult

Couldn’t confirm the relative position of hand, pot, dishes while serving food

Hard to perceive the state of ingredients

Easily get burned while removing pot from stove

Difficulty in retrieving the food that fell off dishes

Add ingredients into boiling water

Wait for ingredients to be fully cooked

Turn off fire and stove

Take food out of pot and put into dishes

Touch, Position

Hearing, Timing, Touch

Touch, Hearing, Position

Touch, Hearing, Position

They depend on vague perception of spatial position and relative position of hand and pot to finish this task. It is really hard for them to know whether if the ingredients are added successfully or not.

Timing and experiences are what they depend on to do this task, some can even perceive the state of food by sense of touch.

The feedback is usually subtle and easily neglected, sometime they left the fire burning or power on and not knowing about it, this is very dangerous.

They usually scoop through the entire pot leaving no corner out in orer to assure no food were left.

Difficulty in retrieving the ingredient that failed to enter the pot


The Vision

Redesign kitchenware with a little more consideration for blind people After problems found, we consulted wtih living skill trainer, did academic research, reviewed other’s design and assistive products, and experienced cooking without sight personally to clarify our design objectives. The problems blind people faced during cooking also exist with people with intact sight. This meant the design outcome of this project have the potential to go beyond the small market of the visually-impaired, and a bigger market can ease the problem of unaffordable price of designs for minority. Therefore, we aimed to redesign existing kitchenware rather than another assistive product. Blind people don’t need an exclusive product, they only need a little more consideration of their condition.


Design Objective

Provide sign and clue Sign refers to fixed objects or shape, it help the blind build spatial cognition (e.g. handle of shelves, faucet); Clue refers to changing things, it help the blind comprehend their surroundings (e.g. sound of water boiling, hot air around heating source)

Haptic and auditory feedback Sense of touch and hearing are two main substitutes for vision. The sign and clue would be given haptically and auditorily. Tactiles, shape changing, mechanism and sound can indicate function, usage, state and more.

Tolerable to user’s errors User should be able to explore their own way of cooking within the minimized frame our design provide. There are no standard usage.

Easy to understand It already cost more time perceiving with haptic and hearing, product should be simple and clear with its function and usage.

Be steady Everything should be steady and stay at the same position while not in use, assuring it is able to be found again by the blind.



Sketching, 3D modeling, and iterating again and again


The core ideas are circular shape, hollow structure that conduct heat very slow, and silicone cover. Other details are mostly there to refine and support core ideas.



Metal 3D printing, PU foam, Steel sheet, and things at hand



Size, User flow, Functionality We asked blind people to complete tasks with our models, and then we observed the process. These tests did reveal several size and scale flaws, which were overlooked while modeling in CAD. We also designed other tests to prove functionality of heatproof design, hypothesis of user behavior, etc.


Detail Design

Hollow-structured circular handle The hollow structure reduces heat conduction, and therefore keep the circular handle from becoming too hot. Combining the silicone cover and hollow structure, the circular handle prevents user from being burnt. Unlike the traditional handle that you need to touch the specific part to avoid heat, circular shape provide 360° assistence that user can always grip the handle safely regardless of how they place vessels. The handle design was applied to the pot, the wok, and their lids.

Silicone cover in vivid color Silicone cover has a bright and vivid color, which is eye-catching even to people has weak sight, and the eye-catching color indicates where are safe to touch clearly. The unique texture of silicone also serves as clue for blind people to recognize the heatproof area. Silicone cover extends from handle to the side of pot and wok, where user often make contacts while holding the circular handle. The silicone cover was applied to whole set of our design.


Circular, curved, and detailed

Clear, simple, intuitive usage by form

Wok features circular stand that is designed to fit in the trench on our stove, and also works with other stoves; an ergonomically curved grip which assist user perform actions with the wok. Pot features a lot like the wok, only adjusted to fit different tasks and scale. Both lids of them are designed to be able staying steady while being placed on table. The lid of pot has a whistle which make sounds from vapor of the boiling water. See more details in further content.

Stove features circular side trench leading user to controller and wire, the only two places where operations occur; instead of panels that lack of comprehensible feedback for blind people, we provide knob control, its mechanism, shape and the embossed dots show the state of power clearly.




The wire can be twined on the legs of stove. And the side trench of stove can lead user to the plug and the controller.

The shape and tactile indicate the silicone part which user can hold onto without worry.

The power controller is designed to be turned at intervals- off, small, moderate, strong.

User open the pot with their hands on the side instead of directly across the hot vapor.


Three sets of embossed dots on the inner surface of the pot indicate three different depths. They work well as water level indicator.

The trench around the heating source is designed to fit the circular stand of pot and wok. It helps user place vessels perfectly centered, and prevents them from being toppled.

Starting from countertop, then stove, and lastly to pot, user can easily find the circular handle of pot and wok by taking the edge of stove as reference.

The inward-curved shape and the chasm on the inner surface of wok make it easier to scoop up food with spatula, and also prevent food from escaping.



Thinking big, starting small We had lots of ideas and thoughts, but none of them were perfectly delievered. It is already a big challenge to design one product well, not to mention we were working on three. We should highlight the most critical point and focus on it. Do small work and bring big influence.

Learn how to conquer problems from the blind It was really astonishing when we were observing the blind cook, they were so skillful that it seemed like a magic show. The ways they solve problems were interesting and never thought by us before. They are pioneers on the thorny path to wellbeing.

Heatproof structure The hollow structure we designed for handle has a great potential that it is possible to prevent burn without any cover. This requires lots of test in structural design and material combination.


The blind people trying our design and giving reflections


“ Let’s move it move it! ”

Moonie #childish #furniture #exciting #fun

A chair which fulfills your childish dreams; a chair ignoring manners and unleash the deeply hidden child in your heart.



What are your childish behaviour? We have been told to sit properly on our seat, wiggling and swinging were not allowed. It was quite torturing to be restrained. This desire for freedom can’t be fulfilled with the daily chairs we use. Thus, I began to work on Moonie.




Moon, moving, moonie! Version 1 was designed for home, a crazy cradle for adult. Version 2 was like public furniture, which should be fixed to the ground to ensure its stability.



Using honeycomb cardboard as material to make the model. Each piece of cardboard was cut by machine according to the 3d model I built, and then assembled by wood glue.


“ Utilize every water drop! �

Drops #water saving #design opportunity evaluation #dynamic

Drops is consist of a pot, a plant, a frame, and an umbrella. It irrigates plants with water drops on umbrella, lighting up daily life with lively color and dynamic form, keeping the floor dry and clean.



What are the possibilities of water saving product? After observation and ideation, I used a matrix to sort sources and usage of water to help me clarify objective. From left to right, sources were sorted by amount of water collectable in fix time; from top to bottom, usages were sorted by amount of water consumption. Each dot represents a suitable combination of source and usage considering water quality, supply and consumption.

Absence of an interesting umbrella stand + Desire of growing plant = Design opportunity It rains a lot in Taiwan, and the rain drops on umbrella always mess up the floor when entering building. Umbrella stands are commonly installed, but they are usually boring. And nowadays many people are growing plants at home as a relief from daily pressure.



Imbalance form led to dynamic soul



Detail design



Umbrella entrance / Like a short tube, it defined the route for the umbrella to enter.

The pit / The pit is for stationing the pot, and is also the terminal of the drops from umbrella.


The form / Lines as frame, and surfaces as weight, together they composed the unbalanced form. This dynamic appearance and the plant make the product come alive.

↓ ↓

Entering route / Umbrella would stand nearly vertically at the round pit.

Irrigating / The water drops on the umbrella would flow and drip to the pit under the pot, then absorbed by the plant.


Reflection The design can be better in many aspects, the choice of material, the detail of the umbrella entrance, and the weight distribution. And the best part of this concept would be finding water source people used to neglect, and the imbalance form. There are great potential waiting for further development.



UI/UX Design


#app #userstudy #visual ideation

“ How will the weather be? � Central Weather Bureau app 54 - 73

redesigning weather information app


Central Weather Bureau Weather information app

#redesign #styling #userstudy

Central Weather Bureau(CWB) is the authority of weather information and forecast in Taiwan. CWB provides precise, accurate and trustworthy data and analytics of a vast range of weather infos. Their advantage became a burden when making their own app. The app failed to give the most needed info to users, and at the same time giving too many infos distracting user.



The Approach

Survey, analytics, interviews, observations and market research First, I downloaded many weather info apps to see what were their features, advantages and disadvantgaes, and also taking reference of comments and grading to take a peek of user’s desire. Second, I made an online questionnaire survey basing on the knowledge from market research to investigate how people actually use weather info apps, and what they really want with the app. After receiving 174 responses, I began analyzing the data with both quantitative and qualititive methods. Third, I examined the user flow of CWB’s app, observed and interviewed people using it, then evaluated the app with the discovery I found in analyzation to clarify design objectives.





Yahoo 天氣





App Store #Ranking


請為以下功能或項目評分 現在地點



現在天氣 文字

現在天氣 圖示










The Discovery

Information priority, and how much each info is needed Most important thing for an information giving app is to give the most needed info to users as soon as possible. The analysis of the questionnaire survey shows how much each info is needed and their priorities.


Location Temperature Icon of current weather


Highest-lowest Temp. today Hourly forecast


Weekly forecast

Must have :

Present location, H-L Temp., Icon of current weather, Weekly forecast, Hourly forecast Would be nice to have :

Swiftly changing between locations, Air quality, Apparent Temp., UV Index, Advice for daily activities, Relative humidity Doesn’t matter to be without :

Accumulated precipitation, Picture of current location, Wind direction


The Problems

Unclear brand identity Central Weather Bureau has people’s trust toward their products, but this advantage wasn’t well utilized.

Uncomfortable usability of controls Insufficient tappable area for controls; inconsistent design for tappable objects; not intuitive interactions.

Overloaded infos Infos are displayed too crowdly and lack of prioritization.

Now Location Icon of current weather Description of current weather Current temp. Apparent temp. Date Time Weekly forecast (H-L temp., Weather Icon) Summary of today’s weather





Location Hourly forecast (Probability of precipitation, Time, Weather Icon, Line graph of H-L Temp.) Button for detailed hourly forecast Button for detailed weekly forecast Graphed time of sunrise-set/moonrise-set UV Index Icons of advices for daily activities Forecast charts

Location Station name Humidity Accumulated precipitation Wind direction Gust wind Visibility Pressure Air quality Weather charts Leaderboards of precipitation/temp.

Home Fisher Globa Weath Alarm Units Notifi Langu Weath Instru About

Unclear visual hierarchy Insufficient blank space and lack of order led to suffocating interface.

Bad visual comprehension Background picture interferes contents; having too many colors distracts user; icons’ weight are too light.

Complicated user flow Having too many buttons at too many places; infos are scattered to too many layers, increasing the effort of user to get needed contents.



Weather alert reports

e page ry weather al city her checkin m setting fications setting uage her alert reports uction t

Search bar Button for selecting cities Button for selecting recreation locations Current location Stored locations Button for editting stored locations



Design Objective

Improve distinctiveness of app icon Make use of Central Weather Bureau’s official mark.

Improve usability of controls Take other apps as references for arrangement of controls.

Reduce cognitive load Display infos from top to bottom according to previous study, and hide unimportant infos, improving comprehension of the interface.

Clear visual hierarchy Reduce colors and remove visual clutter to focus on content (info).

Flatten information hierarchy Display most needed infos in one long page. Slide down to see more and slide left to change location.

Enable personalization People have different demands for infos.


Open app

Location Temperature Icon of current weather Date H-L Temp. Description of current weather Possibility of precipitation Hourly forecast (Time, Temp., Possibility of precipitation, Weather icon) Weekly forecast (Date, H-L Temp., Possibility of precipitation, Weather icon) slide up

Summary of today’s weather Air quality Apparent Temp. UV Index Humidity Wind direction Wind scale Pressure Advice for daily activities Personalize setting button



Weather Alert

Observation Forecast charts Alarm Weather checkin Setting Instruction About

Search bar Current location Stored locations

Alert reports

Redesigned User Flow


Visual Designing

Taiwanese daily items and color tones, and Text-centered visual I chose Taiwanese style to be the main visual guideline after reviewing several moodboards I made. Working as information giving products, traditional calendar and CWB app are very alike in many aspects, this similarity makes traditional calendar a great reference for the interface design. And Central Weather Bureau stand as the well-known and trusted local authority, making their products in Taiwanese style is certainly appropriate.




Find visual insights from daily object and other good designs Five Metal Shop had done a great redesign of traditional calendar, their design inspired me a lot in integrating complex information. And other weather apps served as great examples in both positive and negative ways. I sketched directly on my iphone with the app Paper. Then, I made several versions in Ps. A rapid process.


Interfaces from left to right are Main page, Main page, Entering page, Menu, Locations, Weather Alert, Personalization.










Detail Design

Long page, solid icons, content-centered, and prioritized info display. Weather icons are modified and redesigned from the original design by Titusurya / Freepik.


Primary view has already given user the most needed infos, and swipe up can read more.


Hourly and Weekly forecasts are displayed horizontally, swipe left to see further into the future.

Personalize butto the long page, ta playing ord

on is at the end of ap to edit the disder of infos.

Swipe left and right to change between current location and stored locations rapidly.

Tap on the alert icon to read the official weather alert reports issued by CWB.


Reflection I made a simple prototype with Adobe Xd and tested on Iphone, it turns out that the colors are too bright and should be adjusted. There are still plenty of works to do to make the app appear perfectly on real products.



As a designer, I

Learn broadly, study deeply

Learn broadly to increase knowledge and understanding, study deeply into problem-related fields to find solutions. I enjoy very much this process.

Ima wild desi rigo

agine dly, ign orously

Although I dream wildy, I design patiently and attentively.

Sketch, CAD, Prototype, Iterate

Hand sketch ideas and discuss with those papers → design details in CAD (solidworks) and discuss → make prototype to test and to verify design → adjust, iterate, adjust, iterate... → final design → reflection. This is how I design after the stage of research.

Design is connecting

͡ things

to create

people tech dream ... .. . ͜


+886 912 471 165

Liu hsiu liang's portfolio  
Liu hsiu liang's portfolio  

Product design, UI/UX design