SIWEN FANG UI/UX DESIGNER PORTFOLIO | 2019
1
19 PAGE
May - Jun 2017 APP - Incorporate Augmented Reality(AR) technology in the architecture industry.
31
No.3 Unmanned Clinic
47
Serve for practitioners/ students/faculty in design field.
Oct - Dec 2018 PAGE Human - Computer Research about future health care.
Oct - Dec 2012 Strategic Design to solve environmental problems in urban design.
No.2 Cloud-Co Model
3 PAGE
PAGE
Serve for people with loneliness in cities.
45
No.4 SPERO STUDIO
No.1 CONNECT July - Aug 2018 UI/UX Design - Create a platform to match the right mate.
PAGE
CONTENT
Feb 2019 - Present Website design for the establishment of a branding design studio. (In progress).
No.5 Aladdin’s Carpet
Create a product to help improve the environment in place of worker’s labor.
2
Siwen Fang Who is She? Siwen Fang is a landscape designer working in an international architecture firm. She got her master degree in design school in the US.
Strength
- Design & Scientific Background - Logic Design Thinking - Data Visualizing - Analysis & Research - Good Comand of Diversified Software (2D&3D) SiwenFang622@gmail.com +852 6889 4791 Master of Landscape Architecture School of Architecture The University of Texas at Austin TX, USA
She stepped into the UI/UX field when back in the US she helped the firm with an APP design. Later, she taught herself about UX design. Apart from 7 years of study in architecture school, she had some research experience about biology when at college. Both design and scientific backgrounds lay a solid foundation for her to become a UX designer.
No.1
ONNECT
Create a platform for matching the right people accordingly.` Increase the possibility of meeting people. Categorize users based on users’ social demand. Effectively matching.
Pains - Security of users’ profile - Users will waste a lot of time searching without starting a conversation - Dating App is not commonly accepted - Existing Dating Apps are intended for heterosexuality only Gains - Users shall have options according to their demands before starting using the App - There will be face ID check to compare with the profile images to decrease the risk of matching a fake profile - Connect creates a platform for not only heterosexuality but also homosexuality
3
PROJECT BRIEF
Connect
Introduction
Basic Information DEFINITION
MY ROLES
DATE
METHODS
LEARNED
UI/UX Project UX Research Social Media & Gender Relationship
UI/UX Designer Researcher
Nov-Dec 2018
Research Persona UX Design & User FLow
Information Architect UI Design
What is Connect?
Design Process
Rethinking Intimate Relationship for the Future in Gender Relationship Background Research -Background Analysis
User Research -Research Analysis - Opportunities
Market Research - Competitive Analysis
Definition -Design Features - Design Principles
Target Users -Young people looking for building new relationships.
Interaction Design -Information Architecture - Wireframe
Target - Categorize Users - Relieve Social Isolation - Shorten the Time from Matching to Chatting
Future Steps -Profitability
Prototyping -Typical Feature - UI Design
UX Design -Persona - User Flow
4
BACKGROUND ANALYSIS THE FACT OF LONELINESS
AVERAGE NUMBER OF FRIENDS/PERSON (PHYSICALLY MEET IN PERSON)
Connect
Background Research
FREQUENCY OF LONELINESS
5
BACKGROUND ANALYSIS TIME SPENT ON SOCIAL NETWORKING
Connect
Background Research
MOTIVATIONS FOR USING SOCIAL MEDIA
6
USER RESEARCH
Connect
User Research
USER QUOTES
ANALYSIS
to find a boyfriend for a serious relationship “ Ibuthope have no opportunity to know new people outside my circle. “
CHALLENGES Inefficient Match Users with different social demand match only based on photos.
Lack of Security
I am a college student and very interested in play“ ing the guitar and video games.
I would like to meet people with same interest and play together.
“
Users will use fake photos or information as their profile, which will potentially cause online fraud.
Not Widely Acknowledge/Accepted by Societ At the moment, people commonly equal online dating to hooking up.
OPPORTUNITIES New Way of Dating/Meeting People
am looking for a long-term / “ Icasual relationship but not marriage. “
In large cities, people always live on the go, and it becomes harder and harder to broaden friend circle. Online dating/ meeting creates a new opportunity.
for to find someone “ Itoamchatlooking with online when I am
alone and do not want to do anything.
“
Potential Market to Make APP Dating/Meeting Commonly Accepted by Society
Once having good feedbacks from the users, the notion that “dating app = hooking up” will diminish.
A Background Check System of Users’ Profile Optimizing the background check will decrease the possibility of online fraud.
7
COMPETITIVE ANALYSIS
Connect
Market Research
t
Cus
tom
izat
ion
rac
Int e
z
Instan t an
tio
ic ssif Cla ation
n
ori teg Ca
Categorization means users have the ability to select what kind of mates they want to find in the application.
ization
Localiza
Social
tion
ation
an
ag
cy
em
riv a
en
P
t Quality
Secuirity Average value of competitive Apps in the market Value of “Connect”
M
Compare to similar APP in the market, A majority of Applications do not have categorization service and management of the profile review system. In that sense, there is a potential in the market.
eit y
ien Effic
Customization means the system will learn about users’ demand and gradually cater to users’ taste through machine learning.
Management means the ability to manage users’ information and guarantee the safety of users’ privacy and reduce the possibility of online fraud or false.
8 6
DESIGN FEATURE & PRINCIPLE
Connect
Definition
DESIGN PRINCIPLE
Core Modules
1. Imprvoe Communication
1- Effective Interaction
2- Users Management
Encourage Users to Communicate. Communication among users play a vital role in the APP. There should be an intelligent monitoring system will improve the frequency of interaction between users. (i.e. chatting window will disappear if no communication happens within 36 hrs.
Categorizing users by social needs.
2. Stimulate UGC
1.1- 4 Groups of Mate Matching
Users can choose which type of mate they want to find after registration
2.1- Face ID check
Not filling a personal profile is not allowed to be registered. Face ID check will be done after upload personal photos.
Encourage Users to Communicate. The APP is designed based on User Generated Content. The APP should lead and encourage users to upload or post their own images to avoid online fake information.
3. Customized Service
1.2- Reduce the time between matching and chatting.
Maximum avoid the people online interact with people offline.
2.2- Users Evaluating System Users are supposed to evaluate every mate they match (AI included). High score users can get a bonus.
Learn More about Users. Everyone has his own preference and frequency of using the app. It is important to learn more about users through machine learning.
9
INFORMATION ARCHITECTURE
Connect
Login
Basic Features
0.1
0.0
Sign up
New Features
Interaction Design
FaceID Check 2.0
1.0
3.0
4.0
Categorise Home
Message
Me
4.1 1.1
“Online Soulmate”
1.3
1.2
“Buddies”
View & Edit Profile
1.4
“Fun”
“Chat Room”
4.2
Preference 3-6 Selections/Day
My Communities
Other Communities
Recommend (Profile Match)
Random Match 4.3
Match (Both Side Like Each Other)
Moment Posts
Pick & Match
Chatting with AI/ Online Users
Help & Support
4.4
AR Dating
Followers/ Following
Settings
10
WIREFRAME (EARLY SKETCHES)
Connect
Interaction Design
11
PERSONA & STORYBOARD
Connect
UX Design
12
PERSONA & STORYBOARD
Connect
UX Design
13
PERSONA & STORYBOARD
Connect
UX Design
14
PERSONA & STORYBOARD
Connect
UX Design
15
USER FLOW
Connect
UX Design
Login/Register
Type1
Face ID Check
Face ID Check
Type2
Categorize Users
Type3/4
“Me” Page
Message
Chat Window
16
DESIGN FEATURE
CATEGORY
Connect
Prototyping
USER TYPE
USER TYPE
USER TYPE
17
FUTURE STEPS
Connect
Future Steps
For users who want to seek for buddies with same interests within the same cities. There is the future profit potential in collaborating with Gyms & Restaurants. For foodies/sports lovers, they can connect the buddies in the Application and go to those restaurants/gyms with certain discounts.
FILTER
SOCIAL DEMAND
EFFICIENT CONNECT
FACE ID CHECK
18
19
No.2
Cloud Co-Model Pains - Users will spend a lot of time making physical models - It is hard for the design firm to make a revision of the physical model after clients’ comments Gains Cloud CO-Model creates an innovative way of showing the design process in 3d. - Easier to make revision - Effective to make models - Economical
PROJECT BRIEF
Cloud Co-Model
Introduction
Basic Information DEFINITION
MY ROLES
DATE
METHODS
LEARNED
APP Design UX Research Augmented Reality
UI/UX Designer Researcher
May-June, 2017
Research Prototyping
Competitive Analysis APP Design
What is Cloud Co-Model?
Design Process
Cloud sharing architecture model through AR technology. Background Research -Problem Definition
Market Research - Project Canvas
System Map -Design Process -Work System
Target Users
UX Design
-Design firms & developers
Target - Avoid the inconvenience brought by physical model - Reduce the cost of the design process
- Persona & Storyboard -User Flow
Future Steps -Multiple Platforms
Prototyping - UI Design - Mock Up
Interaction Design - Information Architecture - Wireframe
20
PROBLEM DEFINITION
TIME-CONSUMING
Cloud Co-Model
Background Research
MORE ROOM
HARD TO MODIFY
21
PROJECT CANVAS
Cloud Co-Model Market Research
Goals
To provide design firm a new way of showing design in 3D.
To help reduce to cost of the design process.
To help developers/ clients of design firm better understand the design process in 3D.
Users
Designers in Arhitecture/Design firms.
Clients of Architecture/Design firms.
Design School Students & Professors
Users Benefits
To save time and space.
To keep pace with high technology in the architecture industry.
To avoid the inconvenience of carrying physical models for long distance.
To make it easy to archive the model for future use.
22
SYSTEM MAP
Cloud Co-Model
System Map
Senior Designer
Improve
Project Model AR Viewing
3D Modeling
APP
Project Model AR Viewing
Create
Project Sharing
The system map shows how the APP/Website works. Designers/ Students will share the project model on the website/APP. All the users can view the AR model through logging into the APP. At the same time, using the same account in the website, both designers and clients can interact with each other. Eventually, achieving the goal of cloud model sharing and viewing by augmented reality.
Client/Professor
Designer/Student Project Model AR Viewing
Interact with Client/Professor Upload Feedback/View 3D Model Interact with Designer/Student
Main Use Flow Potential Developed Use
23
PERSONA & STORYBOARD
Cloud Co-Model
UX Design
Pain:
Age:
“ Physical model needs more space to put.
Physical model is difficult to carry if my boss wants to see the model.
51
Roger
Working Experience: 27 Years
Designer
Occupation:
Design Principal
After the presentation, the model is useless and I need to find a way to deal with the physical model (either recycle them or keep them in our storage room)
“
Gain: Pain:
of the time, our clients are not in the same city. For most of “ Most the presentation to the clients, I will fly to their office with the physical model.
- Want to find a new way of view the project 3d but with more efficiency. - Hope to make further revisions to the models even after the meeting with designers.
Some of my previous projects, we asked local model making firm to make the physical model for us. It is convenient to me but sometimes, the model does not meet my expectation.
“
Gain:
- Want to find a way to make it more efficient for the design process - Want to use new technology i.e AR, VR, etc, to be used in the architecture industry - Try to avoid taking the physical model in a long distance - Try to lower the cost and wants to make physical models in house
Age:
42
Bob
Working Experience: 18 Years
Client
Occupation:
Project Manager
24
USER FLOW
Cloud Co-Model
UX Design
OPEN APP
REGISTRATION
Enter the APP - Home Page for 2s.
If having an account, users will log in.
Different users will register in different methods
HOK staff
Click “get started” button.
Non-HOK staff
OPEN APP
LOGIN
SIGN UP
25
LOGIN & SEARCHING
USER FLOW
Cloud Co-Model
UX Design
G
MODEL VIEWING
Projects that the users are working on will appear on the main page after logging in.
For different users, the projects showing on this page are different.
Users should aim the camera on the map and the 3d models will appear.
For adding one more function of this page, users can adjust the settings of the model (i.e. different layers, rendering effect, etc.)
EDIT SETTINGS MENU
SEARCH BY PROJECT NAME/NUMBER
AUGMENTED REALITY VIEWING MODEL
RENDERING SETTINGS
26
INFORMATION ARCHITECTURE
Cloud Co-Model
Interaction Design
Users’ Action Information Popout
Login/Sign up
Home Log in
Profile
Setting
Preview Project
Account
Register
Project under the user’s account HOK staff
Non-HOK Staff
Privacy Augmented Reality Security
Profile Information
Clear Cashe Logout
27
APP FLOW
Cloud Co-Model
Interaction Design
Start
Login Register
Home
Profile
Setting
Account Name, Email, Password
Search
Edit Privacy
Preview
Preview Security
Start the viewing
Start the viewing
Clear Cashe Logout
28
UI DESIGN
Cloud Co-Model
Prototyping
APP MockUp Link: https://vimeo.com/218040812
USER CLASSIFICATION
PROFILE
AUGMENTED REALITY
29
MULTIPLE PLATFORMS
IOS/Android Mobile Phone Cloud Co-Model APP will be promoted to the mobile phone to make it more convenient to view the model at any time.
Cloud Co-Model
Future Steps
30
31
No.3
Unmanned Clinic
PROJECT BRIEF
Unmanned Clinic
Introduction
Basic Information DEFINITION
MY ROLES
DATE
METHODS
LEARNED
HCI Research
Researcher
Oct-Dec, 2018
Research UI Design
Interdisciplinary Innovation
Interaction Design
What is Cloud Co-Model?
Design Process
Cloud sharing architecture model through AR technology. Ideation - Problem Seeking - Scenario Observation
System Map - Design Process - Work System
UX Design - Persona - Design Structure - Taskflow Wireframe
Target Users -Patient
Target - To standardize the process of seeing a doctor in a hospital in order to relief the pressure - To give more time for doctors with patients with more serious disease
Usage Scenario - Space Usage
Human-Computer Interaction - Interface Display
Definition - Design Concept - Design Module
32
PROBLEM SEEKING
Unmanned Clinic
Ideation
Problem Seeking
Current Scenario Observation
Appointment
APP/Website
Registration
Self-help machine
TIME-CONSUMING Consulting
Examination
Equipment
Phone
Traditional labor service Modern digital service
Payment
Pharmacy
With the popularity of technology used in the service industry, the traditional way of people-people has been transformed into human-digital.
BAD EXPERIENCE
33
SYSTEM MAP
Unmanned Clinic
System Map
Diagnosis & Treatment
User (Patient)
Measure the basic index of the body (Blood Pressure, Heart Rate,etc.)
Synchronizing Data
Output the result and suggestion
Choose suggested doctors
Online System
Doctors’ information for users to choose
Doctor
Nurse
Ask for help if needed
Go to the check-up center on a regular basis to assist
Online Diagnosis
User (Patient with a more serious disease)
Information Flow
Complicated Results Data Transfer
Monitor
Unmanned Clinic
Check-up Room
The system map shows how the “Clinic” works. Firstly, users will input the data information about their body check into the equipment. Then users should follow instructions and get the output & suggestion for further step (whether they should see the doctor in person or not).
34
Unmanned Clinic
PERSONA
Ideation
Situation:
“ - No occupation and no medical care Age:
66
Dalong
Occupation:
Retired
Place: Xinyang, Henan PR, China
Teacher
- Live in Wuhan. I take care of my kids at home and my husband works to cover the living expenses of our family. - Only go to the hospital if I don’t feel well since it cost a lot to see a doctor. I prefer to choose to take the medicine or go to community clinic instead. Pain:
Situation:
Medical Insurance of seeing a doctor “-- Have Live in a small town with wife
- One of my experiences of seeing a doctor before. I had a stomachache for several weeks and went to our local hospital. The doctor said there was no equipment in their hospital and asked me to go to the hospital in capital city. I finally traveled around 400km to see the doctor.
“
“
- Concern about potential diseases without physical checkup on a regular basis. Gain:
- Hope to find a clinic easy to go and economically for our family to know more about my body situation on a regular basis.
Pain:
- Lack of medical equipment in the local hospital/clinic. - Lack of doctors Gain:
- No need to travel far to see a doctor and get the diagnosis. - For basic disease, no need to see the doctor in person, which makes the process faster.
Age:
Xiaorui
38
Occupation: Housewife Place:
Wuhan, China
35
Unmanned Clinic
PERSONA
Ideation
Situation:
Age:
in a hospital in Beijing. “ -- Work Every day I need to see hundreds of patients. Among them, 24
Alice
Occupation:
Freshly Graduate
Place:
Assistant Designer
Shanghai
around a dozen need to have a further checkup in order for me to finally diagnose. But most of them had very basic health problem. I often hear some complaints from patients that I am not patient.
“
Pain:
- Crowded in public spaces in our hospital.
Pain:
Medical Insurance “ -- Have Don’t have time to go to the hospital
- Always too crowded and need to wait hours for only a few minutes to see the doctor - Would rather buy some medicine in a drugstore instead of going to the hospital.
“
Pain:
- Get a lot of complaints that I didn’t spend time equally on every patient, and I treat them unfairly. Gain:
- Hope to spend more time on those patients with more serious disease. - Hope to get understood by patients.
- Waste a lot of time to go to the hospital and wait in line. - After having a series of complicated checkups, being told I have a cold.
- Don’t like the atmosphere of the hospital. Tend to become nervous in the hospital. Gain:
- Want to get accurate data of my body situation in a less tedious way.
Age:
Bing
34
Occupation: Place:
Doctor
Beijing
36
DESIGN STRUCTURE
Unmanned Clinic
UX Design
Traditional Process Step 1
New Technology Design Structure Step 3
Go to Specific labor window to make an appointment
Go to the Examination Room to check the body
Pay
Go Back to the Doctor’s
Go to Doctor’s Office to get a diagnosis
Go to Pharmacy for medicine
Step 5 Get Diagnosis & Prescription from AI system.
Step 4
Step 2
Step 5
Step 1 Input Personal Info (i.e. name, date of birth, gender).
1. Which Department? - Physician 2. General/Special Clinic? -General 3. Which Doctor? - Dr. Hu
The Design Structure is to imitate the traditional labor window process because users are familiar with this communication logic.
Step 2
Measure Height, Weight, Blood Pressure, Heart Rate, Body Temperature.
Step 5 Further Examination for Final Diagnosis
The traditional process requires users to go to various places and needs more labor in order to make the service work.
Pay
Measure Basic Data of the Body.
Step 3 Talk to the AI system about the symptom.
Step 4 Further Examination according to AI system’s Suggestion. Blood Tests/Urinalysis/ Electrocardiography/XRay Scan/CT Scan/MRIs, etc...
Step 6 See Doctor Face to Face. AI System will suggest the right doctor for the user to pick.
37
TASK FLOW WIREFRAME
Unmanned Clinic
UX Design
Autoflow into initial page
Pay tool
Select
Department
What can I help you?
Select
Initial Page Locate Demand AI System of Symptom Inquiry Analysis Examination Data Input into System Select
Pay Select
Confirm
Initial Diagnosis Prescription/Suggestion Doctor Information
Profile/Archive Basic Information Input State
Select Doctor Check Information & Confirm
OK
Confirmation
38
DESIGN CONCEPT
Unmanned Clinic
Definition
DESIGN CONCEPT Service Station
=
Human-scale space Shorter routes Comfortable facilities Direct to user’s demand
Assembled Cube
+
AI System
39
DESIGN MODULE
Touchable Screen
Examination Equipment
Unmanned Clinic
Definition
Assembled Cube
+ Health Care Equipment
Intelligent Options
40
INTERFACE DISPLAY
Unmanned Clinic
Human-Computer Interaction
42
FUTURE SCENARIO
Unmanned Clinic
Scenario
43
FUTURE SCENARIO
Unmanned Clinic
Scenario
44
No.4
SPERO STUDIO
Web Design Feb, 2019 - Present (In progress)
SPERO
Co-Founder: Ellie Shariff Siwen Fang
46
47
No.5
Aladdin’s Magic Carpet
PROJECT BRIEF
Aladdin’s Magic Carpet
Introduction
Basic Information DEFINITION
MY ROLES
DATE
METHODS
LEARNED
Urban Design Product Design
Designer
Oct-Nov, 2012
Urban Design & Planning
Software Skills
Strategic Design
What is Aladdin’s Magic Carpet? Aladdin’s Magic Carpet is the metaphor of the product design, aiming at solving the problem the city is facing. The design takes the workers as a research object. From the perspective of liquidators, the design tries to solve the problem of the city.
Design Process Composite Research
Ideation
- Existing Condition - Problem Definition
Aerial View - Overall Rendering
-Design Concept - Design Evaluation
Usage Scenario - Scenario
Product Design - Design Details
Infographic
48
PROBLEM DEFINITION
Aladdin’s Magic Carpet Composite Research
Conclusion: Demand for the sanitation worker Each area, the distribution of workers is less than the demand.
Garbage distribution
city partition
Commercial District
Scenic Area
Residential Area
In the past 10 years, The change in the city’s sanitation worker
3,400/1,900 = 1.7894736842
12.50/5.54 = 2.2563176895 Current situation
Actual demand
SANITATION WORKERS BETTER LIFE ?? LIVING IN A CITY FULL OF RUBBISH!
ACCIDENT
WHERE IS A PLACE OF NO RUBBISH?? DEATH
49
DESIGN & EVALUATION Performance Contrast
Aladdin’s Magic Carpet
Ideation
Hydroskimmer
Vacuum Cleaner
Sensibility Instrumentality Comfortableness Feasibility
Airflow
Approaches
Physical Cases
Floating
Vacuum
Pressure
Hydroskimmer
Vacuum Cleaner
Advantage of the design 1. Dexterous, easy to walk around 2. Can cross benefit 3. Simple to operate
Advantage of the design 1. Have high movability 2. High efficiency 3. Simple to operate
50
DESIGN DETAILS
Aladdin’s Magic Carpet
Product Design
51
SCENARIO
Aladdin’s Magic Carpet Scenario
52