YU CHENG CHANG

DESIGN    X  

ENGINEERING  

YU  CHENG    CHANG    

Developer,  Designer  and  the  Strategist  

Featured  

Smart  Work  

Lifestyle   ID   Sketch  and  other  

P.5   P.8   P.11   P.15  P.13  

P.18   P.20   P.22   P.23   P.25   P.26  

TABLE  OF  CONTENTS  

Music  Wrap    Homecare  robot  

Featured  Projects  

MUSIC WRAP

Music  Wrap   stands   for   a   transformaTve   Bluetooth   speakers,   a   fashion   accessory,   as  well  as  a  brand-­‐new  lifestyle.  Music  Wrap  can  easily  pair  with  Bluetooth  enabled  smart  devices   through  NFC  with  a   light   touch.  With   its  unique  acousTc  design,  Music  Wrap  has   crystal   clear   and   excellent   stereo   audio   quality.   The   flexible   and   bendable   strap  allows  you  to  shape  it  for  various  uses,  such  as  wrapping  around  a  bicycle,  docking  for  a   smartphone   or   a   tablet,   or   even  wearing   on   your   neck.  Music  Wrap   is   perfect   for  outdoor  acTviTes  with  water,   dust   and   shock   resistance.  Music  Wrap  provides  more  than  good  sound  -­‐  It  makes  your  life  sounds  wonderful.  Refer  from    iF  DESIGN  AWARD  2015  .  

HOW  I  START    

As   the   UX   and   UI   designer   in   my   team   which   includes   markeTng   ,PM,   ID   and  engineers.   I  worked  on  exploring  user's  need  and  providing  design  guideline   for   ID  and  engineer  to  create  best  speaker.      The  process:  1.Image  &  target  definiTon  2.Human  factors  and  ergonomics  study  3.Usability  Research  4.UI  design  5.Prototype  and  experiment  6.Manufacturing  and  issue  review  

Image  &  Target  DefiniTon  

Usability  Research  

UI  Design   Prototype  Experiment  

Review  

In   the   preliminary   stage   of   developing  Music  Wrap,   we   analyzed   the   results   from  markeTng  research  that  indicated  which  types  of  portable  speakers  customers  would  like.  We  focused  on  the  scenarios  of  outdoor  acTviTes  and  gave  portable  speakers  a  new   ability,   which   is   accessory!   Designer   proposed   that   new   design,   music   wrap,  which  can  be  hanged  on  the  user's  neck,  used  as  a  stand  for  a  cell  phone  and  wound  in  any  shape  they  want.  The  most  novel  funcTon  is  hanging  on  the  neck.  In  order  to  solve   problems   under   this   scenario,   I   had   to   study   ergonomics   and   design   the  experiment  for  tesTng.  

IMAGE DEFINITION

My  role  :  UX  researcher,  UI  designer  Other  members  :  PM,  RD    

HUMAN FACTORS & ERGONOMICS STUDY

Because  of  Music  Wrap's  unique  feature  -­‐  wearing,  I’m  curious  about  how  people  wear  it,  how  users  feel  with  it  and  how  they  use  it.  Obviously,  I  have  to  firstly  consider  issues  related   to   human   factors,   such   as   weight,   length,   neck   circumference   and  biomechanics   of   grip.   To   explore   the   best   design   guidelines,   I   simulated   several  possible  scenarios  of  wearing  the  speakers  and  proposed  some  assumed   items  based  on   literature   review.   Those   assumed   items   would   be   proved   and   modified   with  experiment.  

First   of   all,   by   referring   to   the  data  of  sexual  anthropometrics  and   the   neck   circumferences  and   running   pre-­‐test   with   20  adults   for   collecTng   subjecTve  preferences  of  length,  I  defined  three  different  speaker  models  which  length  are  60  cm,  65  cm  and   70   cm   for   usabi l i ty  experiment.  

Secondly,   according   to   the  literature   of   grip   and   thumb  moTon   of   r ight   hand,   I  illustrated   the   different   zones  of   efficiency   on   the   speakers.  The   pink   area   means   high  efficiency,   the  yellow   is  middle  and   the   green   low.   The   layout  of   bugons  was   defined   by   the  zones  and  corresponded  to  the  frequency  of  usage.  

In  the  part  of  UI  design,  the  first  challenge  is  that  how  to  use  3+1  (three  control  bugons  and  one  power  bugon)  bugons   to  manipulate   sophisTcated   funcTons,   including  play  and   ,   pause,   bluetooth   pairing,   volume   control   and   answering   a   call.   Therefore,   I  classified  the  frequency  of  easy  operaTon,    the  funcTon's  usage  and  deliberated  flow  with   blind   operaTng   without   watching   devices.   To   increase   the   recogniTon   of   each  bugon,  I  suggest  that  three  bugons  should  be  designed  in  different  shapes  h  meet  the  user's   mindset   of   its   funcTons.   Therefore,   users   can   recognize   bugons   without  watching  in  a  smooth  and  intuiTve  operaTon  flow  for  the  speakers.  

The  principles:    1  The  funcTons  of  high  frequency  of  use  are  classified  as  the  first  priority.  The  

relevant  funcTons  are  group  together.    2  To  avoid   the  complex  manipulaTon,  each  physical  bugon  can  only  have   two  

statuses:  short  press  and  long  press.    3  Matching  the  most  intuiTve  way,  short  press,  to  the  first  priority  funcTons.    4  Illustrate  the  flow  and  evaluate  the  fluency.    5  R&D  development.  

SOFTWARE UI DESIGN

PROTOTYPE AND USABILITY TEST

In   the  experiment,   I   followed  previous   sekng  and  arrange   the  experiment   to   clarify  issues  related  to  human  factors.  In  the  experiment,  the  independent  variables  include  (1)  lengths  of  wearing  (2)  widths  of  tube  Considering   the   effect   of   blind   operaTon   on   bugons,   different   sekngs   of   below  variables  were  tested  by  performance  measures  (3)  size  of  bugons  (4)  distance  of  bugons  

According  to  the  results,  which  include  error  rate  of  manipulaTng  and  the  subjecTve  response,  the  parTcipants'  feedback.  I  concluded  the  best  wearing  speaker  design  should  be:  length:  60cm,  width:  >1.5  bugon  size:  >1cm,  distance  between  bugons:  >1.6cm  

There  are  some  discoveries  during  the  experiment.    1  Most  users  prefer  to  separate  lem  and  right  speakers  before  they  use  and  

they  adjust  the  right  speaker's  length  for  easer  right  hand  manipulaTon.    2  The  shape  of  area  that    touches  the  user's  neck  should  be  designed  as  flat  as  a  

pancake  to  reduce  the  pressure  from  weight.  

By  adopTng  the  human  factor  research  and  cooperaTng  between  ID  and  UI  designers,  the  discovered   issues  have  been  solved  to  proceed  to  manufacturing  stage.This  great  design  won  iF  internaTonal  award  and  fame  in  the  market.  -­‐  Below  pictures  are  from hgp://www.books.com.tw/products/N010701597?loc=P_004_001  

Homecare robot navigation system In  recent  years,   the  Aging  populaTon  problem  is  becoming  more  and  more  apparent.  Technical   aids   are   required   allowing   aging   people   to   live   independently   and   be  supported  in  their  private  homes  as  long  as  they  wish.  Many  researches  propose  that  using  the  mobile  robots  system  to  provide  daily  service  and  help  people  with  difficult  and  inconvenient  work  can  be  a  soluTon.      In  order  to  execute  the  assignments,  mobile  robots  are  asked  to  become  automaTc  and  intelligent.  The  basic  missions  of  the  home-­‐  care  system  are  like  delivering  the  medicine  and  moving  to  the  falling-­‐down  elderly.        For   the  mobile   robot   system,   the   visual   servo   is   like   the   eyes   of   the   robot.   There   is  much  more  informaTon  can  be  retrieved  or  analyzed  by  the  camera,  i.  e.,  not  only  color  image  the  data  but  also  the  depth  informaTon.    

This  thesis  aimed  to  apply  the  visual  servo  system  with  the  mobile  robot  for  the  home-­‐  care  system  to  help  everyday  life  of  the  elderly  and  disabled  people.  We  design  a  visual  servo   control   based  mobile   roboTc   control   system   (P3DX),   which   is   able   capable   to  traverse  through  arbitrary  obstacles  (Chair  etc.),  find  and  hit  all  unhidden  and  hidden  in  the   robot   tesTng   area,   and   finally   transmit   informaTon   to   a   PC   that   will   graphically  display   the   robot’s   telemetry   informaTon   and   ground   layout.   To   deal   with   all   these  problems,   this   study   has   to   accomplish   various   objecTves   such   as  map   building   and  obstacles   and   targets   idenTfying,   path   planning   and   moTon   control,   navigaTng/collecTng   informaTon   within   obstacle,   traversing   a   closed   path   within   obstacle,  transmikng   informaTon   using   transceivers,   processing   and   displaying   received   data,  and  finding  the  red  and  blue  balloon  and  bursTng  it…etc.  

This   project   propose   the  sensor   integraTon   in   visual  navigaTon   of   a   mobile  robot.    The   global   eye-­‐to-­‐hand  system   use   an   Wide-­‐Angle  camera   mounted   on   the  c e i l i n g   f o r   m a p p i n g ,  l o c a l i z aTon   and   pa th  planning.   The   local   eye-­‐in-­‐hand   system  use   the  RGB-­‐D  camera   mounted   on   the  mobile  robot  to  compensate  the   parTal   and   incomplete  informaTon   from   the   global  vision  system.  

My  role  :  Author  

The  significance  of  this  work  is  summarized  as    •  Sensor  integraTon  between  global  eye-­‐to-­‐hand  and  local  eye-­‐in-­‐hand  is  

developed,  the  efficiency  and  effecTveness  is  achieved.    •  RGB-­‐D  vision  system  is  developed  using  on-­‐shelf  Kinect  camera  on  the  mobile  

robot  to  provide  the  depth  data  for  environment  modeling  and  localizaTon.    •  Visual  odometry  is  proposed  to  esTmate  the  RGB-­‐D  camera  pose  and  

reconstruct  the  3D  environment.    •  Simplified  SLAM  operaTon.    •  Wireless  networked  and  hierarchical  distributed  control  system    

System overview

The   robot   follows   the  global  path  while   searching   for   the  hidden   target   locally.   If   the  target  exists,  robot  reroutes  the  path  to  arrive  at  the  hidden  target’s  posiTon  as  shown  in  figures  on  the  right.  The  robot  will  move  back  to  follow  the  global  path  amer  finishing  the  local  mission.      The  figure  below  shows  the  3D  view  of  the  robot  trajectory  of  the  whole  scenario.  

EXPERIMENT AND RESULTS

BYOD  -­‐  VoIP  APP  Business  trip  UX  

WiDesk  

Smart  Work  

BYOD  -­‐  VoIP  APP  The  smart  mobile  device   is  already  everywhere   in  our  lives.  We   use   them   to   call,   chat,   search   online,   check  emails   and   play…etc.   Those   smart  mobile   devices   are  mulT-­‐funcTonal   and   easy   to   bring   to   anywhere.  With  so  many  features  readily  available,  people  expect   that  they   can   use   their   own   mobile   device   to   work  effecTvely  in  the  office.  To  build  up  a  fluent  rhythm  of  work,   it   is   beger   to   connect   devices   with   each   other  and  exchange  the  informaTon  real  Tme.    

CommunicaTon  is  essenTal  and  necessary   in  the  office.  The  tradiTonal  communicaTon  between  employees   is   through  their   IPphone  on  their  desk.  Therefore,  a  call  might  be  missed   if   the  receiver   is  not  on  his  seat.  Nowadays,  smart  phone   is   the  most  common  mobile   device   among   employees.   Because   of   the   fact   that   people   carry   it   around  everywhere  at  all  Tmes,  it  is  the  best  device  to  be  integrated  with  the  IP  phone  system.    

To  integrate  mobile  phone  and  IP  phone  docking,  we  focus  on  four  topics   in  office’s  call  with  this  two  devices.  

Transferring  call  between  devices  User   can   quickly   match   the   smart   phone   with   the   docking   and   IP  phone   via   bluetooth   and   transfer   all   calls   between   two   devices  smoothly.  This  enables  the  smart  phone  to  complement  the  IP  phone.    

Space  conversion  in  the  call  Let’s  carry  the  call  to  anywhere,  not  constrained  by  the  desk.  The  call  can   be   converted   to   smart   phone   even  when   people   are   answering.  Just  one  press,  the  call  will  follow  you.  

The  caller  informaTon  Let  the  smart  phone  become  the  display  of  IP  phone.  APP  can  deliver  detail   caller   informaTon   to   user.   Users   know   immediately   who   is  calling  and  why.  Furthermore,  the  history  of  communicaTon  can  evoke  the   old  memories   of   collaboraTon.   Important   calls  will   be   tagged   to  remind  user  to  callback.  

ConnecTng  with  the  right  person  Smart  contact   system  can  sync  with  personal  projects   through  which  be   connected   to   others   relevant   parTes   by   projects,   funcTons   or  department.  Let  user  easily  find  the  right  person.    

My  role  :  UI,  GUI  designer  Other  members  :  PM,  RD    

To  integrate  with  the  OA  IP  phone  system,  we  designed  an  android  APP  for  employees  to   install   on   their   own   mobile   phone   and   to   connect   it   with   the   network   of   the  company.   This   APP   is   capable   to   not   only   call   the   extension   number   in   company  through  internet  but  also  call  phone  through  GSM  signal.  The  most  unique  feature  is,  this  APP  can  pair  with  the   IP  phone  docking  and  transfer   the  call   through  bluetooth.  Users  only  need  to  press  one  bugon  on  the  docking  or  in  the  APP  then  his  the  call  will  be  transferred.      FuncTons        •  GSM  and  VoIP  signal  integraTon.    •  Transfer  a  voice  call  to  IP  phone  docking  through  bluetooth    •  Tag  of  important  call    •  Con-­‐Call    •  Contacts  management    •  History  view    •  Text  and  voice  message  

I  have  arranged  all  funcTons  into  5  categories  and  integrated  them  in  the  permanent  tab  on  the  top.  The  tabs  include  history,  contacts,  dial,  message  and  sekng.  User  can  switch  between  all  funcTons  easily.  The  page  of  answering  includes  several  advanced  funcTons  ,for  instance,  the  docking  transferring,  con-­‐call  and  merge  calls.  Based  on  the  intuiTve  UI  design,  user  can  communicate  with  the  right  person  or  members  smoothly.  

tagged  important  call   Con-­‐call  interface  

Transferring  call  between  IP  phone  docking  and  mobile  phone  

Chakng  

Business Trip UX

A  business  trip   is  a   type  of   travel   that  can  be  undertaken  for  a  variety  of   job-­‐related  reasons:  to  meet  or  entertain  clients;  to  visit  other  faciliTes  within  the  same  company,  or   to   agend   trade   shows   and   seminars.   Although   the   existence   of   teleconferencing  and  telepresence  technologies  has  reduced  the  demand  of  sending  an  employee  on  a  business  trip,  some  businesses  sTll  see  advantages  in  face-­‐to-­‐face  contact  for  tasks  like  solving  a  manufacturing  problem  or  signing  a  contract.  

Image  source  :  hgp://www.a-­‐counTngbiz.com/wp-­‐content/uploads/2013/08/businesstrip2.png  RESEARCH The   Research   phase   is   key   to   creaTng   an   informed   user   experience.   In   order   to  explore  the  traveller  demands     in  a  business  trip,  firstly,   I   interviewed  8  employees  and   employers.   I   asked   several   quesTons   which   instruct   them   to   present   their  experiences  and  their  special  memories  in  their  trips.  The  transcripts  were  printed  for  the  further  analysis.  

In   a   typical   business   trip,   the   traveller   is  required   to   finish   all   tasks   and   achieve  related   business   goals   against   a   Tght  schedule.   Consequently,   the   project   aims  to   improve   efficiency   and   effecTveness   of  business   trips   by   reducing   the   efforts   on  trifles   in   travel   and   helping   workers  concentrate  on  the  more  important  tasks.  

My  role  :  UX  researcher  

PERSONA To  draw  insights  from  data  collected  during  the  research  phase,  capturing,  organizing  and  making  inferences  from  the  records  can  help  UX  designers  begin  to  understand  what  travelers  want  and  why.  To  help  parTcipaTng  designers  and  product  managers  understand  the  end  users  and  to  build  up  communicaTons  between  team  members,  Persona   was   created   to   outline   the   comprehension   of   target   users.   In   Persona,   I  sketched   the   image   of   two   target   users,   the   business   creator   and   manufacturing  assistant,  and  described  their  acTons,  goal  of  the  trip,  devices  they  brought  and  the  schedule.  Details  of  the  process  are  shown  in  the  figures  below.  

By  making   inferences   from   the  Analysis   phase,   I   organized   the  whole   business   trip  into  three  phases,  the  Plan  phase,  the  Work  phase  and  the  Finalize  phase.  The  Plan  phase   includes   the   period   of   scheduling   and   making   arrangements   before   the  traveller   arrives   at   the   desTnaTon.   The  Work   phase   starts   when   the   traveller   has  arrived  the  desTnaTon  and  proceeds  with  his  tasks.  Lastly,   the  Finalize  phase   is   the  period  that  the  traveller  finishes  his  tasks  and  reports  to  his  employer.    

THREE PHASES OF A BUSINESS TRIP

The   user   journey   illustrates   how   travelers   interact  with   their   technical   devices.  User  Journey  describes  at  a  high  level  of  detail  specific  steps  that  different  travelers  take  to  complete  a  specific  task  during  a  business  trip.  The  opinions  of  travelers  at  each  step  are   also   listed.   Furthermore,   I   adjusted   the   regular  user   journey  with   the   insights  of  opportuniTes,  so  that  designers  and  product  managers  could  more  easily  idenTfy  the  potenTal  services  and  build  up  the  strategy.  

USER JOURNEY

WiDesk - smart desktop Modern  desktop  devices  help  us  work  more  efficiently,  but  there  is  plenty  of  room  for  improvement  based  on  user  experience.  This   project   was   inspired   by   the   research   of   duo-­‐screen   interacTon   on   a   personal  workstaTon.  From  the  research,  we  learned  about  significant  painful  experiences  of  the  current   Desktop/AIO   PC   users.  We   then   translated   our   findings   into   the   user   needs.  Finally,   we   designed   a   new   product,   WiDesk,   to   bring   a   more   secure   and   efficient  working  style  to  Desktop/AIO  PC  users.  

OBSERVATION AND INTERVIEW

According  to  observaTons  in  office  life  and  interviews  with  several  employees,  I  have  idenTfied  the  following  significant  painful  experiences:  

It's  hard  to  add  my  opinions,   ideas  and  remarks   in   the   file   shown   on   the  screen.  

I   want   to   find   files   quickly   but   I   sTll  need   to  wait   for   the   computer   to   turn  on.  

How  can  I  quickly  save  the  handwrigen  notes,  calendar  events  and  post-­‐it  ?  

There  are  just  too  many  reference  windows   and   documents,   how   can   I  work  more  efficiently  

Personal   account,   password   and   credit  card   informaTon   always   show   on   the  screen  nakedly.  

Several   typos   are   discovered   when   I  look  up  to  the  screen.  

Consequently,  we  have  derived    the  five  main  user  demands  :        •  HandwriTng  is  the  most  efficient  way  on  the  desk.    •  All  tools  are  readily  reachable  whenever  needed.    •  Focusing  on  single  window  when  you  are  working.      •  Absorbing  the  latest  news    •  Privacy  protecTon  

My  role  :  designer  

PROPOSED CONCEPTS

HandwriTng  is  the  easiest  and  most  creaTve  tools  

The  window  can  be  easily  dragged    down  to   your   horizontal   screen   for   beger  handwriTng  experience  

You   can   write   any   notes   or   draw   your  ideas.   It's   convenient   for   you   to   drag  materials  to  edit  your  file.  

Minimize  the  loading  of  acTviTes  

Easy   to   compare   or   refer   to   any  documents.   Users   don’t   need   to   hold  them  beside  the  verTcal  screen.    

Check  what  you  type  on  the  horizontal  screen,  No  need  to  look  up.    

Privacy  

Privacy  informaTon,  including  account,  password  and  chat  contents,  is  shown  only    in  a  privacy  area  defined  by  you  

Always  know  what  you  want  

Several  widgets  help  you  to  handle  trivia,  you   can   just   focus   on   the   main   verTcal  screen.    

Auto-­‐sync  with  all  your  devices  and    integrate  all  data.  

Home  security  Media  life  UX    E-­‐Community  

Sweet  moment  

Lifestyle  

Home Security System The     home   security   system   can   be   distributed   into   four   scenarios,   e.   g.,   end   user,  customer   service,   dispatch   and   system   administraTon.   In   this   project,   I   focused   on  the   interacTon   of   end-­‐user   firstly,   and   built   up   this   security   system   for   user   to  monitor  their  home.      This   system   provide   end-­‐users   to   control,   check   and   reset   all   security   sensors   in  house,   no   mager   where   they   are.   Through   the   internet,   users   can   be   noted   and  altered   by  Web   and   APP   early   and   the   system   will   connect   it   to   relevant   security  center  for  protecTon.  

CLARIFY USER NEED AND CONSTRUCT THE FEATURES According   to   field   studies   and   interviews  which  were   arranged   to   explore   demands  and  behaviors  of  home  security  system  users,  we  noTced  that  users  pursue  a  real  Tme  and  intelligent  system  to  protect  their  house.      What  user  said:    •  I  want  to  track  my  house  situaTon  at  anyTme  from  anywhere.     •   Aids   from   neighbors   are  more   effecTve   than   someone  who   lives   far   away.  

Therefore,  one  of  co-­‐contacts  could  be  my  neighbor.     •   I   want   to   customize   the   security   mode   when   I'm   doing   something,   like  

smoking,  that  may  trigger  the  alarm.  

Amer   integraTng   the   above   needs   and   the   feedbacks   of   execuTon   in   security  company,  we  proposed  the  key features  of  this  project  and  constructed  the  system  accordingly.  

FEATURES

Show  status  of  each  device  The  real  Tme  status  of  all  sensors  and  IP-­‐cam’s  view  are  delivered  to  end-­‐user  for  condiTon  comprehension.    

Modes  of  different  scenarios  For   both   safety   and   comfort   reasons,   system   can   be   switched   to different  mode  of  security  that  accommodates  to  the  end-­‐user’s  pace  of  life  and  habits    

Real  Tme  alert  pushing  Each   event   and   alert   will   be   delivered   to   user’s   mobile   phone   and  email  immediately.  For   preparaTon,   the   co-­‐contacts   will   also   get   the   informaTon  simultaneously.    

Mastery  of  informaTon  anyTme,  anywhere  End-­‐users  would  like  to  know  what  is  happening  when  they  are  away  from   home.   To   deliver   the   informaTon,   we   designed   an   APP   which  can  sync  with  the  system  and  show  the  sensor’s  status  and  camera’s  view  to  user.  User  will  not  loss  any  informaTon  anyTme,anywhere.    

FUNCTIONS AND UI DESIGN

The  funcTons  extended  from  features  were  illustrated  below:  -­‐  Dashboard  :  directly  provide  the  most  important  informaTon  to  user    -­‐  Status  of  Sensor  :  track  the  sensors  -­‐  IP-­‐cam  live  view  :  monitor  and  check  the  condiTon  of  house  by  live  view  -­‐  History  list  :  deliver  and  review  the  alerts  and  noTficaTons.  -­‐  Account  management  :  administer  the  contact  person.  -­‐  Mode  sekng  and  switching  :  customize  the  security  mode  and  the  securing  sensors.  -­‐  News  and  Q&A    

My  role  :  UI,  GUI  designer  Other  members  :  PM,  RD    

WIREFRAME AND UI

We  believe  that  a  security  system  should  deliver  the  most  important    informaTon  to  user  fast,  accurate  and  clearly.  For  this  purpose,  the  designed  dashboard  of  Web  is  distributed   to   four   areas   which   display   live   view   of   IPcam,   real   Tme   status   of  selected  sensor,  brief  of  alerts  and  noTficaTons  and  the  news  of  service  provider.      The  main  funcTons  were  designed  on  the  tab,  user  can  switch  to  each  one  for  detail  informaTon.   The   pull-­‐down  menus   of  mode   located   in   the   lem   top   of   dashboard  allows   users   to   switch   quickly.   Furthermore,   considering   different   behaviors,   user  also  can  create  their  preferred  sekng  in  security  mode  on  the  menu.  For  example,  smokers  can  switch  to  the  smoking  mode  to  turn  off  the  smoking  sensor.  Or,  users  can  also  select  the  away  mode  that  provides  a  complete  protecTon  when  nobody  is  at  home.      The  APP   is   designed  as   assistant  of  Web  plazorm  and  provides   service   anywhere  with   internet  accessibility.  As  an  assistant,  mobile  APP   is   the  extended  display   for  user   to   catch   informaTon.   Therefore,  mobile   APP   shows   similar   contents   as   does  the  web.  However,  considering  the  usability  and  manipulaTon  on  mobile  phone,  we  keep  some  detail  sekng  in  web  version  only  and  reduced  the  effort  of  manipulaTon  in  APP.    

GUI DESIGN

Nowadays,  imporTng  user’s  experience  in  the  product  design  is  a  significant  tendency.  All  product  design  efforts  should  consider  feeling  of  users  in  the  early  planning  stage  and  integrate  the  insights  from  UX  research  to  improve  the  design.      In  this  project,  I  focused  on  the  media  which  we  interact  with  on  daily  basis.  What  are  other   services   available   from   the   media   to   make   people’s   day   to   day   life   more  comfortable  and  saTsfied?  To  answer  this  quesTon  and  teach  all  members  in  product  design  team,  I  was  assigned  to  plan  and  host  a  workshop  and  facilitate  all  colleagues  to   develop   the   opportunity   in   this   scenario   and   propose   the   innovaTve   concepts  together.  

Media life UX

HOW WE STARTED The  progress  of  UX  research:  

1.Diary  The  designed  diary  is  used  to  record  the  event  which  related   to   medias(video,  photo,  music,   call...etc)   in  two  days.  Interviewees   wrote   and  drawn   the   events   and  highlighted   their   opinions  at  that  moment.  

2.Interview  Interviewees   presented  their  diary  and  shared  the  experience.   Researchers  asked  the  quesTons  of  the  records   and   explored   the  potenTals  of  user  need.        

3.ClassificaTon  Researchers   classified  needs   and   painful   points  f r o m   r e c o r d s   a n d  translated   them   into  insights.    

4.Brainstorming  According  to  the  classified  needs   and   illuminaTng  insights,   members   joined  the   brainstorming   and  proposed   the   new   ideas  for  solving  the  lacks.  

5.Idea   evaluaTon   and  sketch  Ideas   were   evaluated   by  different   funcTon   units   in  the   organizaTon.   All   ideas  were   reviewed   item   by  item  categorized  by  needs  f o r   s aT s f a cTon   and  pracTcability.  

6.InterpretaTon  I n t e r p r e t e d   t h o s e  evaluated   ideas   on   story  boards   and   presented   the  concepts   behind   them  accordingly.  

PROPOSED CONCEPT User's  need  I  want  to  obtain  the  informaTons  easily  and  synchronize  data  automaTcally.  

Type  of  users    •  Study  new  technology  regularly    •  Have  a  large  amount  of  data    •  Have  a  lot  of  storage  devices  and  producTvity  tools    •  Record  and  backed  up  device  content  frequently    •  Afraid  to  miss  stored  informaTon    

My  role  :  UX  researcher  Other  members  :  PM,  RD,  GUI  

SOLUTION

Because  of  the  memory  issue,  people  always  save  and  store  the  same  files  in  their  device  at  different  Tmes.  They  are  not  sure  that  they  have  saved  the  informaTon  already.   Therefore,   the   problem  of   storage   and   the   confusion   of   file   version  will  occur.      Benefits:  When   users   find   an   interesTng   file   and   want   to   save   it,   the   system   will  automaTcally  compare  the  new  file  with  exisTng  contents  and  noTfy  users  that   if  there  is  any  similarity  in  their  name,  size,  or  contents…etc.    

I  would   like  to  tag  my  file  by  my  personal  tags   in  my  personal  way.   I  can  arrange  the  files  according  to  my  preferences.        Benefits:  The  system  allows  users  to  customize  the  style  of  tags,  including  text,  GPS  locaTon,  figures  and  keywords.  Users  can  manage  their  files  in  their  ways  without  missing.  

Amer   the   long-­‐term   cumulaTve,   people   have   difficult   to   clarify   the   files   in   vast   archive.  Help  to  evoke  users’  memory  and  build  up  the  connecTon  for  each  files  is  essenTal.      Benefits:  The  system  provides  a  file  network  that  shows  the  relaTonship  between  all  files.  User  can  retrieve  specific  files  by  the  connecTon  and  easy  to  manage  it.  To  recall  the  content  of  a  file,   user   can   use   the   recorded   voice   tag   of   the   file   to   understand   the   content  without  opening  it.  Just  a  mouse  hover,  the  system  will  play  the  record  to  user.  

How  to  administrate  the  different  versions  of  files  ?        Benefits:  File's   Tme  machine   provides   the   Tmeline   for   user   to   retrospect   the   old   version   of   file.  Furthermore,   through   the   wireless   network,   All   devices   will   synchronize   files  automaTcally.    

E-Community Entertainment  services  for  smart  homes  have  become  abundant,  thanks  to  the  ubiquitous  Internet   connecTvity,   and   the   E-­‐community   is   the   way   to   enjoy   all   of   them   in   an  integrated,   user-­‐friendly   system.   E-­‐community   system   is   a   smart   community  entertainment  system  that  offers  access  to  TV  programs,  streaming  contents,    t  and  online  applicaTons,  and  it  is  synchronized  with  the  security  system  via  the  TV  box.  E-­‐community  offers   users   a   proprietary   entertainment   plazorm   for   watching   the   latest   movies   and  videos.  Moreover,  the  built-­‐in  security  system  is  connected  to  the  IP  cameras  in  house  and  within   the   community   to   transmit   live   images   for   security   surveillance.   This   communal  entertainment  system  provides  not  only  a  convenient  entertainment  plazorm  but  also  an  effecTve  community  service  network.  The   core   of   a   complete   E-­‐community   system   is     its   administraTon   system.   To   offer  opTmized  customer  services,   the  administraTve  plazorm   is  configured  at   the  same  Tme  when  the  system  is  being  constructed.  The  administraTve  plazorm  allows  users  to  manage    account  informaTon,  push  the  news  and  update  the  APP  and  AD  without  interrupTng  the  on-­‐going  services.  

What  we  provide  to  users:  ●  MOD  (Media  On  Demand)  system  ●  Security  system  ●  APP  store  :  Purchase  and  management  of  APPs  ●  Community  board  ●  Account  infomaTon  

What  design  for  administraTon  system  ●  AdverTsement  publishing  and  ediTng  ●  Account's  management  ●  APP  store  management  

INTERFACE OF TV The  interface  of  this  system  comprises  four  parts:  the  main  menu,  the  preview  and  select   window,   weather,   and   adverTsement.   The   main   menu,   which   lists   all  funcTons,   is   controlled   by   the   remote   controller.   The   preview   window   shows  relevant   contents   as   selected   from   the  menu,   and   some   content   items   also   have  further  informaTon  upon  selecTon.  Moreover,  the  weather  widget  provides  Tmely  updates  of  weather  informaTon  from  the  local  meteorological  office.  

INTERFACE OF THE ADMINISTRATION SYSTEM The  administraTon  system  has  four  main  funcTons,  which  are  listed  on  the  top  tab  of   the   main   admin   screen,   with   the   sub-­‐catalog   on   the   lem   column   showing   the  relevant  contents.  The  administrator  can  change    sekngs  of  this  system,  push  the  AD,  and  manage  the  accounts.  

My  role  :  UI,  GUI  designer  Other  members  :  PM,  RD    

SWEET  MOMENT  When  a  delicious  meal   serving,  admiraTon   is  endless.  You  definitely  have  the  experience  by  taking  a  photo  to  record  moment   for  memory.   Sweet  Moment,   the   app   help   us   to  record  those  Tme  and  use  the  cute  emoTcons  to  show  the  sensaTon.  A  short  comment  can  deliver  your  feel  to  friends  through  the  facebook,  let  them  have  immersive  experience  together.    

The  comment  can  deliver  

your  sensaTon  and  can  share  to  your  friends  

The  comment  can  deliver  your  sensaTon  and  can  share  to  your  friends  

Cute  emoTcons  represents  the  score.  

My  role  :  UI,  GUI  designer  Other  members  :  PM,  RD    

iHair  

ID  Sketch  &  Other  

iHair The fan-less hair dryer

Have  you  ever  had  problems  with  your  dryer  ?  iHAIR   let   you   dry   your   hair   at   ease   and   with  comfort,   and   never   have   to  worry   about   your  hair  gekng  stuck  inside  the  fan  again.  

iHAIR   uses   central   circular   design   that  compounds   with   the   Dyson   fan   -­‐   less  technology,   which   shims   the   old   fashioned  mechanical   parts   from   fan   to  handle,   in   order  to   prevent   from   hair   being   swirled   inside   and  causing  immediate  danger.  On  the  other  hand,  it  inserted  the  shape  memory  alloys  to  changes  its   shape   based   on   the   exterior   temperature  and  may  concentrate  the  strength.    

Outer  ring  LED  light  signifies  the  degree  of  temperature    

Cold   Hot  

S h a p e   M e m o r y  Alloys    Shape   memory   alloy  will   change   or   bend  its   shape   based   on  the  temperature,  and  will   bend   back   to   its  original   shape   amer  usage.  

Three   stages   of   temperature  control   and   dual   (hot   /   cold)  for  personal  preference.  

Package design

Magazine design