The more I experienced such thankful moments, the more I want to share and further create such experience.
PORTFOLIO
LINGZHI LI
IU002286393
Digital Media technology Ă— Human computer interaction
content
v-mirror
01
“I certify that the work included in this portfolio is my own original work. Work included which was conducted as a part of a team or other group is indicated and attributed as suchthe other team members are named and a true description of my role in the project is included.�
AR Software
09
S
sponsor ship Mobile APP
16
mondrian brick-breaker Mobile Game
Lingzhi Li
HCI/d
Digital Media Technology
01 v-mirror ABSTRACT This is the 3D AR virtual dressing software designed to facilitate dressing experience. By involving motionsensing technology and innovative UI design, users can interact with the software effortlessly to virtually try on different clothes with different backgrounds. CATEGORY
AR SOFTWARE
TIME
2 MONTHES
ROLE
UX DESIGNER & DEVELOPER
TEAM
LINGZHI LI
TING LIU
ADVISOR
XIWEN ZHANG
METHODS
JOURNEY MAP/USER SCENARIO
1
Lingzhi Li
HCI/d
Digital Media Technology
2
INSPIRATION Shopping is enjoyable for most people, especially woman. However, the excitement can be quickly dampened by tedious dressing process. For example, you have to wait in line for a long time; you have to be careful in case you stain new clothes with makeup; in winter, you also have to take o many clothes to try on new clothes. This sweater is nice.I want to try it.
So many people in line and I am afraid that makeup may stain this new sweater.
I think it’s better to quit.But what a pity...um
1 Emphasize &Define
2 Brainstorm &Ideate
3 Interaction &Interface
4 All of these can make customers frustrated and then lead to poor sales. So I begin to think, how could I improve dressing experience?
Implement &Program
Lingzhi Li
1 Emphasize &Define
HCI/d
Digital Media Technology
3
To understand what factors are related to unsatisfying dressing experience, I stayed in a shopping mall for a whole afternoon to observe and interview customers. By observing and role playing , I found the real problem and real needs of customers.
Interview
1
At first, I interviewed some of my friends. From their feedbacks, I found price, type of clothes, weather, service quality etc. all speciously connected to bad trying-on experience.
2
Failing to get a clear definition of problem from interview, I went to a shopping mall and stayed there for a whole afternoon to observe how people behave in real context and interviewed some frustrated customers. I visualized my observation and analysis into this journey map.
“when price is too expensive” “when weather is too warm” “when it is in cold winter” Under what circumanstance will you quit trying on clothes?
“when it is a tight jeans” “when I have a makeup” “when I have to wait in line”
Choose
Problems
“when shop assistants are annoying” Needs
Goals
Conclusion
choose clothes
Line up and wait for fitting rooms
“shopping guides always follow me around”
“I have to wait for too long time on weekends”
“shopping guides always recommend clothes on sale”
“if I want to change the size or color of the clothes, I have to line up again”
Shopping Guide show only when consumers are in need
Feel free to try on clothes in different colors or sizes
Personal Recommendation
Shorten trying-on time per person takes
Personal and intelligent shopping guides
NEED
Trivial trying-on process
Virtually try on clothes
take off & try on clothes
“Especially in summer or winter, taking on-off is too inconvenient”
Check
check the fitting results
“I don’t like to be watched while I am standing in front of mirrors”
Virtually try on clothes
Virtually try on clothes
As-is Journey Map
By analyzing findings from observation and interviews, I finally defined what the real problem is in trying-on experience and underlying needs of users.
PROBLEM
try on
Line up
WHAT I LEARNED
Though the user’s feedback is important, as designers, it is more important to emphasize his or her underlying concerns and needs.
Lingzhi Li
2 Brainstorm &Ideate
Special device
HCI/d
Digital Media Technology
With a clear definition of problem and a goal to be achieved, we brainstormed solutions as involving AR technology by using Kinect to achieve core function as virtually trying on. And I sketched a special device to further optimize user experience and augment reality.
This idea is inspired by how people look at the mirror to check fitting result and Microsoft Kinect’s motion-sensing game. When users stand in front of this special device, they feel like they are standing in front of a mirror. The only different thing is they can interact with this “mirror” to choose different clothes and check the fitting results.
other sketches
usable interface space Limited Interface Natural
depth camera e.g. Kinect
interaction comfort zone this is an area during which users can raise their hands effortlessly.
mirror-sized screen users can regard it as a normal mirror to interact with.
usable interface space Fixed activity area Not natural as mirror Large usable interface
main interface defined by interaction comfort zone, this area covers main interface.
usable interface space Not natural Large useable interface
4
Lingzhi Li
2 Brainstorm &Ideate
HCI/d
Digital Media Technology
After decided the technical solutions, I begin to design features and flows of the software. In this process, I reviewed the previous interview and constructed user scenarios to help me organize the architecture of the software.
UI flow
User scenario
With defined components of navigation, I made the UI flow to simulate the operation flow. This helped me check whether the process is logic and coherent.
I want (to)
so that I could
feature/need
Know what this software is for
Interact with it
Guide & Help
Choose clothes type of woman/man
Narrow down the scope
F/M
Find clothes in specific type/color
Narrow down the scope
Search
Onboarding &Guide
e
en
Clothes Sc
e
en
Clothes Sc
e
en
Clothes Sc
Clothes EMPATY
Menu Cube
WoMen Welcome to Virtual Fitting Room
Check the size of clothes
Wipe your right hand you can check the different color of these clothes STEP1: Wipe your left hand to rotate Menu Cube STEP2: Click in the air to choose one type
Begin your exploration !
Check the price of clothes
Please choose one type in menu cube
Men
Information Make shopping decision
Size recommend
Check the textile of clothes
Change clothes
Check additional information Remove background real-timely
Check fitting result more clearly
Background removal
Check fitting result (all-around)
Check all-around fitting result
Check fitting result
Decide to buy the clothes
Make order
Make order
Know which is better for me
Recommendation
Current Mode : Change Clothes
CLOTHES
Current Mode : Change Clothes
CLOTHES
Current Mode : Change Clothes
CLOTHES
Current Mode : Clothes-Top
CLOTHES
Search · According to Color： · According to Texture： REC SIZE: S
REC SIZE: S
PRICE:$ 50
PRICE:$ 50
Recommendation suitable for my figure Recommendation according to discount Recommendation according to occasions
Background change
Change background
Recommendation according to sales Current Mode : Change background
SCENE
Based on result from user scenarios, I organized those features into FOUR parts, which are also four components of the navigation.
PART 1
Clothes - try on different clothes
PART 2
Background - check fitting result in different backgrounds
PART 4
Recommendation - try on recommended clothes Help
SCENE
OL SPORTS FORMAL CASUAL
Change recommendation Current Mode : change REC
REC
PART 3
Current Mode : Change background
Current Mode : change REC
REC
Current Mode : change REC
REC
Current Mode : change REC
REC
FIGURE DISCOUNT OCCASION HOT
PRICE TOP： $50 BOTTOM：$50
PRICE TOP： $50 BOTTOM：$50
REC SIZE TOP: S BOTTOM：S
REC SIZE TOP: S BOTTOM：S
5
Lingzhi Li
3
HCI/d
Digital Media Technology
6
The most challenging but also interesting thing in designing interfaces for AR product is there are no official design guidelines to restrain me and so I can be very creative.
Interaction &Interface Layout
Cube icon
In order to understand how people interact with a motionsensitive screen, I did literature review and learned from other VR products such as Veer. I concluded some interface design guidelines are: Take advantage of intuitive gestures to interact Applicable to both hands Not each control should to be a button or handle
CLOTHES
HELP
MENU
Considering that the area of interface in “mirror” is limited because most space is used to show fitting result, I have to cover enough information in limited interface. Those are some iteration.
SCENE
REC
C
RE
S
C
E
N CLOTHES E HELP
Distinguish from environment Avoid small buttons which require precise control
Clothes
Scene
TOP
REC
Tops Bottoms Suit
REC ne elp HClothes Sce
Clothes Scene
Menu
Accessoaries
REC
Help
“difficult to touch”
“difficult to touch”
“not balanced”
“occupy too much space”
“occupy too much space”
NAVIGATION
ITEM
Inspired by card design, I came with an idea as cube-styled navigation by taking advantage of motion-sensitive screen. In this way users can intuitively rotate the cube to browse by waving their hands. At the same time, the screen space is saved.
Lingzhi Li HCI/d
4 Implement &Program
We use Unity 3D as develop engine through C#. In the implement process, my contribution is realizing the background changing and height estimator feature. Currently we accomplished three mode except recommendation due to lack of big data of users figure and clothes information. We also collaborated to write a paper about developing technology.
Implement
Multimodal interaction Try to imagine how to interact with a screen without touching? Gestures, voice and cursor are three ways to interact with VR/AR. The most exciting part of VR/AR is that they can provide multimodal experience. Users can take advantage of three ways to interact smoothly and intuitively. In terms of this product, three methods have both merits and weaknesses.
STRENGTH
WEAKNESS
Precise control
Not necessary
Intuitive
Physical fatigue
Effortless
Less effective in noisy environment
decision After weighing the strengths and weaknesses of each method, I decided to combine Gesture with Cursor as main interaction. This combination is more efficient and able to fulfill the needs.
Wave is the most effortless gesture
Digital Media Technology
Cursor is the most frequent interaction
(please read our paper for more details)
The technical solution is utilizing users’ skeletons to drive synchronous transformation of 3D clothes. Our work mainly including three parts: USER , CLOTHES and FITTING.
1 user
Extraction of users‘ skeletons Users’ skeletons are extracted and tracked by Microsoft Kinect.
2 clothes
3D modeling of clothes
3 fitting
Synchronous transformation
I constructed a hierarchy structure of human skeletons and skinned meshes of clothes in 3Ds Max. Clothes’ models are rigged to users’ skeleton by manually assigning weight to each vertex on meshes. The vertex weight is allocated according to joint-to-mesh distance and the flexibility of bones. The closer vertexes of mesh get to the key bone point, the more they are affected by the motion of a certain bone.
Synchronous transformation between clothes and users is realized through an avatar in Unity 3D. Users’ skeletons extracted by Kinect and rigged clothes models are mapped to this avatar. Through this medium, users’ movement can drive the transformation and deformation of clothes.
7
Lingzhi Li HCI/d
Digital Media Technology
4 Implement &Program
WHAT I LEARNED
Visual
Emphasizing users underlying needs and concerns is very important to reframe the problem. AR/VR is a completely new area with infinite possibility of new interaction. The lack of haptic feedback from clothes such as weight and textile is the main problem that blocks the software getting popular in real life.
Background Mode Users can check whether the clothes is suitable for certain occasion under this mode When users change from clothes mode to this mode, the clothes they are dressing won’t disappear and the information of clothes also shows at the same time.
V-MIRROR
Recommendation Mode Users can ask recommendation according to discount, figure and occasions under this mode.
Clothes Mode Users can try on different clothes or the same clothes in different colors. When users turn around, the software will automatically take a photo for users so that they can check the fitting result of the back.
When users change from clothes mode to this mode, the clothes that they are dressing won’t disappear and the information of clothes also shows at the same time.
8
Lingzhi Li HCI/d
02
Digital Media Technology
9
S sponsor ship ABSTRACT This is a mobile app designed for members of student associations who are responsible for finding sponsorship for student activities. This app tries to solve the problem of information asymmetry by providing a platform where students can connect with prospective sponsors directly. In this way, students can improve their working efficiency to a large extent. CATEGORY
Welcome on board
MOBILE APP
TIME
2 WEEKS
ROLE
UX DESIGNER
METHODS INTERVIEW/PERSONA/CARD SORTING
Lingzhi Li HCI/d
Digital Media Technology
10
INSPIRATION When I was a member of student union, I was in laision department which is responsible for finding sponsorship for student activities. A typical working process is :
1 Discover
2 Define Contact
contact with possible sponsors
Negotiate
negotiate about cooperation details
Cooperate
Implement terms of the contract
3 Develop
4 Deliver
And I noticed that many of my colleagues complained about how time-consuming it is to find sponsorship.
Lingzhi Li HCI/d
1 Discover
Digital Media Technology
To understand why this work is time-consuming and the causes of it, I did a survey among 20 students and had interviews individually with 5 of them. I found some interesting findings.
Which part do you think is most time-consuming in your work?
Survey 50% Contact with possible sponsors is the most time-consuming part for most students.
25% 15%
Interview
Contact
Negotiate
Cooperate
10%
Feedback
By interview individually, I got to have a deep understanding of the problem.
Traditional ways of finding sponsors is of low-eiciency.
Sponsorship cooperation is a mutual process which means vendors also need to advertise their brands in campus.
Strengthening bonds by social media can strengthen the cooperation.
Current apps like Yunzan adopt an application system which is passive for students.
Reputation is an important factor.
Students want to open their networks in this process.
11
Lingzhi Li HCI/d
2 Define
Problem
Goals
Digital Media Technology
12
Based on the key findings I discovered from interviews and surveys, I defined the problem and further developed the persona of the target users.
Information asymmetry between sponsors and students is the main problem.
According to target users’ needs, I defined following basic functions.
Function 1 Sponsorship information
Function 2 Direct contact
Function 3
Persona
Yang Li “I’ve called for thousands times without any hopeful response”
I‘m an outgoing person who likes talk to people. I am also ambitious and want to show my high working performance.
My daily work is using limited extracurricular time to connect with possible sponsors by search engine, official account etc. I would send similar words along with activity arrangement to many vendors or enterprises for many times every day. However, this work is time-consuming with little rewards. Sometimes, I called for thousands times but received no hopeful response.
I want to find sponsors efficiently, practice communication skills and open up network.
Social community
Function 4 Reputation system
ZIG ZAG
At the beginning, I developed two personas: students and sponsors because they all have the need to find and contact each other. However, after thoroughly thought about it, I realized that they have more different needs than common needs.
Lingzhi Li HCI/d
3
Digital Media Technology
13
With clear goal in mind, I began to brainstorm the solution and define functions of the app.
Develop
Functions
Binding system
From a standpoint of sponsors, they also need to find proper student associations to cooperate.
sponsor details
location
left quota
sponsorship name
left days
advertise needs
practice games
my favorite
contact
sponsor ship
account manage
ongoing contact
profile: affilation contact
sponsor reputation
my reputation
send event arrang -ement
send event arrang -ement
ended contact
latest activities
advertise requirement
message
share
my document
add to favorite
Sponsors
update needs
binding system
However, they have totally different needs. Rather than design an app where both students and sponsors can post their needs at will, I decided to design a post-feed system which is more efficient.
I listed all possible functions and items of the app.
mobile app
S
Card sorting
Users would like to contact sponsor from Favorite directly.
access &contact
Students
Users would not like to play practice games to improve their communication skills.
To further understand users’ mental models, I invited users to do card sorting and got some insights in constructing information architecture for the app. sponsor details
sponsor reputation
sponsorship name
contact
sponsor ship
account manage
profile: affilation contact
my reputation
message
location
my favorite
contact
share
send event arrang -ement
ongoing contact
latest activities
practice games
advertise requirement
advertise needs
my favorite
my document
*Result of card sorting finished by one user
left quota
ended contact
left days
Lingzhi Li HCI/d
Digital Media Technology
4 With the reference of users’ mental model of this app, I constructed information architecture for the app and further developed UI wireframes of it.
Deliver
Sitemap
Wireframe sponsorship on deadline on quota home
all/sort
on time
AT&T
AT&T
11:56 AM
Beijing
Baidu “Find Next Star” Brand Exposure
80 Days left
Lenovo “Sing-a-holic” Brand Exposure
10 Avaliable
1000
Naming
80 Days left
PICO-VR Experience
on location search
Brand Exposure
10 Avaliable
Naming
3000 80 Days left
Coco-Free Coffee in winter 10 Avaliable Brand Exposure
on reputation
80 Days left
10 Avaliable
5000
Naming
2500
Naming
80 Days left
CIBN “We want you!” Brand Exposure
10 Avaliable
1000
Naming
AT&T
11:56 AM
11:56 AM
10 Avaliable
Leo Lee
Leo Lee
Baidu “Find Next Star” 80 Days left
AT&T
11:56 AM
Message
Detail
Search
Sponsorship
All
12:03 AM
Could you please send me the event arrangement?
10:00 AM
I‘ll check it later.Thx
OK
5000
Deadline：12/16/17 Quota：15
Saj Kahn I’ll check it later
Goal: Brand Exposure Need: Naming / Roadshow / Poster Booth / Flyers /Campus talk
Jona Lander
*Roadshow requires permission of music, please check if campus allows this.
11/17/17
OK.
Have a nice day!
15th SIing-a-Holic... 1.3M
Requirement: Strong excution Hignly-responsible Experienced
Timeline & Budget 1.2M
Sponsor Info: Baidu is a company, focusing primarily on developing search engine. We care young students with talents and dream.
Contact us
Add to favorite
search message
delete add
information Architecture
all/sort
AT&T
search
80 Days left
Sponsorship 10 Avaliable
Baidu “Find Next Star” Brand Exposure
Naming
documents reputation setting
Lingzhi Li
5000
Brand Exposure 80 Days left
Naming
1000
10 Avaliable
80 Days left
Naming
TOTAL Name Affiliation Tel
2500
Lingzhi Li BLCU SU 18813167908
Responsive
lilingzhi@gmail.com
What need finding Naming sponsor for Sing-A-Holic Sing competition at May 21 Expexted sponsorship: 50k including audio equippments.
More
10 Avaliable
Naming
My Account My Reputation
3000
Coco-Free Coffee in winter Brand Exposure
@BLCU SU
10 Avaliable
PICO-VR Experience
me
11:56 AM
My Reputation
18813167908 lilingzhiapp@gmail.com
My Document
Lenovo “Sing-a-holic”
Brand Exposure
favorite
AT&T
11:56 AM
Edit Profile
My Favorite 80 Days left
contact/delete
AT&T
11:56 AM
Profile Search
All
favorite
AT&T
11:56 AM
Favorite Search
Cooperative
Communication
Execution
14
Lingzhi Li HCI/d
4 Deliver
WHAT I LEARNED
Digital Media Technology
Inspiration is random but observation of users behavior can lead it to logic. Users’ feedback is the source of the inspiration.
Visual
sign in
S sponsor ship
home
my reputation
15
Lingzhi Li HCI/d
Digital Media Technology
03 mondrian
brick-breaker SCORE 4
LEVEL 1 GOAL 14
ABSTRACT This is a brick-break game redesigned for mobile users. By adopting innovative interactions applicable to mobile interaction habits, players can enjoy the game as they did using keyboard.
CATEGORY
MOBILE GAME
TIME
1 WEEK
ROLE
DEVELOPER & INTERACTION DESIGNER
16
Lingzhi Li HCI/d
Digital Media Technology
INSPIRATION In game design course, I designed a brick-break game using Unity 3D. Mechanics, interface and audio eects worked harmoniously on the computer. However, I found such game was less popular when I released to mobile terminal. Popularity
1 Interaction redesign
2 Implement
In the PC age
After mobile phone showed
So I began to think about the reason why it is less popular in mobile ends and redesigned the game.
17
Lingzhi Li HCI/d
1 Interaction redesign
Digital Media Technology
To understand the reason of its decreasing popularity, I asked questions on Zhihu(similar to Quora) and played it by myself. The process of digging the truth is really engaging.
Problem define
Solution
I tried to play it again and asked questions on Zhihu to emphasize the reason. From people’s feedback and my own experience, I find the reasons why mobile users don’t like this kind of game.
One day, when I was on the bus, I saw a man playing with a music game. Inspired by how he interacted with this game, I experimented with two solutions. One solution is solving this problem through using new mechanics, the other one is through using creative interaction.
Precise control of paddle is demanding Cannot get real-time haptic feedback
solution 1
Hands may terminate the view
Two-hands New mechanics: no paddle.
Research
Users can click to shoot more balls to break bricks
I conducted a survey on Taptap to learn solutions towards this kind of game. There are 37 results on Taptap. Only 7 games own score over 8. I categorized their solutions to this problem into 2 category.
1
Adopt new interaction They adopt new interaction to reduce operating load such as shooting and aiming.
solution 2 One-hand
2
Adopt new mechanics They adopt new mechanics to reduce operating load such as getting rid of paddle, using more balls to break bricks and giving ball more chances to bounce.
New interaction: changeable paddle. Users can slide to change the length of paddle
18
Lingzhi Li HCI/d
2
19
I adopted MDA framework to formally design this game. MDA approach is known as Mechanics-Dynamics-Aesthetics.
Implement
Scripts
<Ball Control>
<Game Manager>
Dynamics
This script is used to manage the mechanics of game including GUI, game status and level loading.
trigger/collision faster/slower hit
Digital Media Technology
spawn/destroy
This script is used to control the movement of the ball
effects
extra asset earn/lose walls
catch restart miss game over timer
//GUI score
<Brick Control> This script is used to control the audio and particle eďŹ&#x20AC;ect when brick is hit
Mechanics Players can clear the level only if they hit a certain number of balls within a certain time. In this process, there will be obstacles showing in two forms: black bricks and disturbing balls.
Level 1
Level 2
//Hit Brick
obstacles
5/fixed
speed
faster
obstacles
10/moving
speed
faster
Disturbing ball
<Paddle Control> This script is used to control the movement of paddle using keyboard.
//Win/Lose
Lingzhi Li HCI/d
2 Interaction redesign Visual
mondrian brick-breaker
WHAT I LEARNED
Digital Media Technology
The advent of new technology comes along with new possibility of interaction.
20