PORTFOLIO TIANJING WU Interaction Design& Interaction Design
ABOUT ME TIANJING WU Mobile: (+86)15653782193 Email: 454711422@qq.com Date of Birth: August 30,1993 Nationality: Chinese Education: Central Academy of Fine Arts MajorďźšInformation Design
CONTENTS 01
03
One Computing
The immersive tour guide system of Gubei Town
02
04
CAFA TAGS App
Experimental Media Studio Website
Other Works Architectural media design of ICC Tower User Interface Design of DoD App
One Computing Type
Interaction design
Brief
One computing is a tool that allow the functions of mobile phones join up and use on computer. Maximize advantage of large screen, make mobile function get better play on the computer screen
Date Roles
Arp.2016– Jul.2016
Skill
Interviews, Observation, Storyboarding, Model Consolidation,
Researcher, Designer
Wire framing
Method
User-Centered Design, Activity-Centered Design
Background
Statment
User Research
Model Consolidation
Background One Compute prototype is a continuous performance Program of Windows 10 systemďźŒblurring the bound of Windows phone to PC software as the conception. It is a part of plug-in development kit which make sure the Android System of Motorola works well in wide screen display window as it works in Windows 10, the program effectively take the place of Windows Mobile platform which known for its high production rate
Ideation
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Elevator Pitch
Ideation
Guideline
Principle
Wireframe
Research Purpose 1
To understand the scenario, environment, and media for the target user to use the product
For 【 Users who use Windows systems and MOTOROLA's Android system】 Their 【High demand for users to connect Mobile phone and computer in office word, entertainment 】
2
To understand target user’s behavior characteristics, habit preference and product use characteristics
3
To analyze users' demands and pain points in the product
4
According to the analysis of user research results，develop product opportunity point for user pain point
Our 【 One Computing 】
Hunt Statment
Is a 【 Windows10 system continuous performance project 】
1
It is enable the
the demo - so that they can design a feature that facilitates mobile
【MOTOROLA's Android system to run smoothly on the PC's large-screen display window】
operation and presentation 2
Instead of
To study how the demo person will present PowerPoint on a laptop during
To study how people use mobile Apps on their computers -- in order to design a mobile phone that can connect with a computer and use the App
【 Dual display 】
3
Our product 【 Connect the MOTOROLA phone Android system to the PC large-screen display to maintain consistent and consistent interaction 】
To study how people use their phones and computers to switch quickly -to design a phone and a computer that works better with the office
4
To study people watching video, playing video games and using small screens and computer screens -- to design one for them
Methods
Information Research
Orientation
Structured brainstorming
Persona
Model Consolidation
User Observation
User Interview
Usability testing
Function
Background
Statment
User Research
Model Consolidation
User Interview Script 1
Introduction:
Ideation
Guideline
Principle
Wireframe
Observation
self-introduction Project introduction Interview objective introduction
2
Basic information: Name, age, etc. Occupation, position Work place, and use tools Daily leisure and recreational activities place and use tools
3
4
Key information:
The end:
Name of Interviewee: Leif Luo Time: 25 min Site: Meeting room Activity: Make a presentation on the meeting
Name of Interviewee: Lizzie Lei Time: 25 min Site : Institute office Activity: Organizing and sharing travel journal
Mobile phone and computer collaboration motivation expression Mobile phone and computer collaboration scenario description Mobile phone and computer collaboration experience description Pain point demand feedback Try out solutions and tools Success criteria and vision
Ask the interviewee if they have any question Answer interviewees’ question Thanks for interviewees
Name of Interviewee: Peter Liu Time: 25 min Site: Institute office Activity: Using phone and computer to work together
Name of Interviewee: Iristong Wu Time: 25 min Site: Home Activity: Doing recreational activities
Background
Statment
User Research
Model Consolidation
Affinity Diagram & Model Consolidation After conducting interviews and field observation research on the target user who using mobile phones and computer doing collaborative activities, we made a series of records of the process, in order to gain a better understanding of potential issues and opportunities for One Computing. Then we conducted interpretation sessions based on interview notes and observation records and created a flow model and behavioral model for each interviewee
Behavioral Model
Behavior Tool
Ideation
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Flow Model Writing blog Circumstance
Actions
Cafe
save photos from mobile applications to album
Copy a excerpts of journal log Upload photos to the computer
Edit journal on computer by Word
Open the web version WeChat Sticky and upload the content to WeChat File Transfer
Copy the content of the log on the WeChat File Transfer Open the WeChat Moments and paste the content
Send Moments
Refer to friends’ feedback
Edit and upload blog on computer
Add photos to WeChat Moments
frequent round-trip operation between mobile phone and computer Problem
functional limitations of software and application between the mobile version and the computer version the operation efficiency is low, the user experience is incoherent and not fluent among the process of mobile phone and computer collaboration
Entertainment Circumstance
metro
metro station
bed room
Actions
Playing mobile game
pause the mobile game
open the computer and log on to the game
Problem
The use of mobile phone devices is not continuous due to usage scenarios
living room
playing games on the computer screen game
open a video website and watch video
pause the video
during entertainment actives, the small screen of mobile phone can not satisfy the immersive experience for user like computer screen Based on the characteristics of mobile small screen and computer screen, the switching process of mobile phone and computer equipment requires certain continuity
chat with family
turn on the phone and play mobile phone games
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Flow Model Task analysis
Presentation Making Circumstance
workbench
conference room
Insert the U disk to public computer
save file Actions
Connecting the computer to projection equipment
carry U disk transmit file to U disk
Play the presentation file
transfer and copy the file
auxiliary tool for external connection and operation Problem
the step of transmitting files are complex
the process of presentation is inefficient and inconvenient the user experience of operation lack of continuity
Brainstorming
Doing office work Circumstance
workbench
download file Actions
compare with the image on the mobile phone uploaded images to the Computer
open the image file open the Excel on computer
enter data into the the Excel spreadsheet
the efficiency of collaboration of mobile phone and computer is low Problem
the operation across computer and mobile phone is complicated and repetitive multi-software collaboration is inconvenienced, lack of functions to support the acceleration the speed of multi-software
insert images into Excel spreadsheet
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Ideation Diverging
Storyboarding Downloading image file from the web version WeChat
Editing the Power point
Downloading travel photos shared by friends from mobile phone web version social app
Dragging and Dropping the PPT file to the mobile phone
Playing mobile games on the metro Check all the content of the journal and drag it to the icon of WeChat, then edit and send a WeChat moment
Doing presentation by using mobile phone to operate Inserting photos and editing travel journal Connecting the mobile phone to the public computer
Comparing the image with the mobile phone while inputting data into the Excel spreadsheet
Referring to friends‘ feedback from the version WeChat moments, then revise the content of the journal
Continuing to the recreational activities on the computing at home
Background
Statment
User Research
Maintain the continuity of user experience When access and disconnected the mobile phones, the state of video, voice and application remains unchanged The notice of the information remain uncharged The the currently running task remain unchanged
Model Consolidation
Ideation
Guideline
Principle
Pay attention to the consistency of UI interactions The design of notification bar remain consistent with the design of mobile phone The bar of system notification reserves system function keys, favorite applications and the layout remain consistently keep in line with the mobile phone
The task list running behind the background remain unchanged
Three screens merged into one, the location of applications and the form of layout remain consistent with the mobile phone
Meet the requirements of the light office of users
Make full use of the advantage of large screen display
Multi-windows
Three screens merged into one
FreeForm
Muti-windows design
Shortcut windows
Basic on the DIP, present more information in applications
Drag and drop to share
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Principle of connection and disconnection
Application
Video
Office work
Game
Communication
Video calling
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Connection Flow Connection can access to the desktop
No password The App opens directly to the desktop if it has opening before the lock screen
Black screen
Accessing to the large screen desktop (large screen main screen) (the background application, status bar and the notification content of all mobile phone remain the same) Common application
Display horizontal or vertical screen
Typical application
Full screen display (game or video, including video call)
Lock screen
Password Bright screen
Digital unlock
Keyboard input password
Clicking the left mouse button or pressing the space key of the keyboard to confirm and enter
Return to lock screen (save the content displayed before the phone connected into the computer)
Mobile phone connect to Dock
The desktop
Lock screen and have a call
Large screen remain locking calling
Lock screen and in a call
Large screen remain locking in a call
Large screen desktop (big screen, main screen) (keep all phone's background application, status bar and information running)
ALL APPS
Unlocked screen
The state of unlocked screen connecting the computer are
Unlock and enter
Common application
Display portrait or landscape
Typical application
Full screen display (game or video, including video call)
Missed call Call In a call (vertical screen, bluetooth access to audio)
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
The process of the phone connecting to Dock Large lock screen After accessing to mobile phone, the contents of the lock screen keep consistent with the contents on the phone, function keys keep consistent with the mobile phone, Unlocking: long press the left button of the mouse to pull up, the space key or Enter of the keyboard The mouse can pull out the shortcut control window from the top (keeping consistent with the original)
Lock screen interface, there is a call coming in The operation mode keeps the same with the phone have a call coming in during lock state Long pressing the phone button in the middle will present a hang up, a connection and a text message function , drag the function to appropriate location to obtain the operation
Lock screen - black screen (bright screen) - no password - there is desktop before the lock screen
Lock screen interface, there is a call coming in
Lock screen interface, having password (including black screen)
Lock screen interface, there is a call coming in
Entering to unlock the password page directly, using the mouse or keyboard to input the password, clicking on the confirmation or the space key to unlock or clicking back to the return to the large lock screen page
Entering the large screen and keep the calling state with the bluetooth access to the stereo
Background
Statment
User Research
Model Consolidation
lock screen, no password， there is the desktop before locking the screen (including black screen)
Directly entering the initial large screen desktop, initial display the main screen, do not consider whether the desktop is main screen before the locking keeping all background applications, the status bar and the content of notification running
lock screen, no password， There are application open before lock screen (including black screen)
lock screen, no password， There are application open before lock screen (including black screen)
Ideation
Guideline
Principle
Wireframe
Unlocked screen - typical application - full screen, (including full screen video, games, video call)
The application is in the full screen mode, Presenting the application operating in the phone after connect to the large screen
The application is in the portrait mode, Entering the large screen directly to open the application operating before the lock screen of the phone
Unlocked screen - ALL APPS page
Presenting ALL APPS page after accessing to the large screen
The application is in the landscape mode, Entering the large screen directly to open the application operating before the lock screen of the phone
Unlocked screen -Caller Identification
Accessing to the desktop homepage of the large screen, synchronous display of incoming calls (the bluetooth access to peripheral speakers at the same time)
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Pulling out Flow
There is the desktop before locking the screen
Black screen
Lock screen (Light up) (Maintain the status of all notifications
After the phone has been unlocked
There are applications opening before locking the screen
Lock screen
Bright screen Remove phone from the Dock
Lock screen and have a call
Remain locking calling
Lock screen and in a call
Remain locking calling
The desktop
Unlocked screen
The state of unlocked screen pulling out the computer are
Mobile desktop (mobile home screen) (remain the status of notification content for all screen desktops)
The mobile desktop (Mobile home screen)(Maintains all the status and notification content of large screen desktops)
ALL APPS
ALL APPS
Opening the application
The currently application of mobile phone is the application of focus window in the large screen (the full-screen display is the focus window) Missed call
Call In a call (vertical screen, bluetooth access to audio)
The mobile phone current application is the focused window application in the large screen (application display to the full-screen is the focused window)
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
The process of the phone pulling out the from the Dock Lock screen interface, lights up according to the different status before the locked screen at this time, there are different result for unlocking the phone: 1. There is the desktop before locking screen 2. There is common application before locking screen 3. There is typical application before locking screen
1. There is the home screen of the desktop before unlocking
Lock screen - there are application opening before the phone pulling out The screen displaying after pulling out the phone (the current application of mobile phone is the focus application displaying on the large screen before pulling out from the computer)
2. There is common application operating before unlocking
3. There is typical application operating by full screen before unlocking
Unlocked screen, large screen in the call or dialing out The phone synchronously keeps in call (disconnect the bluetooth link of speakers)
Background
Statment
Principle of Launcher
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Notification
Using the mouse to exhale the task-bar Placing the mouse over the top of the screen and press the left mouse button (or the finger from the top of the screen) to long press down and exhale the task-bar
The status bar Notification and operation keep consistent with the original android systerm The state of information in the phone synchronize with the state in larger screen
Notification list The notification list is consistent with the original android system
Screen desktop 1. The first three screens show on the desktop at the same time, extra screens show by turning pages
Home page description
2. The screen layout still arranged from left to right if the mobile phone has less than three screen 3. The number of page, the page layout (4 x5), as well as the location of application keep the same as the mobile phone (including various widgets location)
The status bar The state of the status bar remains the same as the phone inserted before
The system key Return key, HOME button, task management key
The resident application Keeping consistent with the resident application under the mobile phone
All app key In the middle of the resident application, click to open all installation applications
The system bar This horizontal area is system bar, which including the system key, resident applications and All app key
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Application editing Â
Application grouping Options of desktop application
Opening by groups in large screen mode
Long press (or right mouse button) desktop application icon, magnify 1.2 times of the icon size. The background become semi-transparent and presents adsorptive state to display 3 screens, indicating that the user has entered the editing status. Releasing your finger to exit edit status (or release the right mouse button)
Arrangement of group: arrange by the proportion of 3 times 3, more applications are arranged in the form of page turning
Remove or uninstall of desktop applications When the application renders editable state, the top status bar disappears and present uninstall and remove area, dragging and dropping application to these area to uninstall or remove
Moving of desktop applications When you enter editable state, dragging and dropping application to different areas is equivalent to getting it into other pages of your phone
The operation is in sync with the phone Conducting edit, delete, move, and relative operations on the computer remain the same with the operations on the phone interface
Open mode: the group will expand from the location of the click. After expand, the background stays unchanged,click the blank area outside the grouping to close the group
Background
Statment
Principle of Windows
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Multi-window mode
Ideation
Guideline
Principle
Wireframe
Adjusting the size of the window of the application
Focus&screen
1. Allowing to open multiple applications at the same time in the desktop display 2. There is only one window gains the focus when having multiple windows 3. When there are multiple window, there must have one window gains the focus 4. The focus screen always displays on the top level
Shortcut key of window position adjusting 1. The size of window can be adjusted by default 2. The window can be adjusted through the mouse stretch the edges of the window 3. User can design whether the application window can be adjusted by themselves 4. When the application stays in full screen, the window can not be adjusted
The shortcut key of window position The window would jump to those three window modes that system given quickly by clicking the shortcut (Unadjustable window does not display this shortcut)
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Three kinds of initial windows The landscape window
Â
The vertical screen window
The full screen window When you playing video by application, clicking the full screen play key (or mouse double click the video) to enter full screen status
Background
Statment
User Research
Model Consolidation
Principle of dragging and dropping across applications
Ideation
Guideline
Principle
Wireframe
Background
Statment
User Research
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Drag and drop to share File dragging and sharing between applications Select a file in the APP1 and drag it by the mouse share to the window of APP2 directly
Dragged and Shared the content of the web Select some information in the browser, drag it to the window of APP2 with the mouse, and share it directly in the form of pictures
Drag and drop photos share to the APP window Choose the photo Select the photos you want to share in the album, and long press the left mouse button to drag
Â
Drag and drop photos 1 2
211
The photo be draged become translucent thumbnails during the dragging process
1 1 21 1
3
3
1 2
1
Share to the application Drag and drop the photo sharing to the target application, then conducting the share in different share ways depending on the different target page
Background
Statment
User Research
Dragging photos to the APP icon to share
Model Consolidation
Ideation
Guideline
Principle
Wireframe
Choose to drag and drop the content from the browser to generate images to share
 -
-
Select the content In the browser, use the left mouse button to frame select the function that you want to share
Drag and drop content to generate images After frame selecting the content of the box, click the left mouse button to click on the selected content area, long press the mouse to drag and drop to generate the content to the image which can be dragged to the share target
Sharing applications Drag and drop the image to the target application and share, Different ways of sharing are based on different target pages
Drag and drop to the APP icon to share Drag onto the icon and release the mouse
Share options When user release the drag and drop, applications which allow different kinds of sharing can pop up selectable options for choosing the sharing target Applications which only allow one type of sharing can be opened the application directly (e.g. Weibo)
Â
Open the application Applications which allow to share will jump to the sharing page directly
CAFA TAGS App Type
Mobile Service Design
Brief
TAGS is a social APP centering on CAFA students’ learning and study; it provides the activity information related to CAFA majors in the form of tags. Meanwhile, its function, structure and interface will create a better experience for living in CAFA. On this basis, TAGS aims to help users acquire and master message conveniently, obtain the information they want anywhere at any time, associate students with students, experts and enterprises rapidly. In this way, each one in CAFA will not miss any information about campus study and life so as to enjoy the experience of controlling all aspects of life in CAFA
Date Roles Skill
Oct. 2014 – Jan. 2015
Method
User-Centered Design, System Design, Interviews, Storyboarding
Researcher, Designer Contextual Inquiry, Observation, Interviews, Model Consolidation, Information architecture, Wire framing, Interface Design
Background
Problem
Analysis
Persona
Information overload and low matching degree with users
Lacking the effect channel to generalize information
The  Problem  CAFA has a very diverse student body, multiple campuses and rich learning resources. Each semester, thousands of celebrities and masters from design and arts field travel to CAFA from all over the world to hold different kinds of activities such as giving lecture, holding forum, opening exhibition or sharing representative projects, etc. The university's current “Campus platform of CAFA� website only offers limited information and support to meet students' needs. The information transmission usually lags behind, which makes it difficult to match students accurately or efficiently, so students lack the opportunity of carrying out profound interaction with information and further utilizing. In addition, Other art school students in the same category and relevant social practitioners also lack the effective approach to acquire activity information about the academic activity implemented by CAFA.
Opportunity
Conception
Information transmission usually lags behind Easy to miss the instant information
Feel inconvenient to manage and utilize information timely and effectively
Wireframe
User Interface
Lacking the approach to connect with society
The information changed temporarily is inconvenient for transmission
Background
Problem
Analysis
Persona
Our Solution - Mobile Service
Opportunity
Conception
Wireframe
User Interface
Hot Air balloon Rule Our advantages
TAGS is a social APP centering on CAFA students’ learning and study; it provides the activity information related to CAFA majors in the form of tags. Meanwhile, its function, structure and interface will create a better experience for living in CAFA. On this basis, TAGS aims to help users acquire and master message conveniently, obtain the information they want anywhere at any time, associate students with students, experts and enterprises rapidly. In this way, each one in CAFA will not miss any information about campus study and life so as to enjoy the experience of controlling all aspects of life in CAFA
Consolidating the specific core user and the middle user foundations Supported by the school with rich resources Grasping internal market orientation
Understanding users and mastering their dynamics at any time
Technical talents
Our disadvantages Tra n s f o r m a t i o n o f b u s i n e s s demands
number of users
Insufficient cognition of external market Commercial operating team Imperfect cooperation model and profit pattern
CAFA  students Students  from  other  art  schools
Category of user
Designers
Core  users
CAFA Â faculty
Teachers  of  CAFA Â
Students  from  other  art  schools Middle   users Â
Curators
companies
CAFA Â departments Â
CAFA Â faculty
CAFA  student  union
Teachers  of  CAFA Â
CAFA  student  union Artists
CAFA Â students
CAFA  departments  Peripheral   users Â
Agency  recruiters Artisans user value
Agency  recruiters Designers
Curators
Companies
Artists
Background
Problem
Analysis
Analysis+Social Model
Persona
Opportunity
Conception
Wireframe
User Interface
Lack of way to find partners and advisers from different majors to cooperate with interdisciplinary project Lack of the way to link with the society and effective channels for self promotion
Students and teachers Hoping have more opportunities to interact or cooperate with students through professional activities
Lacking the way of obtaining the relevant learning resources of CAFA in time
Teachers of CAFA
Society
Students from other art schools
CAFA students
School authority
Companie
To publicize and promote activities pertinently
Looking for talent in the field of art or design and finding campus agent of company
CAFA student union
Agency recruiters Looking for an intern or partner. Seek for interdisciplinary cooperation
Curators
Lack of a platform to get in touch with the works and creation of CAFA student in the first place
Interested in CAFA's year-round artistic activities and creation of CAFA students and teachers
Interested in CAFA's yearround design activities
CAFA departments
Temporary changed information is inconvenient to pass for the target population
CAFA faculty Interested in CAFA's year-round art and design activities
User- entity
Artists Concerns
Designer
Art lovers Group
Relevant practitioners
Requirements
Background
Problem
Analysis
Persona
Opportunity
Conception
Wireframe
User Interface
Nannan  Chen
Jing  Lin
Gender:  Female  Â
Gender: Female
Age:  19  years  old  Â
Age: 23 years old
School:  Beijing  University  of  Technology Â
School: China Central Academy of Fine Arts
Major:  The  digital  media  design  Â
Major: Visual communication
Grade:  Freshman  Â
Grade: Junior Â
Keywords:  Desire  for  gaining  information,  willing  to  explore,  having  strong Â
Keywords: Jing Lin loves her major very much, always willing to show her works
curiosity  and  thirst  for  getting  knowledge
and have interested in trans-disciplinary and multi-disciplinary design
Behavior 1.  At  ordinary  times,  Nannan  always  attaches  importance  to  and  browses  the  latest  art  related  information  and  all  kinds  of  activities  in  the  industry,  especially  the  information  of  the  related  exhibition  activities  of  universities  where  the  major  is  similar,  and  moreover,  she  is  happy  to  participate  and  collect  the  related  information  2.  At  ordinary  times,  Nannan  always  attaches  importance  to  and  browses  the  latest  art  related  information  and  all  kinds  of  activities  in  the  industry,  especially  the  information  of  the  related  exhibition  activities  of  universities  where  the  major  is  similar,  and  moreover,  she  is  happy  to  participate  and  collect  the  related  information  3.  Sort  out  the  art  design  activity  information  concerned  at  ordinary  times  and  include  it  into  schedule  planning  4.  Seek  for  further  understanding  on  the  interested  works  or  designers  in  the  process  of  participating  in  all  kinds  of  activity  and  exhibition  through  all  kinds  of  channels  and  even  try  to  contact  with  the  designers Demand 1.  Hope  to  gain  the  related  newest  and  hottest  activity  information  of  art  schools  intensively  and  high-efficiently  2.  Need  to  collect,  integrate  and  manage  the  related  information  conveniently,  thus  to  participate  in  activities  of  all  fields  of  art  schools
Behavior 1.  Put  the  design  works  made  during  the  school  days  into  all  kinds  of  channels,  especially  aiming  at  teachers  and  schoolfellows  in  the  art  school,  thus  to  promote  herself  and  seek  for  the  cooperation  opportunities.  2.  In  college  students’  union,  Jing  Lin  always  cooperate  with  design  masters,  hold  the  activities  such  as  lecture  and  forum,  and  attract  students  and  field  enthusiasts  to  participate  with  a  kinds  of  publicity  channels  3.  For  internship  opportunities,  in  addition  to  pay  attention  to  the  activities  such  as  competition,  workshop,  and  trans-disciplinary  cooperation,  also  plan  a  certain  time  to  apply  the  related  internship  opportunities  4.  Because  of  taking  the  part-time  job  of  design,  there  are  lots  of  college  information  cannot  be  gained  from  school  notification  bar.  Therefore,  she  had  to  inquire  schoolmates  when  taking  the  school  bus  every  week,  thus  to  confirm  the  change  time  of  the  school  bus Demand 1.Worry  about  the  promotion  release  information  cannot  be  spread  to  the  related  users  effectively  2.  For  seeking  the  cooperation  and  internship  opportunities  on  the  platform,  worry  about  the  low  matching  rate  with  her  own  situation  and  worry  about  the  issue  of  information  asymmetry Â
Scenario  modeling Scenario  1.  Nannan  has  heard  from  her  friends  who  studied  art  that  there  would  be  a  lecture  and  exhibition  in  the  Central  Academy  of  Fine  Arts  by  a  multimedia  artist  from  Holland.  She  decided  to  go  and  see  it  on  that  day.  After  her  arrival,  she  found  her  friend  too  busy  doing  supportive  work  for  the  lecture.  So  she  was  about  to  ask  people  where  the  lecture  was  held,  but,  right  at  that  moment,  her  friend  just  forwarded  the  CAFA  TAGS  lecture  information  to  her.  Then,  she  quickly  found  the  lecture  place  after  downloading  all  information  and  sat  very  near  to  the  platform  with  the  help  of  the  lecture  staffs.  When  the  lecture  ended,  Nannan  developed  strong  interests  in  the  works  presented  during  the  lecture  and  planned  to  see  the  exhibition  on  the  afternoon  of  the  day  after  tomorrow  when  there  was  without  any  course  schedule.  As  a  result,  she  commented  and  forwarded  the  lecture’s  works  exhibition  information.  On  the  following  day,  she  found  some  students  of  her  school  who  were  also  very  interested  in  the  exhibition  so  she  decided  to  go  with  them  together  Scenario  2.  As  the  final  examination  approaches,  Nannan  who  is  busy  with  preparing  the  examination  only  have  one  day  for  outdoor  activities.  For  a  series  of  art  exhibitions  and  a  design  workshop  activity  of  the  art  school  Nannan  followed  recently,  Nannan  made  the  schedule  of  a  week  for  outdoor  activities  in  advance  according  to  CAFA  TAGS  calendar,  in  order  to  keep  the  examination  preparation  plan  as  scheduled,  and  also  to  follow  up  the  activities  Nannan  interested  in Sore  point 1.  Effective  information  acquiring  2.  Information  reliability  and  operability  3.  Fragmentation  information  management
3.  Hope  the  released  information  can  get  the  feedbacks  from  the  targeted  users Scenario  modeling During  the  junior  year,  Jing  Lin  planned  to  participate  in  a  dynamic  poster  competition  through  uniting  the  students  of  animation  major.  She  placed  her  own  graphic  works  on  various  design  websites.  However,  the  people  who  contacted  with  her  are  inconvenient  to  practice  because  of  geographic  condition  and  others.  Therefore,  Jing  Lin  changed  the  direction  and  started  to  seek  for  the  students  who  majored  in  animation  of  art  school.  Through  CAFA  TAGS,  she  contacted  with  the  trans-disciplinary  partners  in  the  college,  they  cooperated  and  completed  the  competition,  and  moreover,  they  were  also  invited  to  participate  in  a  dynamic  media  design  project  invited  by  multimedia  studio  tutor  after  they  published  the  competition  works  on  CAFA  TAGS Sore  point 1.  Targeted  spread  of  information
 2.  User  operability  connection  3.  Effective  information  feedback  4.  Timeliness  information  gaining Â
Background
Problem
Analysis
Persona
Two types of core user groups 1.  Content  consumers: main  behavior  of  the  main  users  are  browsing  and  collecting  information  2.  Content  producers:  users  who  produce  certain  information  and  content
Set different goals for two types of the core user groups to meet their different demands Content  consumers:  Allow  this  type  of  user  to  see  their  useful  content  more  quickly  and  accurately,  and  make  effective  use  of  the  information  Content  producers:  Allow  this  type  of  user  to  release  information  and  obtain  effective  feedback  effectively Â
According to user behavior from the user survey, we obtained and grouping the requirements of users News  browsing
Communication Â
News  classification Â
Check  out  the  hottest  news  Quick  browse  the  activity  news  Check  the  specific  news   Obtain  the  time  and  the  location  of  activities  Quick  retrieves  the  category  of  the  news  News  collection  News  commentary  Thumb  up   Information  sharing
Private  chat
Login  and  sign  in   Third-party  login  Retrieve  the  password  Personal  information  The  history  of  personal  released  news  Information  collection  News  calendar
News  release  Label  the  category  of  the  news  Edit  the  content  of  the  news  Edit  the  time  of  the  news  Label  and  edit  the  location  of  the  activity  Uploading  pictures
News  classification  Lecture  competition  exhibition  activities  recruitment  cooperation  news  works
News  classification  Login  and  sign  in   Third-party  login  Retrieve  the  password  Personal  information  History  of  personal  released  news  Information  collection  News  calendar
Implementing information structure based on demand Analyzing  according  to  users’  target  and  requirements,  arranging  information  priority  and  deducing  interactive  priority,  obtaining  the  four  functional  modules  in  highest  frequency  and  importance,  concluding  corresponding  information  structure,  and  then  carrying  out  interface  layout  and  interactive  process  design
Opportunity
Conception
Wireframe
User Interface
Considering through three dimensions for how to meet the requirements of the goal of the content consumer 1 Improving  the  efficiency  of  information  browsing:  During  browsing  the  news,  the  primary  element  leading  users  to  judge  whether  to  read  the  news  is  the  title,  so  the  priority  of  title  information  is  high,  which  is  the  habit  formed  long  ago  when  reading  newspapers.  Therefore,  we  divide  the  form  of  browsing  information  into  unfolding  and  folding  presentations.  In  the  folding  state,  only  presents  the  key  information  of  activities,on  the  contrary,  the  specific  details  are  emerged  in  the  unfolding  state.  2 Allowing  user  watch  the  news  they  interest  in  accurately:  news  tagging,  classifying  information,  which  allow  users  easily  find  the  types  of  activities  they  interested  in.  3 Allowing  users  manage  the  information  conveniently:  Design  the  function  of  Information  Collection  and  Thumb  Up,  collect  the  information  in  the  information  flow  of  personal  center  page,  and  present  it  in  the  form  of  calendar  in  the  events  calendar,  which  allows  users  manage  the  information  effectively  and  conveniently  according  to  the  schedule.
Meeting the requirements of the content producers 1 Publish  news  easier  and  more  efficiently:   During  the  message  publish  task,  regardless  of  clicking  interface  element  or  using  keyboard,  information  input  is  a  redundant  process,  which  tends  to  lag  the  process  and  frustrates  users,  which  would  result  in  degrade  the  user  experience  of  the  task.  In  order  to  enhance  the  efficiency  of  information  input,  the  selector  and  list  card  are  used  to  replace  input  field  to  display  the  options,  so  that  users  can  preset  the  optional  selections,  which  helps  users  complete  the  task  of  publish  the  news  efficiently  2 Encouraging  users  to  release  massage:  Before  release  massage:  Message  release  is  the  important  mainline  task  in  higher  frequency,  so  it  is  necessary  to  highlight  mainline,  make  task  clear,  enhance  the  interactive  priority  of  task  information,  figure  our  users’  operational  path  of  releasing   news  and  guide  users  to  release  massage.  After  release  massage: After  release  massage:  After  massage  release,  users  will  receive  the  ‘have  published’  feedback  from  the  system,  which  helps  strengthening  the  prompt  of  thumbing  up,  collecting  and  commenting
Background
Problem
Analysis
Persona
Opportunity
Conception
Navigation  structure
Wireframe
User Interface
Logo  Design
Generalizing  the  demand  information  in  similar  degree  based  on  use  importance,  requirements  and  frequency,  we  divided  all  demands  into  4  function  modules  by  the  form  of  tabs:  Home,  Send  message,  private  message  and  personal  center，which  supports  users  to  quickly  switching  among  four  modules  in  highest  importance  frequency
Home  page
Send  message
The  home  page  is  the  message  flow  section,  which  users  can  browse  to  the  latest  and  hottest  news  about  the  Central  Academy  of  Fine  Arts
According  to  the  theme  of  the  App,  we  choose  the  tag  element  to  design   our  logo
Private  message
Student  who  pass  the  identity  or  the  enterprises  that  have  publish  message  permissions  can  editing  the  content  and  publish  the  message
Briefly  communicate  with  the  message  provider  in  private  while  browsing  the  news  flow
Personal  center Allowing  users  show  their  individual  works  to  the  outside  and  manage  the  message  efficiently  Â
Categorizes  messages  by  eight  tags According  to  analysis  of  the  requirements,  we  found  that  when  users  browsing  news,  the  priority  of  news  classification  is  the  highest  because  information  category  is  the  significant  element  determining  whether  the  information  belongs  to  users’  target  content.  Hence,  we  divided  the  information  into  8  classes  and  present  it  in  form  of  tags  according  to  users’  requirements,  using  the  drawer-type  information  structure  is  applied  to  quickly  support  users’  searching  tag  and  main  scene  of  fast  searching,  which,  on  the  premise  of  influencing  efficiency,  enables  to  switch  8  tags  modules  and  quick  access  to  information  entry
Lecture
Recruitmen
Competition
Collaboration
Exhibition
Entrepreneurship
According to the research situation to conclude the app corresponding function and interface design scheme
Activity
Works
personality                                      67%  dynamic  effect                              66%  texture                                               41%  realistic                                             40%  color                                                   60%  brightness                                       34%
Background
Problem
Analysis
Persona
Opportunity
Conception
Entry Page
Log in Page
Sign in Page
Forgot password
The latest message
Separate expand the latest news
One key expands all the latest news
Quick search
The hottest message
Separate expand the hottest news
One key expands all the hottest news
Quick search
Log in & Sign in
The latest message
The hottest message
Wireframe Reset password
User Interface Reset password
Background
Edit news
Problem
Analysis
Persona
Opportunity
Edit news Page
Choosing tag
Chosen tag
Address list
Chat Page
Inputting
Collection history
Calendar
Setting
Send message
Personal Centre
Conception Setting time
Collection history
Wireframe Selecting campus and location
User Interface Upload pictures
Background
Problem
Analysis
Persona
Opportunity
Conception
Wireframe
User Interface
The latest message
The hottest message
Separate expand the hottest news
One key expands all the hottest news
Quick search
Lecture Tag
One key expands all lecture news
Separate expand the lecture news
Background
Problem
Analysis
Persona
Opportunity
Conception
Wireframe
User Interface
Edit news Page
Choosing tag
Chosen tag
Setting time
Selecting campus and location
Upload pictures
Address list
Chat Page
蔄㹻㖑
Background
Chat Page
Problem
Analysis
Persona
Collection history
Opportunity
Conception
Calendar
Wireframe
User Interface
Setting
The immersive tour guide system of Gubei Town Type
Interaction design
Brief
Supports a immersing way of travel and lifestyle by providing users with precise realtime navigation and interactive introduction about Gubei Town scenic spots
Date
Dec.2016– Aug.2017
Roles
Researcher, Designer
Skill
Contextual Inquiry,Storyboarding, Interviews, Scenarios,Wire framing
Method
User-Centered Design
Background
Statement
Qualitative Research
Quantitative Research
BACKGROUND Integrating sightseeing, holiday recreation, business exhibition, creative culture and other tourism industries, Gubei is an international tourism resort that enjoys first-class service and facility, high participation and superior comprehensive features. We are designing a tour guide system of Gubei Town for providing tourists with amusement guidance in tourist attract so as to upgrade sightseeing experience.
Summary
Scenario
Structure
Wireframe
User Interface
Background
Statement
Qualitative Research
Quantitative Research
The Problem
Summary
Scenario
Structure
Wireframe
User Interface
Stakeholders Map
When tourists traveling in the Gubei Town, due to insufficient understanding of information about scenic spot, DIY tour travelers will encounter some difficulties in selecting route, activity plan and amusement items. Particularly for the participation in real-time activity, acquisition of various activities and understanding of local feature as well as culture, they need customized tour guidance.
Project statement Chairman
The immersive tour guide system of scenic resort is targeting for tailoring individualized guidance to meet the tourists’ advanced demands, providing precise real-time navigation and interactive introduction about scenic spots of Gubei Town International Tourist Resort.
Government
Presentation
Regular meeting
Success criteria 01
Marketing manager
Communication
t
Regular meeting
The product manager
Communication
Regular meeting
Designer
Regular meeting
Propaganda Department
Upgrade sightseeing experience for tourists, leave a good impression on the visitors and form a good reputation of the Gubei Town scenic resort
Regular meeting
CEO
Design proposal
Planning scheme
Basic information (age, working condition, marital Status family status, hobbies)
Development engineer
Presentation
Planning team
02
Investors
Business manager
Communication
Director of operations Communication
03
Help merchants to promote business profits
Communication
Regular meeting
Merchants
Role The way of task docking Working relationship
Regular meeting
Operator
Background
Statement
Qualitative Research
Quantitative Research
Summary
Scenario
Structure
Wireframe
User Interface
Target Users
Family
Friends
Couples
User Research Planning Day1
Day2
Day3
1. Project introduction 2. Introduction of research purpose. 3. Collect and analyze the relationship of stakeholders and their business requirements
1. Summarize feedbacks from target users 2. Determine concerned and objectives of the research 3. Prepare and test the interview outline. 4. Prepared and tested the questionnaire
1. Carry out Workshop to collect the business requirements and vision of relevant department personnel 2. Analyze and determine the target users
1. Recruiting and screening research users 2. Conducted field trips in hot spots in the scenic spot during the peak period of tourists at noon, and conducted interviews and questionnaires for the target users
1. Conducted field trips in hot spots in the scenic spot during the peak period of tourists at evening, and conducted interviews and questionnaires for the target users 2. Meeting with the planner and business manager
Decision makers Marketing Department Manager of the propaganda Department Director of operations Design team
Design team Operations team
Design team Operations team Marketing team
1. Operations director interview 2. Optimize interview questions and adjust corresponding plan
Day4 1. Expert interview 2. Related role telephone interview
Day5 Analyze and summarize results of the research
1. Analyze and organize results of interview 2. Generate the persona of target users 3. Generate design challenges Analyze and summarize results of the research
Research and summary report presentation
Design team
Design team The project manager Relevant decision maker
Background
Statement
Qualitative Research
Quantitative Research
Summary
Scenario
Structure
Wireframe
User Interface
Questionnaire survey Purpose To understand the behavioral habits, corresponding demands and pain points of tourists during their tour through questionnaire survey Questionnaire outline Q1
Basic information (age, working condition, marital Status family status, hobbies)
Q11
Will you stay in Gubei Town for your holiday overnight? How many nights will you stay?
Q2
Is this your first visit to Gubei Town? If not, then how many times have you visited?
Q12
If you need to stay in Gubei Town, would you book the local accommodation in advance?
Q3
Who did you come with?
Q13
What channel or platform would you like to know and book local accommodation?
Q4
Have you ever know something about the amusement items of Gubei Town in advance? If you have, can you tell us what approach help you to know?
Q14
When choosing accommodation, what information do you need to know about the accommodation?
Q5
Do you know about the news of timeliness activities hold in the day you visit in Gubei Town? If you know, can you tell us what approach help you to know?
Q15
Are you interested in the culture and folk-custom of Gubei Town? If you are, would you like to further understand and participate in these cultural activities?
Q6
Which activities in Gubei Town are you or your peers interested in?
Q16
Q7
Do you have a travel plan for this trip? If you have, do you have a specific itinerary planned?
Q17
Which part of Gubei Town scenic resort do you think is the most attractive part?
Q8
In the scenic area, can you find toilets, stores or other location of services quickly if you need ? Are you looking for these service location by mobile navigation?
Q18
If there is a tour guide system application of Gubei Town scenic resort, would you like to download and use it?
Q9
During your holiday in Gubei Town, do you specially choose specialty that you like? If you do, can you tell us what approach helps you to choose the restaurant?
Q19
Have you ever used a tour guide system in other tourist resort? If you have, can you point out the advantages that you admireďź&#x;
Q10
When you choosing a restaurant, what information do you need to know about?
Q20
What advantages do you think a good tour guide system for the tourist resort should have?
Common Characteristics
What approach will you choose to understand and explore the culture and the folkcustomďź&#x;
Background
Statement Li Mei
Qualitative Research
Quantitative Research
Basic information
Scenario Zhang Hua
Age: 42 Region: Beijing Occupation: teacher Marital Status: married Education：Master of Art Hobbies: reading, visiting museums
Structure
Wireframe
User Interface
Basic information
Age: 35 Region: Tianjin Occupation: civil servant Marital Status: married Education：Bachelor of Laws Hobbies: travel, hiking, climb mountains，taste the gourmet
Behavior
Behavior
1 This is the first time for MeiLi and her family members visits the Gubei Town, before the journey,they know the Gubei Town and its activity items through their friends’ recommendation and introduction. During the travel day, they can roughly plan their route according the map form the scenic gate 2 MeiLi chose the activity items along the way according to her children’s interest,which mainly are those cultural theme amusements that easy to participate in and interact with. Due to MeiLi knows little about the timeliness information of the scenic spot activities, when she and her families came to the Shadow Play House, the shadow play Fan Lihua marriage was playing. After they enjoyed the play, Mei Li explained the cultural background of the Fan Lihua marriage story to her children depending on her own knowledge and the introductions of the display wall 3 MeiLi can find their needed services through indicators in the hot spots of the scenic area, but they still have to ask people for information occasionally 4 When it's time for dinner,MeiLi chose the restaurant that close to their location and applicable for multiple people dining together 5 The most attractive part of Gubei Town that MeiLi believe is is the complete recreational facilities that suitable for people in all ages 6 MeiLi hasn’t been used the tour guide system App, but if Gubei Town has its corresponding App, she will be willing to let her children try to use it Key features of successful App: Easy to learn, interesting interaction, it is effective for providing timeliness information, for example it can provide the introduction of relevant cultural knowledge background of the current scenic spots to users
Amy Zheng
Summary
1 This is the first time for Zhang Hua take his parents visits Gubei Town, before the journey, he know the Gubei Town and its activity items through his colleague, and he book hotel suite that easy to find and comfortablein in advance through the website 2 Zhang Hua roughly knows the scenic timeliness information of the day they visits Gubei Town through telephone counseling in advance, and he planing the route which suitable for elderly people to play according to brows the website to learn about the scenic spots which suitable for the elderly people 3 Zhang Hua can find their needed service center through indicators in scenic area and asking people , he also occasionally use navigation in combination 4
Zhang Hua find the light taste restaurant which close to their location through indicators in scenic area
5
Zhang Hua is quit interested in the scenic spots and activities which in cultural background, and the elderly are also very enjoying participation
6 The most attractive part of Gubei Town that Zhang Hua believe is the beautiful scenery and various leisure activities with cultural background and folk characteristics 7 Zhang Hua have been used the tour guide system in the Forbidden City, if Gubei Town has the corresponding tour guide system, he will be willing to use it Key features of successful App: Personalized, customizable , highlight the features of the scenic spot, health maintenance culture
Basic information Kong Yuhui
Age: 18 Region: Beijing Occupation: university student Marital Status: unmarried Education: Undergraduate Hobbies: photography, Listen to the music, swimming
Basic information
Age: 28 Region: Beijing Occupation: editorial director Region: Beijing Marital Status: unmarried Education: Bachelor of Art Hobbies: buddhist, writing, painting
Behavior 1 This is the first time for Amy Zheng and her friends visits Gubei Town, before the journey, they know the Gubei Town and its activity items through App platform
Behavior
2 Before they come to Gubei Town, they know part of timeliness information through mobile phone, and planning their route according their preference, it mainly focuses on the scenic spots with characteristic experiential activities, for example like Dye House，Paper cut shop，Cultural House of kite, ect
1 This is the second time for Kong Yuhui visits Gubei Town, and this time he come with his girl friend.. Before the journey, he learns more specifically about Gubei Town and its activity items through the website. According to his girlfriend’s proposal, he book the Beauties hot spring boutioue hotel in advance through APP
3 Amy Zheng finds her needed service center with the help of mobile phone navigation in scenic area, and indicators. It was took her a long time to find an ATM
2 They come to Gubei Town without specific route planning. During their tour, they know the information about the great wall music fountain show that will be played in 8.00pm from radio of scenic area. They are really interested in it , and they decided to go to there after dinner
4 Amy Zheng knows the distinctive Wtown food street of Gubei Town.through the navigation of mobile phone in scenic area, , where with elaborately cooked dishes, plenty of snacks and specialty restaurant according to the introduction of the storefronts, Amy and her friends taste their favorite special foods on Wtown food street
3 Kong Yuhui is interested in the leisure type scenic spots, such as Sun&moon island dock, Gubei SPA center, Dragon& phoenix spring pool, ect
5 Before coming, Amy didn’t book any accommodation. During her tour, she find and learn about the hotel that suits herself, and finally she chose the Great wall academy inn. But unfortunately，due to the hotel were fully booked, she can not choose the type of room she likes
5 Kong Yuhui find their favorite specialty foods and coffee shop through the comment of food App in mobile phone and also through advertisement introductions of stores in scenic area
6 Before coming, Amy didn’t book any accommodation. During her tour, she find and learn about the hotel that suits herself, and finally she chose the Great wall academy inn. But unfortunately，due to the hotel were fully booked, she can not choose the type of room she likes
6
7
7
The most attractive part of Gubei Town that Amy believe is the unique scenery and the scenic spots of the Great Wall
8 Amy has been used the tour guide system in museums before, if Gubei Town has corresponding tour guide system, she will be willing to downloaded in advance and use it Key features of successful App: Clear and effective, its effective for understanding the needed information in advance, its effective for users connect to their needed services, creation
4 It is easier for Kong Yuhui to find toilet, store and other service center through indicators in the scenic area,but it's not easy for him to find shuttle bus
Before Kong Yuhui coming to the Gubei Town，he know something about the Cultural House and the Folk Custom House in scenic area, and
he will selectively participate in some cultural activities that interests him The most attractive part of Gubei Town that Kong Yuhui believe is the beautiful scenery and the night scene of romantic water town
8 Kong Yuhui has been known about tour guide system, if Gubei Town has corresponding tour guide system, he will be willing to downloaded in advance and use it Key features of successful App: Effective for private personalized customization, vivid tour guide
Background
Statement
Qualitative Research
Travelers can chose the interested route before their journey
Quantitative Research
Summary
Scenario
Travelers can find their destination by following the guidance
Structure
Wireframe
User Interface
Travelers can find timeless activities in the day they travel, and find out the culture of the activities they join in
When travelers joining in an experiential cultural activities item, By using AR technology on the App to actualize the gift and Setting the night mode to enjoy the beautiful night scene of the they could play interaction game of the activitie on the App exhibits to interact with the products of the Cultural House guide map of Gubei Twon
Background
Statement
Qualitative Research
Quantitative Research
Summary
Scenario
Structure
Wireframe
User Interface
User Research Summary Pain points
Common characteristic
User requirement
Lacking official documents or detailed realistic picture to have a comprehensive understanding of Gubei Town in advance Lacking the planning and guidance of featured route in scenic spot
Educationďźšcollege+ The1-2 time came to Gubei Town To know activity events and plan touring path in advance Travel with family and friends
Lacking the channel to know timeless information in time
Interest in participating in various activities in scenic spot, willing to know relevant cultural background, folk-customs and taste local delicacy and particularly select featured restaurant
Lacking the planning and guidance of featured route in scenic spot
Knowing local accommodations in advance and book a hotel or inn They believe that Gubei Town is charming due to beautiful scenery, night scene, cultural background and humanistic characteristic entertainment events
Vivid introduction of events in scenic spot Planning and guidance of featured path Timeless channel to know information Vivid display and interpretation of history and knowledge under the sightseeing events Accurate and vivid guidance of service area position in scenic spot
Lacking the platform to interpret the history and knowledge under the sightseeing events
Briefly master Gubei Town local delicacy and themed accommodation so as to associate with needed service conveniently
Lacking the accurate and vivid guidance of service area position in scenic spot Lacking the key information about Gubei Town local delicacy and themed accommodation
Highlight humanistic feature and cultural background, beneficial to personalized customization and participatory interaction, vivid design that is easy to learn
Information architecture (structure of the App)
NAVIGATION
SIDE PULL NAVIGATION Share
Routes
Setting
WeChat moments
workshop route
day/night
friend of WeChat
hiking route
guide
News
AR
Catering
Folk-custom
Accommodation
exhibiting information
cultural house
exhibiting information
introduction
interaction games
introduction
introduction
folk Weibo
folkways route
language
interaction games
Entertainment
Serve
Search
Toilet
Exit
Store cable car shuttle bus
introduction
Entrance The Great Wall Music Fountain Sun& Moon Island Square Eight Banners Inn
convenience
Background
Wireframe
Statement
Qualitative Research
Quantitative Research
Summary
Icon design
Scenario
Structure
Wireframe
User Interface
Background
Statement
Qualitative Research
Quantitative Research
Summary
Scenario
Structure
Wireframe
User Interface
Background
Statement
Qualitative Research
Quantitative Research
Summary
Scenario
Structure
Wireframe
interaction game of dying
User Interface
Experimental Media Studio Website Type
Website design
Brief
The exhibition website is a website for members of EM Studio, an experimental media studio, to exhibit their works. Using dynamic area location that are specific and attributive, with the help of user data feedback, it visualizes the classification of members’ works, resulting in the actualization of real-time, dynamic and visualized classification
Date
Sept. 2014 – Dec. 2014
Roles
Researcher，Designer
Skill
Data Visualization, Ideation, Wire framing, Interaction design, Interface desigen
Background
Problem&Solution
User Analysis
Background
Wireframe
Animation Design
User Interface
Concept generation
Experimental Media Studio (EM studio) is one of the subject research studio of CAFA which focus on multimedia art design. Every member of EM studio have their own direction of design research, they need a platform to show and communicate their design results
Multimedia design is a multidisciplinary subject, following figure shows the knowledge structure of the person who engaged in the subject
DPOQMFUF
Visual Website statement A website that display works of members from EM studio by visually optimizes the classification function of the website
Function
Visualizing classification Engaging the EM studio members get feedbacks in a directly visual approach, which allowed them to know themselves better and further probe areas of their self-development and self-exploration
Goals Helping users deliver messages effectively and get feedbacks Facilitate users’ further explorations and attempts
The visual design
Presertation layer
The interface structure of information design
Architectural layer
Interaction design information architecture
Stucture layer
Function planning content requirements
Scope of layer
User research
Strategic layer
BCTUSBDU
DPODFQU
Requiring multiple abilities: user research ability ability of information architecture interface structure ability function planning ability content design interaction design ability collecting information ability...
Problem&Solution
Background
User Analysis
Function planning
User Interface
&YQFSJNFOU
50%
7JTVBMJUZ
75%
Categorized works with simple and straightforward tags, which resulted in oversimplified and rigid categorization, uneasy for users to sense intuitively when searching or browsing information they desired
Depth exploration Experiment research More possibilities
25%
18%
15%
Animation Design
Classification of the traditional website problem
According to professional ability that a multimedia designer requires, I concluded the four main features of the interaction artwork: Experiment, Visuality, Interaction, Comprehensive.
20%
Wireframe
User interface Sense of form Rationalization Visualization
*OUFSBDUJPO
. Human body engineering User experience Information architecture Dynamic effection design
Repeated
25%
Mechanical No image
$PNQSFIFOTJWF
User study Functional design Information design Content requirement
Too absolute
Not easy to find
23%
Not intuitive
Classify by the means of visual area positioning to optimize the traditional rigid classification
Solution Classify the works by visualize adaptive area, which replace the simple rigid classification of traditional website. Classifying works to its relative category, which makes the classification more rational. Using attributes of works in certain directions as positioning index to categorize works by the means of visual area positioning, which helps the personalized searching more reasonable, simple and efficient.
Background
Problem&Solution
User Analysis
Two levels of target users Goal: helping users deliver messages effectively and get feedbacks, and in the meantime, to facilitate users’ further explorations and attempts
The interface prototype
Wireframe
Animation Design
User Interface
Internal members of the studio (The Primary User) The primary user always stayed in a dynamic and evolving process, meaning that the directions of their works were always changing, non-absolute and unfixed. Meanwhile, level one users also had the need to explore themselves for selfdirection, because they were in continuous pursuit of individual development. External visitors who browse the website (The Secondary User) The satisfaction of the secondary users lied in whether the website design could enable them locate objective creators who they were intrigued by in a more effective way and gain information about the creator’s works’ history and style. They needed to swiftly and precisely retrieve works content in areas they were interested in Experimental
Experimental
Visual
Interactive
Comprehensive Visual
Interactive
According to area of the relative position to adaptive classify the professional category and direction of the works of experimental media students According to four attributives index that generated by the comment of four attributives from viewers, each work/individual would have its characteristics numerical value which decide it automatically displace to relative characteristics territory. Comprehensive
Background
Problem&Solution
User Analysis
Wireframe
Animation Design
User Interface
Sketch of wireframe
Every month update a version of the pyramid figure to witness of history of the attributes and preferences of works ,which helps users to selfcognition and self planning
According to four features index made by the evaluation of visitor, generate visual pyramid diagram for two levels of user and users can download and print the pyramid diagram
The pyramid &YUFSOBM VTFST Collection of their own preferences *OTJEF UIF TUVEJP NFNCFSTď˜ť Response the feature preferences of works, which help the members to know themselves better and further probe areas of their self-development and self-exploration
Four attributive skipping
Background
Entry page
Problem&Solution
User Analysis
Wireframe
Entry animation
Animation Design
User Interface
Background
Problem&Solution
Interfaces
Work platform-personal page
User Analysis
Wireframe
Animation Design
Work platform
Members of the platform
User Interface
Other Works
About D&D App Based on Designnova Awards, China International Young Designers Competition, DD aims to promote the communication, cooperation and activity between designers in multiple fields and relevant personnel. The various plates in APP closely associate users so as to maximize the resource utility in design circle
INVESTIGATE AND SURVEY Target users 1. Professional designers: the major supporting group of DD that are equipped with hither professional attainment, active in various design fields, delight to organize and participate in relevant activities, willing to absorb and share relevant resources
Behance
Pinterst
堆糖
花瓣
站酷
M ONO
D ribbble
2. Design related enterprises and communities: possessing exclusive organization that is more authoritative than independent designers; stronger influence and appeal that the demands are more and direct
／Distribution of users’ concerned design websites: most users are fond of Pinterst; in organization, it defined product positioning; visually, their design is simple and convenient with unique style
3. College students majoring art: the group in high activity and professional attainment but still have not stepped into society, so their demand for resources is higher and they expect to acquire more knowledge and opportunities from it
／Gender distribution: Male occupy 36.42%, Male occupy 63.58% 活动内容
／Occupation distribution: students are prominent that occupy 69.79%, followed by designers accounting for 17.7%
/ Age distribution: mainly 18-22 years old and 22-25 years old, together occupy about 80%
暖岛
活 动主 办方
良仓
果库
活动规模
暖岛
活动地址
有货
其它
从不
／Distribution of factors influencing users’ participation in activity: the content quality of activity information, relevant quality and credibility are users’ concerned factors. In visual convey, to build a highly artistic style atmosphere is critical to improve users’ trust and promote conversion rate
／Distribution of platforms for purchasing creative design products: most people select to never purchase creative products, so we will reconsider the position of this plate and may delete it if necessary. Among the users considering purchasing, they mostly tend to focus on Youhuo and Muandao because these two APPs stress on the transmission of brand image visually
／Distribution of designers’ focus on process channels: when selecting factory, the public put more emphasis on factory technology than the option of price. Therefore, in visual transmission, we need to highlight rational, professional and reliable feeling
COLOUR DISPLAY Definition of the theme color The sex ratio of male and female is about 4 to 6, where females are more. Meanwhile, most of them are youth. The data survey showed that blue is the color generally favored by both male and female with high acceptability in all age groups since it represents purity, calmness and modesty. In addition, the target users mainly are students and designers, so the main keywords manifesting designers’ traits are concluded, including creation, exploration, taste and aesthetics, etc. According to users’ participation into activity, product purchase and process channel, the keywords of quality, style, rationality and professionalism are obtained. Thus, to select blue with moderate transparency and higher purity as essential brand color renders a rigid, reliable and wise feeling. Moreover, the color grey in lower transparency and purity conveys a modest and professional style
＃172bf6
ICON DISPLAY
＃383c44
INTERFACE DESIGN
INTERFACE DESIGN
Other  Art  Works
Sound Cosmos（Visual interactive device）
Star field（Visual interactive device）
Analyzing  hundreds  of  human  voice  audios,  set  up  rules  and  distinguish  them  into  different  "sound  planets".Try  to  build  a  "sound  universe"  system  that  can  store  data  and  display
Designing  an  art  installations  to  visualize  the  relationship  of  interpersonal  interaction   through  the  digital  image  technology:  when  human  beings  are  placed  in  a  field,  the  fluid  images  will  produce  motion  changes  according  to  the  movement  relationship  between  people
Wave（Urban public art installations） The  street  is  located  in  the  residential  section  of  the  special  tourist  area,  by  using  art  method  to  design  a  barrier  for  this  section.  The  area  is  divided  into  the  public  area   and  the  relative  private  are,  in  the  mean  time,  the  theme  of  art  has  been  conveyed  and  highlighted
Tsinghua Campus’s afternoon（Oil Painting）
Porcelain language（furnishing art design）
Bamboo space（Conceptual model design）
Afternoon  sunbeam  pervade  in  the  Tsinghua  Campus  in  weekend
Combine  the  paper  with  the  ceramic  material  mechanism  to  create  the  form  of  the  receptacle,  which   convey  and  emphasize  the  characteristics  of  zen
Convey  the  concept  of  recalling  in  nature  in  dimension  of  time  and  space
THANK YOU