Portfolio From tiny things to see a real world
PROJECTS 1
Community Toolbox Individual work
2
Little Yawn Team work Interaction designer
3
The 60’s Team work Interaction designer
4
Adventure of Fruits Individual work
Project 1
Community Toolbox For a more convenient and efficient life
This picture download from Tannaka tatsuya
It is hard to deal with so many maintenance works without enough tools. After graduation, I tried to rethink the toolbox project, this time as an interactive designer with human factor taken into consideration -- the process of which is exactly where my version 2.0 came out.
As a computer science major, I created the graduation project of community toolbox sharing system from the viewpoint of an engineer on this issue. Which is the version 1.0.
THE PROCESS OF BETA 2.0
THE PROCESS OF BETA 1.0
Mar. 7, 2017
Discover the problem
Apr. 3, 2017
Make sure the structure of system
Apr.10, 2017
Start to build the project in App, cloud database, and hardware
May. 8, 2017
Finish the prototype of Arduino, android studio and access
May. 15, 2017
Test the function of app and toolbox
Jun. 27, 2017
Research the target users
Jul. 8, 2017
Draw up a question matrix and interview users
Aug. 18, 2017
Aug. 28, 2017
Decide target function & draw stakeholder map
Test the function of app and toolbox
Project Vision 1
Software & Hardware Support
The available software & hardware technical supports for function realisation
Solve this issue as a computer engineer
Function Requirements The initial functional requirements were made out through the requirements analysis table. Cloud Database User login & registration Borrowing tools Queries borrower Control toolbox open Confirm borrow Search tools
Store and update the database of users’account and the inform ation of tools in real-time.
Asp.net space (Framework 4.0) Access 2013
Bluetooth communication Update user information
Interaction display of human detection Administrator’s RFID card to manage the box QR code of App download tips Android Studio IDE Bluetooth communication protocol
Application
Toolbox
Client to show all the information and support user’s operations.
The main part of the system, store tools, and support administrator’s management.
Arduino IDE Arduino UNO Sensors
Project Vision 1: Graduation Project After one-month database programming, I succeeded constructing server and client, as well as toolbox hardware model supported by Arduino in the end.
Application software
Toolbox hardware
SIGN IN
PAYMENT
Phone number SMS confirmation
Wechat Alipay
1
Servo: support the top rotating and slide door open
2
RFID module: support administrator’s management
3
Bluetooth module: realise communication between App and Toolbox
4
Human detection module: Interaction display of human detection
1 HISTORY
RELATED IINKS
Functions
Community Safety precautions Links
Record of borrowing history
2 4 TOOLS Type Available number
3
REMINDER Loanable calendar
Circuit elements
Screenshot
1
The Toolbox prototype
2
Open the sliding door by RFID card
3
Six blocks to store the different kinds of tools
4
App on phone control the top to switch one block open
1
2
3
4
Project Vision 2 Interaction design starts with know the real users
Interview Know people
Persona Abstract user protrait
Name: Shuhan Hu Age: 23 Occupation: postgraduate student Accommodation: an old rental apartment Income: 3000 yuan Hobby: Traveling Character: Amiable Educational: Master of Biology
Need tools too expensive to be used only once Have learning ability Faucet-replacing is difficult for non-professionals.
All tenants need renovated at first.
Young Renters
Maintenance is usually in time-lag.
Professional maintenance personnel are
Young Community Residents
Unaffordable
Hammering
The toilets are often clogged
Electric toilet dredge machines are expensive
Pain points
Installation by themselves. limited knowledge about tools. Repairing door locks Lamp assembling
Young users are proficient in using Apps.
A student, living in an old rent apartment with other five girls in Beijing Buy tools online Little knowledge to choose suitable repairing tools Limited budget, limited time.
Difficulty in finding tools
Ordinary manual toilet dredge cannot always solve the problem
Buying extra tools is beyond original budget. Need assembling on their own.
Name：Zhu Qiang Age：26 Occupation：Entrepreneur Accommodation：Office Building Income: 8000 Hobby: DIY furniture Character: Introvert Education: Bachelor of Industrial Design
Users Who Buy Funiture Online
4
Operation and Maintenance level of user-friendliness
Default Weigh
Rent
3
Security
User professtioncy
* The interviewees have agreed to put the photos in the portfolio
Pain points
filtered according
A young start-up employee, living in a rented room which he renovated into individual office. Have the ability to use electrical tools Buy furniture online Limited budget Repair his office often. Have frequent needs of assembly services, which, however, tend to be costly.
to their frequency
2 1
Keywords from the user interviews are
User Vote
Analysis and Conclusion draw insights The individual user’s contribution is in direct proportion to his/her utterance amount
Decision Matrix
Stakeholders’ Map Based On Functions. Importance of Target point: Level of user-friendliness>Rent >Security>Operation and maintenance >User proficiency
Weight Level of user-friendliness Rent Operation and Maintenance User proficiency
Offer fees for joining in the platform
Adjust sales products according to the required information
Update / release maintenance personnel information
Security
Online
Serviceman
40
30
Renter
10
App
Updated information about the tool supply
Wang Wei (user3)
Pr ov
Shuhan Hu (user4)
ide
too
ls
/w
or k sh op s
Gain profits by offering service of maintenance
Offline
Maintenance personnel
Offer the requirement information
Function Contribution Chart
Landlord
Functions & Solutions
Expenditure on tool loss
Workshop
The priority of the five target points is figured out based on the users’ contribution in general, and the personal tendency of the individual user. Rent
Efficient Easy to use Easy to understood.
Level of user-friendlinessse
Level of user-friendlinessse
Reasonable price
Rent
Security
Manage the serviceman’s information
Funds
Information
Management control
Goods transportation
Conclusion Operation and Maintenance
Security
Operation and maintenance
User proficiency
Personal safety Information safety
Checked and Maintained after renting on time
Based on this stakeholders’ map, the Application’s business model, as well as the potential value can be confirmed. And the software should focus on the core circle of the system, which is among renter, application, and the workshop.
Provide / Supply / Update Tool
Junsong He (user2)
Rent profit of workshop
The Core Circle of System
Potential users Zhu Qiang (user1)
Hardware store
Gain profits stably and constantly
Rental
20
Purchase tools in a lower price
New vision of community toolbox Application
GUI Guideline for the engineers to make development more efficient.
F5B13D
F8C065
EBEBEB
FFFFFF
Sub Header Gap
14px
Text Gap Large
20px
Text Gap Small
14px
Section Gap Small
8px
Section Gap Large
48px
Text Lable Large
Avenir
Book
18
Main Headline
Helvetica Neue
Regular
14
Sub Header
Helvetica Neue
Regular
12
Text Lable Small
Helvetica Neue
Light
12
Sub Lable
Helvetica Neue
Regular
9
Specific information about available tools.
A variety of search methods
Pictures and videos of operation guidance
Due time countdown
Information Flow
Tap and hold
Swipe right
Edit the order
Highlight info
High-fidelity Interface
Choose the workshop
Homepage
Check and rend tools
User’s information
Video guidance
Renting history
Renting list
Confirm payment
Return reminder
Follow-up
After user tests, more failed requests should be considered and solved in a friendly way. Here are 2 potential feedback pages.
Toolbox helping centre
2. Can’t find in Toolbox?
1. None avaliable
We are sorry for that! Could you tell us what kind tools are you looking for?
We search on other workshops, here are some other places:
Text here Or
Workshop C, 3, 1.2km
Upload a picture
Workshop E, 5, 2.2km
or other tools may consider have the same function with your search: spanner
vise
pliers
Futher evaluation
Using colour code to define different personal tendency of individuals is a reliable method and should be considered as a necessary part of the whole process. But how to make sure that definition of keywords as well as the efficiency of the colour code should still be judged and tested.
Project 2
Little Yawn Have a tight and sweet sleep
* The interviewee intervieweeshas hasagreed agreedtotoput putthe thephotos photosininthe theportfolio portfolio
Read the word
“ YAWN ”
* The interviewee has agreed to put the photos in the portfolio
Are you yawning?
What is Yawning contagion effect? How can we use this phenomenon to induce insomnia patients into sleep?
Yawning (oscitation) most often occurs in adults immediately before and after sleep, during tedious activities and as a result of its contagious quality.[1] It is commonly associated with tiredness, stress, sleepiness.
Basic Concept In humans, yawning is often triggered by others yawning (e.g. seeing a person yawning, talking to someone on the phone who is yawning) and is a typical example of positive feedback.[2] This "contagious" yawning has also been observed in chimpanzees, dogs, cats, birds, and reptiles, and can occur across species.[3] 1.Anderson, James R. Pauline Meno. "Psychological Influences on Yawning in Children". Current Psychology Letters. 2003, 2 (11).Print. 2.Camazine, Deneubourg, et, al. Self-Organization in Biological Systems. Princeton University Press, 2003.Print. ISBN 0-691-11624-5. 3.Shepherd, Alex J, et al. "Dogs catch human yawns". Biology Letters.2008.4 (5): 446–8.Print. doi:10.1098/rsbl.2008.0333. PMC 2610100 Freely accessible. PMID 18682357. Lay summary – BBC News (August 5, 2008).
So when exposed to a yawn-filled environment, you will spontaneously follow the yawn, get relax, and, naturally, feel sleepy. * The interviewees have agreed to put the photos in the portfolio
“ I’ve forgotten what it’s like to have a normal sleeping pattern.”
INSOMNIA
Nowadays insomnia has become a wide-spread problem for almost all age groups, for which most sleep helping methods except for pills taking, such as Apps & music, only have limited cure effect.
The White Paper on 2017 China Youth Sleep Index (hereinafter referred to as "the White Paper") jointly released by China Sleep Research Association, Musical Bedding and Tencent News shows that of the 44,308 young people surveyed, only " 11.2%.
Working principle Little yawn could emulate the motion and sound of yawning, and therefore create a natural sleep-helping environment for the sufferers of insomnia. .
The questionnaire’s guideline In order to collect and confirm the requirements of target users, I designed a questionnaire based on following facts:
Feedbacks we receive
Toxic, I want to sleep, but there are a bunch of things not done, good or bad, let me see this time.
I am going to sleep... Sleepy Yawn to tears. Sleepy... A bit sleepy to rest on tummy Sleepy. Cats are cute. Yawned ......
*The initial solutions to the issue are shown in the figure as well. Questionnaire link: https://docs.google.com/forms/d/1UFMjTTPSOq4XbAfWmqVOjma61UCTR-wOaH0oXgFYXAg/edit#responses
Through this experiment it is confirmed that yawn-filled condition works on sleep stimulation.
Functions analysis of the questionnaire
Do you feel like yawning during the video? How many yawns did you hit during the viewing?
Did you feel sleepy after seeing it?
50%
Yes, I think it is amazing
33.3%
Conclusion
41.7% 24.9%
Almost no, it does not work for me
1 The period of the sleep stimulation work of yawning should be controllable. 2 Alarming function is required to reduce the necessity to use other electric devices.
1-2 times Although I feel a little, I can control it 3-4 times
16.7%
I've kept yawning and I can not control myself
Almost no effect on me
16.7%
3 The sleep-helping work should be adjustable according to individual biological clock.
16.7%
4 Fading light is helpful. How long does it take to play the phone before you go to bed?
Can you improve your symptoms of insomnia by communicating with friends and family?
40%
30%
40%
20%
60%
10% 0% Half an hour
Half an hour to an hour
One hour to two hours
More than two hours
I never play mobile phone before going to bed
No, it doesn’t matter
Yes, I will be relieved a lot
5 Touching Interaction helps create a more intimate and relaxing environment.
System structure
Flow chart Off
Homepage
Trend
Biological clock setting page Data analysis
Times
Biological clock settings
Start
Health condition evaluation Time
LittleYawn works
Good
Ill
Health problem analysis
Record
Clinic
Attributes setting page
Sound
Yawn
Alarm
Sleep
Fall asleep
GUI fonts guideline for the engineers to make development more efficient.
Button
Damascus
Regular
32
Body Copy
Damascus
Regular
20
Headine
Helvetica Neue
Regular
18
Sub Header
Helvetica Neue
Regular
14
Text Lable
Helvetica Neue
Light
14
Text Lable 2
Helvetica Neue
Regular
12
Home page instruction Name your Little Yawn
Tap into biological clock settings page
Information about health condition of you and your Little Yawn
Rotate Little Yawn back to switch between turn off /turn on
Tap into the attributes setting page
High-fidelity Interface GUI guideline Main Color
#50E3C2
#442C68
Color #FFFFFF
Secondary Color
#59748A
#A298B8
Layout
Top bar
20 px
Margin Left
32 px
Margin Right
32 px
Bottom Menu 72 px
Appearance design & Electronic kits of prototypical hardware
Turn off the light by touching the ears, made with the light sensor and LED wire.
The movement of yawning is made with a servo motor.
The power The yawning / alarm sound made with MP3 module.
Sweet dreams at night, realised dreams in life
Follow-up
We hope the Little Yawn can be seen as a close pet with you all the night, so before the bedtime, maybe it can remind you to manage your work early by voice. In addition, since people can be affected more by familiar contacts, we also hope the Little Yawn can be fed up by their owner using virtual food (as a reward of sleeping on time) to cultivate intimate bond. More interactions like this could be added in the future.
Futher evaluation Even though the idea of this project is acceptable, but I wonder to what degree can Little Yawn imitate real human behaviour. The effectiveness of this artifact needs to have further evaluation.
Project 3
The 60’s Bring you closer to your families Group member
Teamwork
Guanghe Yan Appearance design
Inspiration
My grandma has been struggling to learn using social apps such as WeChat, but she always got frustrated due to the elderly-unfriendly interface and complex operations. Despite her highly-educated background, and study ability, she still feels the operation surface unfriendly because it is not designed for elderly — which motivated me to create a social product suitable for the elderlies, to help them view the photos and make contact with their old friends and families.
* The interviewee has agreed to put the photos in the portfolio
Interview I invited two elderly to participate in the design process. During the process, I fond that they were in resonance in terms of this problem and therefore rather excited in this project
The functional design and prototypical hardware were confirmed by the comparison of feasibility and reference to the blueprint drawn up by the elderly.
Example Unfriendly navigation of returning to homepage
* The interviewees have agreed to put the photos in the portfolio
Through the desktop research and the interviews, I collected current conditions, demands and expectations of the industry and people of different ages, and then analysed them as factors for balancing consideration and evaluation criteria.
The elderly anticipation demands
Priority of software functions. 1 Photo reception 2 Video / Audio call 3 Voice operation 4 Font enlargement
1
5 Photo / Document printing function
Major functions
Photo browsing & printing
6 Photo commending
Video call Industry's current function
Children expected demand
File processing
1 Messaging 1. Video / Audio phone
2 Video / Audio phone
2. Messaging
3 Font enlargement
3. Automatic reply or busy line transfer
4 Voice transmission (including voice dictation)
4. Photo sharing
2
Subsidiary functions
Simple logic of operation Considering the above three parties, we can draw out the main demands
enlargement of fonts and icons 1
Photo / document printing
Font Enlargement tools
5
3
Voice operation
6
4
Video /Audio call
2
Photo sharing Photoreception photo commending
Messaging
Voice dictation Automatic reply or busy line transfer
Share the feelings of the moment
Photo sharing Send your photos to family by phone.
Video call Have a happy time to see your family without distance.
Photo printer
* The interviewee has agreed to put the photos in the portfoliot
Functions presentation File processing
Grouping of contacts
Photo browsing
(rendering of the device)
Enlarged fonts
Simplified logic Album
Select to print
Colletctions
Friend’s life
Homepage
Photo overview
Printing photos
Personal diary
Contacts
Voice dictation button Photo commending
Contact grouping
30686A
92B3B8
C5B4A6
50A2FF
FFFFFF
F5A623
Follow-up
To be frank, it remains unsure whether this design could get realized in technology and manufactur-
Is it true that you could realise what I drew ?”
ability, for which I would continue working on along with my accumulating knowledge and experience. I believe one day I will make my grandma’s dream come true. Futher evaluation “Now I more concerned with how to change films of the device because I really want to have real photos.” --From my grandma.
* The interviewee has agreed to put the photos in the portfolio
Project 4
Adventure of Fruits Value from life, inspirations for children
Inspirations
It is commonly seen in the fruit shops that parents teach their children to recognize and name between different fruits. There is also a popular puzzle for children similar to it, encouraging them to pair the blocks with the graphics shapes. My design was aimed to expand the pairing from graphic level to 3D level in order to cultivate children’s sense of 3D space.
How do intelligence toys enhance children’s abilities? Develop the brain
Children between 0-3 years old calculated by SPSS 16.0 shown the intelligence education can enhance children’s abilities in seven aspects. DPI
MPI
Language
Affected Not affected Stimulate sensory development
Intelligence toys are believed to be inspiring for children in comprehensive ways like drawing, spelling, observing, etc., and therefore widely adopted in early childhood education.
Improve brain immunity
Form abstract consciousness
Social behavior Adaptability
DQ P<0.01
Exercise logical thinking
Precise action
China & Foreign Medical Treatment
75% Smart toy product growth rate
Why are high-tech toys so popular in China?
Nowadays high-tech fat toys are popular in China. Smart toys such as VR and AR are regarded to be effective in early education, and in a great need.
Toy industry average annual growth rate 6%
2017-2022 China's smart toys market trends and investment strategy research report
Game Mechanics
System flow of Adventure of Fruits.
Processing is used to calculate the angles of fruit, and the process of gameâ&#x20AC;&#x2122;s rules.
Arduino is used to catching the six-axis acceleration data and send them to Processing.
STEP 1 Recognize the fruitâ&#x20AC;&#x2122;s board
STEP 6
STEP 2
Timeout, shows the result.
Choose the corresponding fruit
STEP 5
STEP 3
Complete in 5 sec, add the grade otherwise, add nothing
Observe the shapes of the fruit on the board
STEP 4 Adapt the angles of fruit in your hand
The same pineapple is of different corre-
In order to emulate the authentic sensing, I
sponding shapes on board in 3D models.
linked fruit with virtual models by Makey Makey.
Processing calculates the data of six-axis imported from Arduino. If the data calculated are in a range of the certain angles, the player would be awarded by one score.
User operation & Specific technology compared chart
Arduino is used to catch the six-axis acceleration of the motion of adjusting the angle.
Hard
Processing is used to show the shapes of fruits in certain angle randomly.
The code of Processing limites the time of every round by changing the board randomly every 5 sec.
Specific technology
Makey Makey is used to pair the real fruit in hand with virtual 3D models stored and sho the models on screen through Processing
The playerâ&#x20AC;&#x2122;s score would get sum up and show when the time is out. The processes would loop.
Adapt the angles of fruit in your hand
Complete it in 5 sec , add grades Defult or over 5 sec, add nothing
Normal Observe the angles of the fruit board Time out, receive a result.
Choose the right kind of fruit
Easy
Detect the shapes of different fruitsâ&#x20AC;&#x2122; board
User journey
Score 8
User testing
Score 8
“We played some similar games in our school before, but only some pasters of different drawings and a book, not that cool!” ——Mao Mao, 5 year-old, shanghai Dayi kindergarten
* The interviewee has agreed to put the photos in the portfolio
Follow-up
After user testing, I fixed the Arduino 101 on a scoop in order to bring children a feeling of being chief, and prevent them from getting hurt by Arduino board.
* The interviewees have agreed to put the photos in the portfolio
High technologies are not always born for the general use, but would usually come into daily life in the end. That is exactly where the value of designers lie: bringing technology into life, and improving life with technology.