T F P O R O L I O HUANG SONGHAN CONTENT 01/ 02/ 03/ 04/ HELLO STREET VENDOR BLACK MIRROR EAT BETTER DIGITAL SOUL SERVICE DESIGN PRODUCT DESIGN INTERACTIVE DESIGN USER EXPERIENCE DESIGN SPECULATIVE DESIGN
BACKGROUND
STREET STALLS IN CHINA
02
HELLO STREET
VENDOR
SERVICE DESIGN | UX UI DESIGN
PERSONAL PROJECT | 2022
In this project, I think the design could draw more attention to some social phenomena and solve social problems. When walking on the streets, I noticed that many street vendors were still surviving in an unstable environment without the right safeguard. Therefore, I design a new street vending mode that combines a minineighborhoods. I hope technology could allow marginalized groups to express themselves and bring convenience to them as well.
01 Characteristic
PHENOMENON
Flexibility Open at any location and at any time
CAT AND MOUSE GAME CITY BEAUTIFICATION
Temporary An unregistered informal business behavior.
"Cat and Mouse" game between street vendors and local authorities. Street stalls are cleaned and hygiene concerns.
03 Development of Street-stall economy
Reform and Opening-up 01/
After 1949 After 1978 Ancient times
Pre-reform era
Street stall economy was considered as the “tail of capitalist economy”.
04 Why it is vital in urban life
Convenience In areas of high population density, such as residential areas.
Embody city's history and spirit
Informal brings income
Street stalls root in Chinese civilization re-emergence
BEAUTIFICATION
REVIVAL OF BAITAN
RESEARCH
I focus on the street vending in ShenZhen, one of biggest immigrant cities in China. Voices against street vending
"It is not easy to prohibit street vendors from occupying the roadside..."
cleaned up due to pollution concerns.
Baitan(street stalls) is reviving and become a buzzword among young people.
"Small street vendors ignore the responsibility of "
After 2000 After 2020
Opening-up campaign prompted a drive to rid the city of street vendors
Clean-up era Chinese government re-legalized street stall business the economy
Informal economy brings job and income
Post-COVID-19 era
A third place for service, entertainment and social life
Hygiene concerns Low-quality service
CURRENT PROBLEM CLUSTER
“I like street-food but I'm expecting a street vending with higher quality of food, service and environment" Consumers One of the most active night-time economy Cultural Diversity Foundation of street vending 1 Shanghai 2 Beijing 3 Shenzhen Cantonese cuture Rejuvenation of population 79.5% Aged 15-59 more than 63% population is immigrants 38.4 28.65 The average age of residents in Shenzhen The median age in China Foreign cultures
Residence area
From 8pm to 10pm
DAY 2
Busy intersection
From 8pm to 10pm
DAY 3
Small vendors were gathering in mess at a busy intersection due to absence of Chengguan
When Chengguan came, small vendors retreated quickly
From 8pm to 10pm
passers-by
A fruit-seller changed different places for business at 8pm and 10pm to meet more customers
OBSERVATION
Because Chengguan was on the main street, small vendors hide their business in remote parking lots. DAY 1 A snack-stall vendor moved to a better place at the suggestion of another seller
1. Unstable business location 2. Limited information channel]] INSIGHT 1. Chaotic environment 2. Unreasonable management
1. High requirement for quality, visual
decoration 2. Hard
INSIGHT
attractiveness and
to meet more customers INSIGHT
Name Age Transfer to 3 or 4 spots to meet more customers Collect information from other sellers No guarantee of income business at different districts...compare the income" information from acquainted vendors"
PERSONA WHAT WOULD HELP YOU TO DECIDE WHERE TO HAVE THE STREET-STALL BUSINESS? WHAT OTHER WAYS CAN STREET-VENDORS HAVE MORE CUSTOMERS? passer-by" Identity Working mode Behavior Needs Pain Points Lee 40 Non-local Experience Income Work time Stable income Information about surroundings Hard to choose best location for business Lack information about community and potential customers Name Age Identity Working mode Behavior Needs Pain Points Sandy 29 Local Experience Income Work time Connect with customers by online group Provide reservation for online customers Unstable business locations Chaotic environment Lack of attracktiveness Better environment Attractive advertisement Customer maintenance
INTERVIEW
STREET-VENDORS' PAINPOINTS
Have an unstable and chaotic environment
Current management is not reasonable or effective
Many street stalls tend to gathering at one spot
Street sellers ignore the responsibility of public sanitation
location for business
Know little about the city
Limited channels to get information
Want to reach out the target customer group
Poor conditions to maintain the customers
No channels to connect with customers
No platform to promote and advertise potential customers
City management High street sellers
HOW MIGHT WE HOW MIGHT WE
Provide stable space for street vending
Hygiene evaluation system
Arrange a reasonable distribution of street stalls
HOW MIGHT WE
Sort the customers by category
Provide platform to display the information
Provide the information about surroundings and population
Sort the stall locations by sales volume
Recommend the stall to potential customers
Provide a medium for advertising
CONCEPT 2 CONCEPT 3 CONCEPT 1
Providing a stable space and reasonable management
Gathering information about customers, surroundings
Providing a platform to advertise and interact with customers
• distributed at city management
Shared street stall WeChat Mini program
Online booking system
• selecting stall location
• booking street stall online
Street vending map
• Information about stall, community and customers
• Customrs: comments, likes and followers
Evaluation system
• Hygiene evaluation
• Service evaluation
HOW MIGHT WE
DEVELOPMENT
1 2
SYSTEM DESIGN 01 Information Architecture
WIREFRAME 1 1 6 6 4 1 Selection Wechat
Search 02 User Flow
Login Street stall info Navigation
USER TEST 2 2 3 3 4 4 5 5 6
Function QR code scanner Selecting customer
Function
Map—Stall Map—Community Map—Customer Stall schedule Ranking Me Feedback Feedback Me—customer Search
group Navigation
Selecting time range Real-time locating
UI SPECIFICATION 01 Welcome Hello Vendor serve as a street-vendors Vendors can and likes from
Design Visual Elements Font: Inter Color Palette Icon Elements CUSTOMER'S END
Logo
Vendor mini program will a bridge to connect street-vendors to customers can receive comments from customers.
Provide
Ranking & Booking
Ranking list can serve as reference to help street vendors pick a good
02
03 Welcome page
Map page
street vendors with helpful information about
and distribution of customers
community
VENDOR'S END
Face ID Recognization
Street vendor who booked a stall can use Face ID to unlock the stall, and then, the stall will be activated automatically.
Both vendor and customer can scan the QR code on the stall to open the mini program Provide street vendors with a design tool to customize signboard
Movable stall enables the adjustment of distribution
Location
CUSTOMER JOURNEY
SUPPORT PROCESS
DESIGN SKETCH SERVICE BLUEPRINT
Line of
Line
Line
FRONTSTAGE
BACKSTAGE ACTIONS
interaction
of visibility
of internal interaction
Real-name
REGISTERING 1 4 2 3 QR code scanning Customizable Signboard
Open mini program Login by wechat & get vendor Face recognition Launch wechat mini program Id Information Database
BOOKING
Search ideal area Select stalls by ranking Check stall info/schedule reservation Verify face id Design the signboard Go to stall Select timeslots Book wechat id
USING
After-use clean Check out Hygiene evaluation Feedback
Information about talls, surroundings, consumers Ranking list Stall status, basic info, schedule
Collect geo info and customers' info from registration
Rank stalls by sales Stall basic info and updated schedule
Available timeslots & price Booking Navigation Face Customize the signboard
Audio reminder bill and pay Check result and latest rating
Give a feedback
Calculate price
Receive booking orders
Send booking Set user's face id as the entry code
Third Party Map Database Database Third Party Map Face Recognition
Provide design tool
Send the audio reminder
Generate the bill and process the payment
Evaluate hygiene status
Receive feedback
Third Party Payment Camera Customer Service
02/ BLACK MIRROR
PRODUCT DESIGN | UX UI DESIGN
PERSONAL PROJECT | 2022
I think the design may be a medium that could convey value, information, and truth. I got my inspiration from a documentary of physical appearance. appearance frequently but the mirror would put more mental pressure on them. From this point, I design a mirror that helps users control their behavior and record their mood. In this way,
ANXIETY FOR APPEARANCE
55K
9.8
views
Ad
60% Expenditure
Market Scale 114.7 477.7 2005 2019 Billion YUAN
Anxiety
Unhappy
posts
million
on Weibo Chinese college students are anxious about appearance Plastic surgery companys play up the anxiety
slogan: Women without plastic surgery are not perfect enough.
on skincare, make-up and aesthetic medicine keeps growing.
Social media and photo editing apps stoke such anxiety
nourish the popularity of high-risk plastic surgeries Elf Ears Calf Reduction Surgery
with how we look Snapchat Dysmorphia
Beauty trends Attitude about cosmetic surgery Cultural moments Shameful • Body Dysmorphic Disorder problem Controversial • • Photo editing App become popular among female users • Internet celebrity beauty boom Era 1 2020 2000 2010 Era 2 Era 3 Increasingly acceptable • Popularity Plastic surgery • AR Filter everywhere Factors beauty standard • Media-portrayed idealized images • Beauty advertising • Unrealistic beauty trends • Internet celebrity effect • Celebrity effect • The “European face” and K-beauty • Self-image in postpandemic era Selfimage display
Basic information Gender Age of 18 - 25 26 - 32 Others 35% 50% 15% Appearance Anxiety comes from? 70% Yes 30% No anxious about appearance? About solution "I think it's helpful to reduce appearance anxiety" About behaviour "I have tried this to solve my appearance anxiety" 67.6% 32.4% Female
The prime cause for your appearance anxiety ... see beautiful pictures of others on Xiaohongshu (social platform) real...unavoidable comparison. Your solution to reliefe this anxiety social media photo editing App... Also I don't mind to have some cosmetic procedures that makes me look better in the camera Male (25) Occasionally Feel anxious frequently Student Real-life The prime cause for your appearance anxiety Care about opinions from close friend in real life... Other closer the relationship, the greater the How do you think about men's appearance anxiety Less beauty standards for men than women neatness of attire... never use photo editing 38% Sometimes feel anxious 46% Often feel anxious 16% above 37% judgement 47% 16% Low attention Comparison Social media content Beauty standard Negative comments Too much focus Photo editing 58% 62% 58% 70% Avoid focus on appearance 57% 64% Make-up and beauty treatments 56% 44% Cosmetic surgery 58% 54% 50% 48% 43% 28% nice-to have occasional use never must-have 50% 37% 8% 4% Take less 76% super anxious light anxious Look at the mirror more 70% camera more 56% Less social 49% More 28% Notice unsatisfactory facial areas through mirror Comments such as "You skin looks not good" Negative comments about looks Compare other people's good-looking photos online Compare retouched See advertisements related to 5 4 3 2 1 3.7 3.6
(28)
I have done a plastic amazing You need to have a plastic looks better to have a makeup Search information about Compare themselves with appearance Avoid some harmful judgements in social activities Ads, magazine image) Social media boosting • Self-loathing • Potential mental health risks • • No harmful judgement when appearance shown on media faces shown on SNS I am I feel I also need to do plastic I have to I have to I hope I can look • Perfectionism • • Fear of negative judgement about appearance • Self-loathing relief • Mood adjustment • Attention diversion • Self-loathing • Didn't realize potential mental health threats
Occasionally feel anxious
Entrepreneur Real-life
editing The
reason for you to avoid appearance anxiety I can
How to
anxious mood I
Female (31)
Video shooting for work
image towards Other The impact.
main
appearance.
moderate
became more accepting of myself, and the attention to appearance would also be scattered
Individual opinion and actions towards Sorting the similar points Core insights about user's intentions and needs Opportunity Map Final Insight External comments screening Anxiety monitoring Anxiety Relief Anxiety warning Avoid toxic contents Bathroom Mirror monitoring Wearable anxiety-tracking device App: mood management Dysphoric mood lamp Comments-reducing earphone lenses Eyewear to blur other's facial expression Possible solutions to relive appearance Internal External Online consultant Reduce sensitivity Third-person perspective mirror Beauty mirror E-card of "words I don't wan to hear" for personal social rules
Opportunity Evaluation SOLUTIONS Stop anxious mood in time and solve self-loathing effectively Reduce sensitivity towards watching Ignore bad judgment in the process of pursuing beauty Avoid / solve the anxiety caused by comparing Reduce the anxiety caused by media content Mirror monitoring: action control Wearable device: anxiety tracking Beauty mirror: Sign of anxiety: mood lighting lamp App: anxiety reminder and emotion managment Earphone: harmful comments screening Contact lenses: Sunglasses: block facial expression USER VALUES Design Concept Heart rate sensor Eyetracking by phone camera *Sensor preference *Product preference Rear camera on phone Product design three view • Prototype size: Iphone xs max • Texture: Mirror (photochromic glass) Mirror phone case *Eyetracking heat map preference • 8 Finger-touch sensor for heart rate on both sides Turing black • On both sides • Finger-touch • Mirror mode • Turing dark with user's anxiety increasing • Black mode
Information Architecture Lo-Fi Sketches Sign up Sign in Homepage Authorization 1 2 Authorization 1 2 Mirror page alerts on lock screen Heart rate facial area Record Eye tracking 3 4 5 6 3 4 5 6 Me page Testing Settings count down 10 10 Set up action control 11 warning 12 My Mirror 11 12
User Testing Design Elements Logo Color Icon Mood page Mood map Mood diary Relief tasks Relief reminder Remind of relief task when user's action is above the limit 7 8 9 7 8 9 Feedback At mood map page, there should have a link between daily assessment resultes and Anxiety warning settings. Nees a on lock screen, so that the user can still know it in the App Adjustment on lock screen Adjustment warning" button on mood page My Mirror Name Mirror Ideation from a mirror like a magic to know Tone and mental relaxation #F7CFCD #D19595 #DADCDA #343641 back calendar anxiety degree write heart previous eyetracking
Know your anxiety through the mirror Start page Start with login or address and password settings need to be can choose
right
Action For action (looking into the mirror) monitoring, this App can record the frequence and anxiety degree heart rate sensors on the phone case) and eye-tracking Home page
to have
now or later
In Mood section, users can access to a mood map recording each mindfulness exercises and Relief tasks
your
you to
Take control of
anxiety Help
manage your anxiety
Users can access to anxiety test and their reports customize Action control and Anxiety warning based on their preference
Storyboard
1 2
Mirror phone case Touch sensor monitoring heart rate when holding the phone to look into the mirror MIRROR MODE BLACK MODE Eye tracking by phone camera
Product in context
monitoring and
with her skin and feels upset and anxious
the sensor on both sides while holding the mirror
For different needs and to explore more usage scenarios for users to monitor and manage their products to be developed.
Smart mirror at home
"Looking into the mirror" action monitoring
Facial expression recognition
There is a reminder for user under to get some soothing exercises in APP to relax set in APP), the mirror will turn dark to help her control action
Wearable device package
Anxiety monitoring bracelet provides service
Comment-reducing earphones to help users clear harmful comments in social activities
Anti-watching eyewear to help users avoid uncomfortable gaze in public
EAT BETTER
UX UI INTERFACE DESIGN
PERSONAL PROJECT | 2021
I believe design can serve people solve problems and make their life more convenient. The purpose of this design is to help people who pursue a healthy diet and want to eat better but don’t have sufficient knowledge about food nutrition and have difficulty finding the right food for themselves.
I designed a mobile APP that includes health testing, diet planning, health monitoring, and food material purchasing. The Eat better APP is like a one-stop option for users to get a customized health diet plan
INSPIRATION
03/
BACKGROUND LIGHT FOOD CULTURE
01 WHY IT IS ATTRACTIVE
Well-balanced
02 PHENOMENON
LIGHT FOOD TAKEAWAY
FOOD WASTE SOCIAL DEMAND
03 DESK RESEARCH
Cooking
Light taste
in a healthier way with less flavors and oil.
Providing
a balance of 7 essential nutrients.
Serving
factor
Consumers care about food quality and nutritional value Most
buying food
online market
convenient and affordable. Post-90 and
are the
consumer. Healthier
Better lifestyle 54% of
women think they need
lose weight. Food safety issue Subhealth Food quality Lifestyle Fitness craze Fad diet Food concerns
Poor
Health demand
media influence
Small portion
in small portion to meet basic calories need Driving
Main purpose
think
from
is
post 80
main
diet Weight loss
Chinese
to
Perception 84% positive view I would like to have a light diet. I think I need a light diet. Light diet makes me healthier. shortcomings
nutrition Mingy portions Body anxiety
Social
Shenzhen.
PERSONA
Accoding
Chris, 26 Office worker Medium
Pain points Pain points
For light food take-out consum ers, the main pain point is about choosing food, more detailed pain points need to be analyzed.
to the result of questionnaire survey and interview, I created consumer profile to figure out consumer insights.
For home-made light food consumers, the main pain point is about food buying, prepar ing and food waste
Food expense monthly Light food consumption Exercise frequency Cooking frequency Takeout food Food expense monthly Light food consumption Exercise frequency Cooking frequency Takeout food Motivations Improve health. Have no time to work out but still want to keep fit Needs Tailored eatingEasier cooking Convenient buying Food waste as buying too much One meal takes long time to prepare Hoarding harms food quality Not easy to select good recipe and right kind of food Not familiar with own nutritional demands Lack of professional dietary guide Limited options for light food takeout Influenced by wrong information on internet Needs Nutrition evaluation Dietary suggestion More options
Following a strict diet for fitness Special nutrition needs
Motivations
consumer
takeout food delivery time...pick nearby. Then, comparing quality and taste. ingredients of restaurants food
have to estimate by myself…
requirements.
Food
I
one portion is not me... can’t meet my daily
nutrition demand is based on weight and daily exerlisten to personal trainer
CONSUMER JOURNEY MAP
Through consumer reasearch, I analyzed doings at each stage of a consumption experience and summarized the user’s feelings and existing problems in the overall process.
Phase
Planning Searching Ordering Receiving Consuming
Search home-made salad recipes for dinner on Xiaohongshu App
Open Meituan App to search salad takeout nearby
Compare distance, rating and price
See menu and ingredients
Doing
Go home late from work Change her mind to order a ready-made salad instead of cooking
Recognize that most light food restaurants nearby she have ordered before
Find a satisfying food
Wait 30 mins for food delivery Calculating the calorie phone
Collect the food and unpack it Find she
Order and pay
“I can’t count the calorie accurately.”
Thinking
“I don’t have time to prepare food for cooking”
“I have order this salad many times, so I want something new and different.”
“I don’t know whether the salad is low-calorie”
“I don’t like to wait for a long time.”
“I need to pick some veggies like.”
Feeling
Problem
Lack of a diet plan
Cooking takes much time
Limited option for food takeout
Food infomation is unknown Food delivery takes long time
Consumer is uncertain about personal nutrition demands Too much plastic used in takeout package.
inconvenient calories and Ingredients can not be modified
Food waste
Consuming Reviewing
the calorie on the
Find there are some veggies she don’t like in this salad.
Taking out the trash after dinner
Leave a food review on Meituan App
PROBLEM DEFINITION
Lack of a diet plan
Users
Cooking takes much time
Unknown nutritional needs
CASE STUDY
pick out veggies I don’t
inconvenient to record and nutrition
Ingredients of takeout food be modified
waste
Food evaluation is too general
Too much plastic used in takeout package
Food waste Food supply
Food information is unclear Food delivery takes long time
Ingredients of takeout food can not be modified
Limited options for food takeout
customizable diet plans, convenient buying and delivery service.
Not easy to track food energy and nutrition
Evaluation is too general Diet evaluation
Health Chinese food takeout with simple food combining and visible nutrition tracking.
Nutritional needs evaluation
Personalized diet plan
App for food energy calculation and daily health tracking providing lots of food data references.
Customizable menu
Key points: Key points: Food suggestions
Easy cooking
On-demand buying
Diet tracking Key points:
Energy calculation Dietary recommendations
Easy-to-cook food Daily diet tracking
IDEATION CONCEPT DEVELOPMENT
User’s health goal achievement
Healthy Eating APP
A integrated App provides the user personal diet planning, online food buying, cooking guide, daily diet tracking, nutrition assessment.
Health testing
Once the user upgrade the membership, they can have further analysis about health conditions and distinctive nutritional needs through 2 ways.
Percent-body-fat test - body fat, metabolizability Genetic test - nutrition needs, disease risks
Easy-to-cook food
Provide fresh and ready-to-cook food materials, including clean and chopped veggies, prepared meat and small packed seasonings, sauces, oil.
know nutrition demands
information is
Can’t modify takeout food ingredients
food takes
Lack of personal diet plan Don’t
Food
unclear
Cooking
much time Food evaluation is too general Online nutrirtional needs evaluation
User’s health datas Health testing Nutrition information Online food recipes Customizable shopping list Food preferance
Eating habits Tailored diet plan Health goal
Easy-to-cook food materials Nutrition tracking
SYSTEM DESIGN
INTERFACE
Sign
An user testing for Lo-fi sketches conducted with 4 simulated
The functions for advanced/premium members are not different enought.
Lack of achievement display, such as points and day count.
A notification can be applied to remind user to finish daily record.
Health goal page is not obvious enough.
Add My Health Report and My Nutritionist pages
Health goal page: Show real-time health datas by a progress bar with Before Recipes Recipes Recipes
up Menu page Plan page Record page Me page Sign in Home page
Membership Rewards points: gaining points and upgrading the membership by Now SKETCHES USER TEST If there’s no light food plan for today, users can check the next food plan. Daily food & exercise record Collected recipes
Points reward by daily Membership upgrade
weekly marks.
Trend: AI-based diet
AI will become a daily essential in selecting the right nutrition for distinctive fitness and well-being and individualized nutritional meal planning.
Perception about this design
After this project, I knew more knowledge about AI technology. I think AI-driven technology can be applied in this design that will make tracking food energy and nutrition more convenient and accurate.
My
1 2 3 4 5 6 7 STORY BOARD
simulated users to get feedbacks pages by finishing daily record with
daily task Modify the weekly menu and shopping list then order the food Input basic health data and set a health goal Finish daily food record and track goal completion Conduct a PBF test and genetic test when upgrade to advanced member Receive the health testing reports
diet plan updates after health testings
Receive the food and cook easily
DESIGN
Sorting, searching, filtering tools
User can check the daily menu and arrage the weekly food schedule
Customize the shopping list Track the order status
Recommended food for different demands
By searching and sorting by difficulty and food calories to cuisines.
Users can like and collect recipes
Icon
testingChopsticks
CONCEPT Logo Color
Ideation Genitic
home menu record me location edit calendar membership sort collect add back
different health
by cooking time, calories to find satisfied
tools recipes
Finish everyday food record to earn points
Select personal datas list
Daily health monitoring and weekly diet report
Advanced analysis supporting by health testing and nutritionist service
