Page 1

SIWEN FANG

UI/UX & LANDSCAPE ARCHITECTURE 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


Profile for Fancy_Falcon

UI/UX Design Portfolio by Siwen Fang  

UI/UX Portfolio (2016-2018)

UI/UX Design Portfolio by Siwen Fang  

UI/UX Portfolio (2016-2018)

Advertisement