UX/UI portfolio

Page 1

HI,


Nice to meet you , I’m

Siyu Hou An product designer passionate about

understanding people’s behavoir and emotiona physical spaces and online platform) designing from big program to specific details learning across disciplines

I used to be a Landscape Architecture designe

landscpae portfolio here: https://issuu.com/s-u

Scoll down to see my resume and highlig


al changes ( Both in

er~ Check out my

u-/docs/portfolio

ghed projects !




UX/U

CDA website R


UI Design

Redesign

CDA A real client project Help the center of Development Adolescent to create an efficent, welcoming and responsive web platform


Context

Problem

Solution

Client Logo

About the Center

The Center for the organization that e scientific approach professionals, inclu cent organizations

About the Webiste

The official website adolescent develo studies.

The current design of the we to scientific studies. Therefor better convey the center’s wo

Our team believe that CDA website can

Efficiently to navigate users through the main Welcoming to diverse groups of users.

Visually clean and attractive when users land

Responsive accross different devices and scr


e Developing Adolescent is a young, progressively developed non-profit emphasizes the adolescent health, education, and well-being through a h. In the short term, the center aims to spread their adolescent studies to uding but not limited to public educators, policymakers and other adoless.

e becomes the critical platform which not only allows the public to learn opment but also enables the center to get feedback about their scientific

ebsite lacks the ability to accurately navigate users re, a redesign of the website is needed in order to ork and principles to the public.

be

n pages.

d on different web pages.

reen sizes.



We delievered the website interfaces that are Structurely clear , Visually appealing, Seamlessly interacting


Logistics

Team

Duration

2 Designers

Feb 4th - March

Siyu Hou

4weeks

Weijia Zhou

Process

Research

Ideate

Proposal

D

User Analytics

Participatory Design

Phase1&2

I

User flow Test Interview

Mind Map

P

Sketches

Research User Analytics

User Flow T

Client meeting

10 participato

Sumarized the data

(6 college stu 4 professors)

5min/ person

Behavior and documentatio


My Role Research

10th 2019

UX/UI design Project Management

Design

Evaluation

Iteration

Reviews

IA diagram

Team Critique

Prototypes

Prototypes

A/B Test

Mockup Presentation Take aways

Test

Interview

ors in total

Client meeting

udents and )

30 min

n

d Feedback on

Web content summary& highlighting Company goal & Web Redesign goal


To begin with, we attended the first official meeti

gave us some conclusions from website traffic st

talked about the current problems and their expe

We then invited 10 people to participate in websi

task to do by glancing through the website starti

we observed and documented their steps or flow major complains.

Existing Home page

E


ing with the communication director of the center. They

tatistics and analytics (from google analytics) and we

ectations of the website.

Low Number of Daily Active Users Low User Retention Single User Type: adolescent professionals

ite user flow test. In specific, each person is assigned a

ing from the home page within 5 minutes. Meanwhile,

ws. Sumarizing all users’ feedback, we found three

Existing Research page

Existing Mission page


65%

Multiple navigations can mislead users to land at the wrong subpage.

46%

Poor content organization/ hierarchy rise difficulties for users to search for articles

35%

One-column layout and all-expanded content can take users extra time finding

Task sample: Find the main work field of the center.

User Flow Diagram


e s.

g

Task sample: Find a research paper that related to adolescent parenting.

User Flow Diagram


To find out potenial opportunities to improve user’s e

Ideate

of the current website. By analysing the structure of w sumarized four key points that can help reduce user

Combine overlaped content from two navigation system

Organize the content of “Science” subpage logically

Credit to

During the second meeting, our team met with the c

our research report for the review. In addition, our te

colleages of the center. In specific, we formated the diagram and discussed all features that need to be


experience , we dove deep into the information architecture

web cotent and using users’ feedback as reference, we flow’s friction.

Improve the visual design in order to keep users’ attention on the website.

Increase the overall interaction and create friendly mobile site besides the web interface.

o the iconmaker.com

communication director of the center and delivered

eam hold the participatory design exercise with the

e feature list sheets from the information architecture on the website.


Current Information Architecture

Proposal

In phases

After revising and organizing the new information archite

posal to the center. In the proposal, we highlighted priorit

into three phases. In this way, we were able to accomplis


Revised Information Architecture

ecture of the website, our team delivered the final pro-

tized requirments of the center and divided the project

sh the most important features first.


Agile product management system

In terms of managing the project, our team use the Ag

are not a big team and overall project is not as compl

to train ourselves to work along with this system in or

Sketches


gile product management system. Even through we

lex as other web applications, we think it’s important

rder to be proficient within a limited amount of time.

Our team set up a goal everyday before working on the project and documented the actual working hours. By comparing the actual workload to the daily goals and remaining work left, we were able to keep our team on track and update with client more confidently.

Our team did white broad exercises to brainstorm potential layouts of the ‘Home’ ‘Science’ ‘Science_ Article’ ‘About’ etc interfaces of the website


Wireframes & Layout

Design Home OP_B

Home OP_A A1

2

3 4

5

6

About_Mission

About_People

9


Science_Home

Science_article

A2

2 9

8 10

7 7

A1 A2

Header options

2

Carousel

3

BG box

4

Line of Texts

5

Picture tab

6

Site Map

7

Science Topic Bar

8

Search Filter

9

Text Paragraph

10

Article Info Cards

About_People_detail info

5


After sketching different layouts of different sub-page

Evaluation

home page. We delivered two options to the center a regarding to the overall layout and interface asthetic.

Option A

Option B


es of the website, our team started to prototype

and did a A/B Test, intending to get quick feedback

B Feedback: Option A: Too many texts. Users tend to click on either image or icon first. Clean and clear structure overall. Article Category is clear but the introduction pop up box is hard to read. Users don’t know where to click when look through the second half page.

Option B: Article Category is clear and the bar design guide user where to click. The lastest research articles did not highlighted in the home page. The navigation is creative and clear in terms of the layout but takes too much space. The image is attrative but unfortunately it’s not clickable.


Design System


Prototype - Home


Prototypes - Mobile Site_Home

Prototypes - About

Excisting ‘Mission’


‘Mission’


Excisting ‘People’


‘People’ _ Detailed information

‘People’


Prototypes - Sicence

Excisting ‘Science’


‘Science’


Prototypes - Sicence

Excisting ‘Science’_Article Page


‘Science’_Article Page


Prototypes - Mobile Site_Sicence

Prototypes - Mobile Site_Sicence_Article



Review

We addressed the mockup presentation to the center our design did not go to the launching phase. Due to decided to stop the project to the conceptual design

developers , we still treat this real client web design e

Takeaways

Sometimes, physical reactions are more vauable us

During our first user flow test, we documented that 7/

tion tab with visual image and title on it. The test resu

to images more. As we observed how each user read

move their mouse to image tabs first. But they change when they look at images.

Web content organization is critical in terms of a cr Recalling the overall design process, our team found

analyzing and organizing information architecture of t

content reduce users effort preceiving information an pages.

It’s important to constantly update design process

When managing this project, our team proposed the a

under this system. In the process, we hold weekly zoo feedback about our design from the client asap.


r and got valuable feedbacks besides the usability test. Unfortunatly, the position transfer of the center as well as the buget issue, the center phase. Even through our team did not have the chance to work with web

experience as a great learning process.

sers data when reviewing a design or interact function.

/10 people clicked on the top navigation texts instead of the naviga-

ult seems conflicts with the design logic as people are tend to attract

d through the home page, however, we found out some users did

ed to click on navigation texts because they showed confused face

reating a user friendly website. out that we did spend longer times on sumarizing,

the website. A clear and logically organized web

nd ease the process for users to dive deep into sub-

s with the clients.

agile system to the center and collaborated well

om meeting as well as email updates in order to get


Product Design Outdoor workout can be full of FUN

C

Se Cit


City Run

elf workout | community join | ty exploration


Problem

Outdoor workout has been getting more popular no or doing exercise to release stress... However, have run, jog or bike in the city:

Have you ever ...

So get tried of running near home.. Where else can i go?

It’s so hard to kee

I need others hel

Solution

2019 outdoor running trend

The new running method is about focusing on your p

you’ll feel sweaty but also relaxed at the end of your er of Run Wild Retreats + Wellness


owadays as more people start to either keeping fit you ever facing these problems when you try to

I’ve ready to run! Untill, i saw the weather outside..

I feel this street is not that safe..

ep exercising..

lp!!!

posture, breathing, and surroundings so that

r workout. --Elinor Fish, running expert and found-



So we came up with a Mobile App that helps user

“ Have Fun of outdoor workout Communicate with other exercisers Explore places of interest in the city �


Logistics

Team

Duration

2 Designers

Jan - Mar .2019 2 Months

Process

Research

Ideate

Design

Obervation

Mind Map

Sketches

Survey

Card Sorting

Wireframes

Interview

Prototypes

Competitive Analysis

Research Observation

Survey

1 Day

50+ Response 67.8% 18-35 yrs old 57% Female 50% Employee/Employe

Berkeley & SF


My Role Product Management

9

s

UX/UI design User Testing

Evaluation

Iteration

Next Step

Team Critique

Prototypes

Take aways

User Testing

s

er

Interview

Competitive Analysis

3 Partcipants 20min / person

View Ranger Pacer Human Strava


Coming to this product development, we first did so

exercises. In sepecific, me and my teammate went to

documented places people like to go to do exercise

actions people will do during workout. We found ou

people are more likely run near community park or r

run near harbor and parks. Some people intent to ru

small market to buy a bottle of water and continue t

We then conducted surveys targeting residents in B

outdoor execrise and how they will action in reality w

received 50+ responses and here are some insights


ome observations about people doing outdoor

o both Berkeley and SF city. We observed and

es, type of exercises people usually do and other

ut that

residential neigborhood. In the city, more people

un or bike up hill. Some runners stopped by at

to run. Some runners took selfies while running.

Bay area to find out their attitude towards to

when they are asked to do execrise outdoor. We

s from key questions.

Intension: “ People choose to do outdoor workout in order to expereince both natural and cultural landscapce.�



A Paradox : “People are lack of motivation to explore places further from home.”

Insight: “Urban street conditions are important factors that affect where people will go and how they will workout ”


Even through people have good intention toward ru

worried about the dynamic and unsafe urban enviro

factors that stopped people from consistently execr

and asked each of them to describe his or her daily been experienced during outdoor workout. We got

sation with each of them. After the interview, we su 4 scenarios.


unning or jogging outdoor but in reality, they are

onment. In order to understand deeply about

rising outdoor, we interviewed four potential users

y workout routine and any pain point he or she has users’ permission and voice recorded our conver-

ummarized three participants’ workout journey into


I’m used to running outdoor three ti miles near my neigborhood. In sepec nity park half miles from my home. I love to meet and share my running e

I just started to run and jog ou ment is really new to me. I do need some guideness on cho

I like to run outside and i do it quite just moved in berkeley 2 weeks ago, ings. I need suggestions or tips abou run but also see attractive landscape

Hey! I like to explore outdoor out. I’d rather spending the w hang out with friends than sp takes time and it’s a dry and b


imes a week. I like to run 2-4 cific, i usually go to the commudon’t mind workout alone but i’d experience with others.

utdoor recently so the outdoor environon’t have much destination to go and i oosing suitable routes for beginners.

frequently. However, because i , i’m not familiar to the surroudut places where i can not only e.

r but i’m not really into intensely work-

whole afternoon traveling in the city and pending 3 hours just running. Workout boring process to me..


Pain Points:

People have difficulties choosing their running

1. are unsure about their running / jogging abilities a 2. do not know street conditions along the route. 3. do not know any landscape or places of interest

4. are bored of their workout routines and they wan

People have difficulties keeping running or jog 1. think workout is dry and boring. 2. are tired of working out alone.

3. don’t have much time to do nothing but running o

Knowing the pain points of potential users by inter

Ideate

we began to brain storm possible solutions.


g or jogging routes because they,

and preferences

along the route.

nt to explore new places of outdoor workout.

gging because they,

or jogging.

rpreting results from all types of researches above,


Design

Before sketching ideas, we discussed sub solutions under each method and create an information architecture of the platform.


We then came up with 5 methods to ease the route selecting process and to motivate users to workout consistently.

Flexible Route guideness Share and Showcase Healthy Competition City meetup Incentives


Sketches about route gui


ideness / recommend route / challenge


Prototype 3 Version Prototype +

2 Rounds of user testing

With the Information architecture set up and design swithed to digital prototype. Because the platform in features under each one, we are facing a very heavy it’s important to get fresh feedback from users as so prototype the workout flow first since it tries to solv amount of users have during our research.


sketches of each main feature, we then ncludes 5 main features and more sub y workload. At the same time, we think oon as possible. Therefore, we choose to ve the route selection problem which large


We did partner critique between me and my teamma workout flow. User Feedbacks:

It takes so much clicks / steps to finish route se

I don’t know what spots to pass by? Any recom

I see the rate the route page but i cannot rate ? Any colors?

Design system


ate. Then we invited 5 participants to try the

electing. What if i just want to run randomly,

mmendations?

?


Evaluation

Second Version of Prototype : Workout Flow

User Feedback: Click “SHOE” to start run directly. Need on boarding page

User Feedback: After click “save” image, how can i back to running stage?

Us Isn sav Sa


Platform show recommended spots nearby. Simplely tab spot to create route.

ser Feedback: n’t my route automatically ved when i finished running? ave button is misleading.

List form. Rate my route easily.


Second Version of Prototype : Explore Flow

User Feedback: I want to see more detail about this route..

User Feedback: I don’t understand the rule of creating a challenge.. These guideness are misleading.


User Feedback: I want to know what challenge without an extra click into each invitation.

User Feedback: What is most? or Min Goal? The title on each challenge card is misleading.


Final Version of Prototype : Workout Flow

On boarding guideness

change “save” to this route. Clear


o “like� guideness for user

Fewer Button and more clear direction


Final Version of Prototype : Explore Flow

Route detail with street

condition rated. Help user decide whether to try this route

combined 2 types of challenge mo into one. Clear guidelines to help create a challenge.


ode user

More clear title with challenge type and location shown.

More clear title with challenge type and rules shown


Take Aways

Preceving users’ feedback (both physcially and ver when designing new rules and programs.

Team crique and discussion play important roles in

When ideas go diverse and crazy, making sure team main functions help design on the right track.


rbally) is really helpful when develop a new product, especially

n the product development.

m members are on the same page about the product goal and


UX/UI Design food from market to kitchen

P


Pick Me A mobile platform which helps independent restaurants pick better quality food resources.


Problem

When choosing food/ ingredient sources, however,

where and how markets produce food?

Solution

Are their food have higher quality?

We Believe that:

Good restaurants need more choice selecting bett

Restaurant owners need better price and food qua

Restaurants need free their labor from complicate growing their business.


Running an idependent restaurant is not easy. Unlike some restaurants with big brand, idependent restaurants often attract customers by offering authentic food and considerate table service. Thus, choosing trustful local food suppliers is the key to not only guarantee better food quality but also helps reduce cost for the restaurant owner.

restaurant owners still have various concerns:

I’m not sure if i have a good deal.

I spend lots of time talking to local farmers but still don’t know who to pick?

ter food supply.

ality transparency when selecting food.

ed food selecting process and focus on



So we came up with a Mobile App that enables local restaurant owners to

“ Compare price & food quality of multiple local markets

Shop online & deliver to door Seamlessly communicate with their food suppliers about food sources


Logistics

Team

Duration

2 Designers

Sept - Nov 201 2 Months

Process

Research

Ideate

Design

Obervation

Mind Map

Sketches

Interview

Card Sorting

Wireframes

Competitive Analysis

Prototypes

Research Observation

Interview

1 Day

3 independent

Downtown Berkeley

3 local market o 20min / person


My Role Research

18

UX/UI design User Testing

s

Evaluation

Iteration

Next Step

Team Critique User Testing

Prototypes

Take aways Next Steps

s

Competitive Analysis restaurant owners

we compared the product goal

owners

business mode key features


After setting up goals of our design, we did a first rou

downtown berkeley. We focus on small restaurants, t will do when vendors come to door delivering food.

Insight 1: Owners tend to order large amount of ing der similar food every time.

Insight 2: Some owners bargain with their vendors w

asked one of the owners for the reason. He said the

didn’t get price updates when he ordered food from

We then invited 3 local restaurant owners and 3 local

them, aiming to get both restaurant and markets pers

view as our second step research method because w

with each of them. Having face to face conversation

questions and some sensitive questions which they


und observation near UC Berkeley campus and

trying to document any actions restaurant owners

gredients at one time and they are likely to re-or-

while checking all the food they ordered. We

e price of the seafood went up recently and he

m the vendor.

l farmers to do a 20 min interview for each of

spectives on ingredient ordering. We choose inter-

we want to have deep and felxible conversation

n with each of them enables us to ask follow up

y maynot want to share with other owners.

We then use card sorting method to organize participants feedback.


Pain Points Restaurants:

Tend to stick with one or two specific vendors beca

1. Personal relationship / 2. Better discount / 3. take

Price and food quality information are not transpare

Communication with suppliers is not instant and co Local Markets: Stable but limited customer resources. Lack of ways to advocate their branding.

In order to understand the real market value and tes

restaurants, we searched online about any product th

Cheetach. Cheetach also aims to ease local restaura

is smiliar to Walmart, amazon etc as the company

system. In specific , cheetah focus on providing cu

anteed. The company also offering one day delive

traditional business mode, we believe a platform t

dent restaurants help good market owners to advo to compare price and food quality.


ause:

e times to test out new suppliers

ent.

onsistent.

st out all the pain points we summarized from local

hat trying to solve similar problems. We found

ants’ food ordering process. The business mode

y produces food, online ordering and delivery

ustomers good food price with no markup guar-

ery to guarantee high quality food. Instead of

that connect various local markets and indepen-

ocate their food and enables restaurant owners


Following three main pain points, we brain stormed

Ideate

signed. We then use color dots to mark each solutio of this App:

Search /shop My supplier Message Favorites

Initial sketch abou


potential solutions or functions that can be de-

on, aiming to categorizing them into four features

ut information architecture.


Design

S

Sketches about search & shop food flow.

Prototype 1


Sketches about message to suppliers flow.


Evaluation

User Testing 1

We did team critique about the our first version of pr

randomly picked three restaurant owners who we in

Bowl, Himalaya and Sweet Greens. In sepcific, we d

through interfaces. In addition, we voice recorded th

actions when they performed while doing tasks. Bel


rototype. In order to have real users’ feedback, we

nterviewed in our research phase. They are Simply

designed multiple tasks for them when they swipe

heir answers and observe any physical or emotional

low are some insights we gathered.


Insigh

Having

User d Users

hambu

Insigh

Too mu

search Users

search

Insigh

Unclea

Add bu

shoppi


ht round 1:

g both hamburger and navigation bar is misleading.

don’t know which one to tap. tap search button a lot but they have to tap on the

urger bar first.

ht round 1:

uch information and decision users have to made on the

h filter page. tend to search for food and market information next. But the

h result shows only market without food information.

ht round 1:

ar food price /lb.

utton is confusing. Users need clear guide to add the food to

ing cart.


Design System

Iterations of food searching flow

Iteration

One click to switch between different features. Easier to compare food price.

Highlight food choice in “search� stage


Easier to compare food price and quality among markets

Guide users to follow new markets if they are interested the food.


User Testing 2 of food searching flow

Ins

-- U

abo

-- U

ma

ord

Ite A

cr

ca

th

An

us

or


sight round 2:

Users feel bored swiping up to read all information

out the market.

Users not only want to read reviews about the

arket, they care about how many restaurants have already

dered their food.

eration foldable hamburger bar is prototyped to

reate a list of different market sections. Users

an easily one tap to reach market information

hey need to know.

n interactive map is prototyped to help

sers tap on nearby restaurants who

rdered this market’s food.


User Testing 2 of food ordering flow

Insight round 2:

-- Users tried to tap on food photos to see detail in

-- Aftering swiping couple interfaces, users easily fo tapped “like” instead of “Add to cart” buttom.

It

A

d

In

to

c


nformation about the food.

orgot what they planned to add to the cart if they just

teration

A foldable information card is prototyped to provide

detailed information about every product.

n “Favorites” feature, users can easily add any food

o cart or add all list by tapping “Add to cart” button.

“Go to your cart” button also provides quick access to

check out flow.


Next Step

Since Pick Me is a platform that connect local m

me and my partner also sketched potential pro

“My market”

Chat with res

“Order


markets to independent restaurants (B to B),

ototypes for market side.

staurants

rs�

Events


Take Aways

Real users’ need can be found by paying attention

This product is inspired by an interesting scene i obs

market with my friend: Many restaurant owners broug with farmers.

It’s critical to use suitable research method in diff users’ real needs.

Several restaurant owners’ interviews help us unders us find specific pain points besides the big problem.

When doing usability tests, participants’ physical rea

times, physical reactions are more vauable users d

It’s challenge to design and make alignments amon

However, it’s critical to think this way as designers order to design the better product.


n to our daily life.

served while hanging out at berkeley fresh

ght their small carts to market’s table and bargain

fferent product design phase in order to filter out

stand the food supply system deeply and then help

actions are as vauable as verbal feedbacks. Some-

data.

ng platforms targeting on different types of users.

s should understand the whole business system in


Product Design Haptic memory-recall device

M S

A ta env men


Memory Sculpt

angible user interface for voking nostalgia and improving ntal health


Problem

Nowadays, loneliness has become an epidemic in s as damaging to health as smoking 15 cigarettes a d and the loneliness is particulary acuted to people w

Have you ever feel lonely and down mood with yourself recovered?

Plan to travel!

Karaoke

Yeah these activities will help people get excited or In the long term, however, depression is still not rele ing by designing this product is to test out another p ness or depression in the long run. After getting a h be healthier, happier and mentally stable.


society. Loneliness and social isolation can be day, researchers warned in a recent webcast, who live in the urban cities.

h not particular reason? How do you get

Party with firend?

Eat a lot..

Alcohol helps ?

escape from daily route temporarily. eased from people’s mind. What we are hoppotential solution to really eliminate lonelihabit using this product, we hope people can


Solution

Instead of ignoring all and keep moving forw recall our loneliness or lated to the sad feeling recover our mental hea

“The Fool” in Tarot

A study by Sedikides and colleagues focusing on me cess of nostalgia is triggered during periods of nega a past memory then generates positive affect, increa alleviates existential threat.

Thus, we designed Memory Sculpt “ A memo

A fun ta

A memo


l the bad feelings ward, slow down and r any experiences reg actually may help ath in the long term.

“Temperance” in Tarot

emory recall in undergraduates found that the proative affect, particularly loneliness and that recalling ases self-esteem, fosters social connectedness, and

ory saver

angible toy

ory recall tool ”


Logistics

Team

Duration

2 Designers

Aug-Oct. 2018

1 Psychological researcher

2 Months

1 Developer

Process

Research

Ideate

Design

Academic Paper

Mind Map

Interact met

Competitive Analysis

Physical app

Interview

Sensor emb

Research Academic Paper 3 Days Team Discussion

Competitive Ana


thod

My Role Concept design 3D Model design Model Construction User Testing

Evaluation

Presentation

Team Critique

Final exihibition

preance

Take aways

beding

alysis

Interview 10 Partcipants 10-20min / person


Another study by Tilburg et al. found that users perc

tions of pride and self-compassion.Our question the

“ Based on our research, haptic inp

significantly aid in memory recall. ”

study by the Max Planck Institute for Psycholinguisti

action and emotional memory – subjects who perfo

happier memories as opposed to subjects who perf recall sadder memories.

“ And activities which requires signi

tic input may help preserve memory

We then searched about other designs that may tr

experimental projects: In the project titled Nostalg

for listening to old news and music from the twentie

By touching a fabric runner laid across a table at diff

along its length, users could hear music from differe


ceived nostalgia to most closely resemble the emo-

en became: how can we better induce nostalgia?

put can

�

ics found positive correlations between motor

ormed an upward motion were more likely to recall

formed a downward motion who were more likely to

ificant hap-

y longer�

ry to solve the similar problem. There are two

gia, elderly users were presented with a prototype

eth century.

fferent points

ent eras.


Memodules Framework

This framework enabled the use of personal objects

itate memory recall by tagging personal souvenirs w

photograph on a screen or music on a radio player w

We found these two designs really set the foundat interacting with a personal object helps induce no

Lastly, we invited 10 participants including college

to do a quick interview about how often and in wh

their important memories. we use card sorting me

video

Pho

go to audio see similar story telling

read

listening to music

We found that a particular matter which comes fro event helps induce deeper and long lasting memo letters enable people to be imaginative recalling th thus help trigger stronger emotion.


s as tangible user interfaces that would facil-

with RFID chips and displaying an associated

when the object was interacted with.

tion of intensely ostalgia.

e students, middle ages and early 30’s employees

hat situation or with what objects help them recall

ethod to organize all the feedbacks.

otos

hold a souvenir

o the same place

use a pen which is giv-

a gift

en by a friend

d a postcard

om an important ories. Sounds and heir experiences,

play a puzzle eat a chololate pick up a round stone..


Summarizing all insights we gathered from researc

Ideate

sculpt can interact with user and what it might look

We

can

is p

can

can

Design

During our design development, we found out that

can do to the device. Then the haptic gesture will a

the device form from circle, linear to zig zag and w which can act on each form . Mean while, we also

Phy

Embeded sensor


ch process, we started to sketch out what memory

k like.

e want a device that :

n be shaped into different form

portable

n capture color and sound of views

n display color and sound by shaping it

t the physical form will affect the variation of haptic motion users

affect where and how to embed sensors. Therefore, we explored

we built quick physical portotypes to test potential motions tested how to embed sensors into each portotype .

ysical form

Haptic motion


Prototype

We tried the form of ring first . We think the circle

sor and potentially a speaker. In terms of material, w to provide flexibility of the device.


shape is easier to embed light sensor, force sen-

we used silicon to construct the prototype, aiming

User Feedback: The ring shape didn’t allow various haptic motions It’s hard to bend or squzee the device. Color sensor cannot recongnize different colors accurately.


Prototype

Knowing that ring shape is both physically and men

We found out that a linear object made of elastic m

User Feedback:

I unconsciously tend to bend t

The device cannot hold it’s sha

Color display is not really obvi

Hard to remember how i made


ntally stable and firm, we turned to explore linear form.

material has more potential to shape to various form.

the device up and down

ape as i want.

ious.

e this shape, thus hard to shape it back.


Since users are tend to bend the linear prototype u

Prototype

can guide users to create various forms by simply

the linear prototype then being designed and cons

Ideate

Concept Development

linear form

discrete a line to segm with joint connected


up and down, we are thinking how the prototype

y letting users bend up and down. A variation of

structed.

ments

elaboration of line segments

color guideness of bending direction


Iteraction Guide

Prototype

Blue color to bend downward. Pink color to bend upward.

Ben


nd to various shape

Click to record the sound

Waterfall Recording &Playback

Forg pond Recording &Playback


Construction

Prototype

Final Prototype



Finally , me and my group rebuilt our final prototype

Evaluation

holded by the School of Information at UC Berkeley

carry the device out. Instead, we showed participan

wall. We then guide users to look and feel the envir aways we got from participants.

-- Color do help with guiding user to sculpt. Howe

-- Users put lot of effort on sculpting the device,

-- When reshaping the device to play back sound

emotional connection between the device and


e and presented our design at final exhibition. The exhibition is

y. Due to the limitation of the prototype, we cannot let participants

nts potential scenes such as hiking in forest by projecting on the

roment they like and start to sculpt the device. Below are take

ever, users tend to more attracted to the color change it self.

, which sacrified perceiving the environment they like.

d once being captured, users do feel some

d the environment they just saw on the wall.


O W

L H 3


Other Works

Landscape Design / Hand Sketching / 3D Modeling /



I like outdoor spatial design !


I like infographic design !



I like to sketch!




I like to do outdoor furniture design !


GROUP PROJECT

Paramatric seat

First M


ting

Model


Thank you for yo

I have a new product design abou

So let’s keep in touch ! You can reach me @

sk

70

h


our time !

ut Flight voice assistant coming soon..

kellyyh@gmail.com

06-255-2141

https://www.linkedin.com/in/siyu-hou-51132b104/



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.