Portfolio

Qin Wang Huazhong University of Science and Technology User Experience Design 2013-2016

University College London Human-Computer Interaction (HCI) 2017-2018

1

UX Design Intern （ SAP）

2017

University College London Creative Design Intern （ GoPro）

UXPA Award （Top 50） UX/UI designer （ V-STAR） Design Patent （C.P Remote Controler）

ABOUT ME I have a passion for revealing user frustrations and solving their problems. This makes me feel a sense of achievement.

I feel par ticularly excited when I find that my designs actually help people and change their life. That is what I always persue.

2016

DID Award (Dongguan Cup) （Yayuan Studio） Graphic Designer （Student Community Service Center）

2015

Assistant Designer （Student Affairs Division of HUST） 2014

Huazhong University of Science and Technology (HUST)

2013

1

1

LetStorm

Product Manager & UX Designer

LetStorm is a platform for Illustrators and amateurs to create illustrations in a series. It contributes to making the process of practicing drawing more attractive, and connects illustrators of different levels.

3

CONCEPT

User Research

Problems

Although many people have a passion for illustration, a large portion of them lack motivation to practise. Therefore, we tried to figure out how to make them move forward more easily in an interesting way.

We learnt the habits when they practice drawing and the common process of practicing by analysing the conversations with 19 interviewees who are either illustrators or amateurs. We end -ed up discovering the three stages.

Questionaire

Based on the information that we collected, I made a questionaire to verify them. In addition, we found the websites that illustrators usually use which helped us do the competitive analysis.

Popular Illustration web/Platform

Functions that are most used

By analysing the result, we extracted the functions illustrators need while rarely used by people who merely like art but cannot create pictures.

4

Define Requirement

Personas

Interviewers can be summarised at following four types.

Challenge

Let people know you

Get inspired and learn

Find a partner to win bonus

Compete with others and learn from them

Mark Age: 34 Career: IT Mark always feels pressure during work time. Drawing pictures makes him feel relaxed.

Infomation Architecture

Stephen Age: 20 Education: Freshman in University, major in product design

Amy Age: 23 Education: Postgraduate, major in Social Media

Stephen is obsessed with illustration, he has had mountains of imitation works . However, he finds it hard to create his own original work.

He does not know where to start.

She has accumulated a bunch of excellent works during u n i v e r s i t y. I t 's t i m e t o g e t herself a job. She hopes to gain more popularity among professional illustrators and recruiters to get into a good company.

LetStorm

Introduction

Upload

Best this month

Painting Sequence

complete the picture

Continue the Story

Challenge

Continue the Style

Vote

Me

Reconmand Group Member

Message

Info

5

Scenario

Workflow

Write Basic Info

1. Amy drew a lonely

man in an empty city a s t h e b a c k g ro u n d on the screen . Then she uploaded it to the Letstorm website and started a sequence.

2. Bruce downloaded A m y 's p i c t u r e a n d added more friends of the boy on it. Then he uploaded it to the website.

3.Corel downloaded Bruce's works and added a lot more people, which conpletely changed the picture.

Challenge

1. Amy drew a little

2. Bruce decided to

3. After Bruce work, Corel

1 . A m y drew her

2. Bruce i m i t a t e d

3.After Bruce work , Corel then drew Hitler's

boy who saw a tiger getting a fish.

head connected to a dinosaurs body in the picture.

continue the stor y: The boy wanna tr y fishing.

Amy's style and got his gir friend's head growing up from a pretty insect.'s body.

then gave it a sad ending: the boy lost his fishing rode whilre trying to catch a fish.

face to a funny chicken body.

7

Wireframe( Web ) Home Page

My Illustrations

See more pictures

View Amplified Pictures

Upload

8

UI (Web)

9

Wireframe (APP）

LetStorm

Slide to the Right

Slide to the Right

My Subscription

10

UI (APP)

11

Usability Test We did the test to ascertain whether it was over-designed and if we missed anything else that was important for users. Watch the demo>

Iterations Throughout the three iterations ,the UI and layout are improved based on the feedback from subjects.

In the newest version, the platform reconmands team members who share the same interests as the user visting the website. Those users can now form a team to create pictures. Users are allowed to challenge their peers by replacing the picture with their own in sequence.

Online photoshop simplified the steps of uploading pictures, which improved the user experience.

12

ParentBump CHI COMPETITION ParentBump is an app that can generate the best weekly events plan based on calculation of several users' locations, tiemslot and interests, which spare parents the time filtering events. It also introduces bump during the events as an ice breaker, for conversations,

The picture of phone: is from pixel picture.

1

I. USER RESEARCH QUESTIONNAIRE

PERSONA

We designed a questionnaire to gain a better understanding of our target users. I summarised most of the data into persona combined with the transcripted data from interview.

INTERVIEW We did a semi-structured interview with parents in Cameden. I talked to two of them, one of them is a mom work actively among different parents volunteering organizations, she brought up the concern about other parents' background. While the other one is a Italian mom, who moved here yeas ago, and feel isolated. Which provide interesting perspectives and reference for the later design.

As we analyze the data gained from the ineterview, I used semantic method to code the two scripts I wrote during the conversation.

" You don't know what kind of people you are meeting, I met parents at events, who allow their children to carry guns, then I prefer my child stay away from those kids."

" Even though I have moved here from Italy for 7 years, I still feel loneliness. I don't know many parents. Everyone just pick up children from school and leave"

2

II. IDEATION BRAINSTORM Centered around the challenges we discoved previousely, I came out three ideas: Calculate best location for the events based on multiple families to save their time for searching. 2.A icebreaker to generate new colour by touching each others' phone, whihch appear along with incentive such as coupon. 3.A collaborative game require several families to play together.

WORKFLOW After combining the first two main ideas with other ideas, we used affinity diagram to sort out the user flow.

STORYBOARD Combined with the scenarios, the storyboard is designed as a guidance to the desgn context.

1.Input location ,timeslot and inetrests of children.

2.Received a notification about customized events.

3.Accept the events.

4.Go to the event and bump to other parents.

5.Got coupon and have another meeting with the family.

3

III. RAPID PROTOTYPE WIREFRAME+RAPID PROTOTYPE As we got stuck with several proposals and could not decide which one was superior, we decided to produce a prototype for each solution to be displayed to users, and see their feedback.

Hence, I designed the rapid prototype for the user testing. It displayed how users can change the customizing presettings, including available time, current location and price. Bump function is associated with colours, each touch of two phones

IV. EVALUATION > ITERATION EVALUATION Most users prefer to have more control over the events selection, hence the function of 'editing time, location and inertested' should be more visable. The colorbump on the one hand has a complex rule, and on the other hand, made it feel more like a game, which is not attractive enough for parents.

ITERATION Based on the feedbacls user provided, the hi-fedelity prototype is then rendered. I redesigned the layout and workflow after the first hi-fi mockup.

In stead of giving it a look of filter, I enable the second design enable users to inpout the information before entering the home page, meanwhile, they can change it in the filter-like button, which on the one hand, make them feel the events are customized, on the other hand, it increase the flexibility when users want to change the timeslot.

Aside from that, I remove the enternaning part of the bump. Alternatively, the interaction of touching each other's mobile phone is still remained to keep parents engaged.

4

2 Q Virtual Assistant

NON-VERBAL FEEDBACK

Q is a virtual assistant who can be used to send hug, hand shaking, kiss and voice, to engage people in telecomunications. It also provides multiple types of non-verbal feedback, when users received phone call ,messages and wheather forecast.

The background of the picture is from pixel picture.com

5

USER RESEARCH

IDEATION Based on previous research and the related research paper, I finnally decide to use a spherical-shaped robot to express all types of non-verbal stimuli.

INTERVIEW I did interview with 5 virtual assistant (Siri, Alexa) users, three of them have family and friends overseas, 2 of them have family living in a different city. Part of the quates is presented below:

DEFINE REQUIREMENT After transcripting the information during the interview, I summarised the requirement to four key points:

Non-verbal expression

Warmer

Time constran

Personalised

6

PROTOTYPE

ITERATION

Wizard of Oz A video prototype was produced to investigate how participants feel emotionally toward the design. It can send hug, report weather, notify the phone call and message by thermal, movement and eye gaze feedback.

According to the data extracted from quantitative study, the test did not receive an obvously positive feedback. Many participants stated that, they missed some points while watching the video. Hence, a high-fidelity prototype was then rendered. The latest prototype includes the charger, the recognition of path, which prevent the assistant falling down from the desk.

The next step will be running another test, using the optimized prototype . with a storyline and scenario. This would give participants more context, and generate accurate feedbacks.

USER TESTING QUESTIONNAIRE Questionnaire is beginned with the video prototype, which displayed the basic functions of the virtual assistant. It is designed to find out how users feel in terms of five creteria: sense of presence of their partners, pleasantness, excitment, engagement, and sens of personality.

X-SENSE OF PRESENCE Y-ENGAGMENT

X-PLEASANTNESS Y-EXCITMENT

6

6

5

5

4

4

3

3

2

2

1

1

0

0 0

1

2

3

4

5

6

0

1

2

3

4

5

6

7

1

LetStorm

Product Manager & UX Designer

LetStorm is a platform for Illustrators and amateurs to create illustrations in a series. It contributes to making the process of practicing drawing more attractive, and connects illustrators of different levels.

3

CONCEPT

User Research

Problems

Although many people have a passion for illustration, a large portion of them lack motivation to practise. Therefore, we tried to figure out how to make them move forward more easily in an interesting way.

We learnt the habits when they practice drawing and the common process of practicing by analysing the conversations with 19 interviewees who are either illustrators or amateurs. We end -ed up discovering the three stages.

Questionaire

Based on the information that we collected, I made a questionaire to verify them. In addition, we found the websites that illustrators usually use which helped us do the competitive analysis.

Popular Illustration web/Platform

Functions that are most used

By analysing the result, we extracted the functions illustrators need while rarely used by people who merely like art but cannot create pictures.

4

Define Requirement

Personas

Interviewers can be summarised at following four types.

Challenge

Let people know you

Get inspired and learn

Find a partner to win bonus

Compete with others and learn from them

Mark Age: 34 Career: IT Mark always feels pressure during work time. Drawing pictures makes him feel relaxed.

Infomation Architecture

Stephen Age: 20 Education: Freshman in University, major in product design

Amy Age: 23 Education: Postgraduate, major in Social Media

Stephen is obsessed with illustration, he has had mountains of imitation works . However, he finds it hard to create his own original work.

He does not know where to start.

She has accumulated a bunch of excellent works during u n i v e r s i t y. I t 's t i m e t o g e t herself a job. She hopes to gain more popularity among professional illustrators and recruiters to get into a good company.

LetStorm

Introduction

Upload

Best this month

Painting Sequence

complete the picture

Continue the Story

Challenge

Continue the Style

Vote

Me

Reconmand Group Member

Message

Info

5

Scenario

Workflow

Write Basic Info

1. Amy drew a lonely

man in an empty city a s t h e b a c k g ro u n d on the screen . Then she uploaded it to the Letstorm website and started a sequence.

2. Bruce downloaded A m y 's p i c t u r e a n d added more friends of the boy on it. Then he uploaded it to the website.

3.Corel downloaded Bruce's works and added a lot more people, which conpletely changed the picture.

Challenge

1. Amy drew a little

2. Bruce decided to

3. After Bruce work, Corel

1 . A m y drew her

2. Bruce i m i t a t e d

3.After Bruce work , Corel then drew Hitler's

boy who saw a tiger getting a fish.

head connected to a dinosaurs body in the picture.

continue the stor y: The boy wanna tr y fishing.

Amy's style and got his gir friend's head growing up from a pretty insect.'s body.

then gave it a sad ending: the boy lost his fishing rode whilre trying to catch a fish.

face to a funny chicken body.

6

Wireframe( Web ) Home Page

My Illustrations

See more pictures

View Amplified Pictures

Upload

7

UI (Web)

8

Wireframe (APP）

LetStorm

Slide to the Right

Slide to the Right

My Subscription

9

UI (APP)

10

Usability Test We did the test to ascertain whether it was over-designed and if we missed anything else that was important for users. Watch the demo>

Iterations Throughout the three iterations ,the UI and layout are improved based on the feedback from subjects.

In the newest version, the platform reconmands team members who share the same interests as the user visting the website. Those users can now form a team to create pictures. Users are allowed to challenge their peers by replacing the picture with their own in sequence.

Online photoshop simplified the steps of uploading pictures, which improved the user experience.

11

Friendly U Stick USABILITY Based on emperical research and quantitative experiments, this design aims to solve the problem that people cannot easily find the right posistion while pluging an U stick into a USB port on a PC or laptop.

8

USER RESEARCH OBSERVATION

EXPERIMENT 1 (SHAPE)

it is not always easy to plug a normal USB stick into a USB port. No matter how often we use it, we cannot remember which side is up which is down.

10 users tried different types of U sticks, the purpos is to investigae whether shape affect the speed they pug in.

VIDEO ANALYSIS I observed people using different types of U stick. In addition, I did interviews to explore whether the success rate has something to do with the time people used their U sticks.

EXPERIMENT 2 (COLOUR)

Failed Failed Failed Failed Failed

Failed

In order to explore the relationship between colour and the speed U stick is pluged in, similar trial was carried out after experiment 1.

9

QUESTIONNAIRE I made a questionaire to find out what users look for when choosing flash disks. and what kind of USB sticks were mostly used among the 109 subjects.

9

PROTOTYPE

ITERATION

A low-fidelity prototype was produced, distinguishing the coulour and shape of both sides.

The quantitative study comfirmed my hypothesis, the high fidelity prototype is then rendered.It has three features: - There are two common ways to hold the USB stick while pluging in: hold its lateral sides or from the sides of up and down. considering of this, The design could make it easier for users to recognize the right direction to insert. The raised part and the dent below enable it easy to be held.

- Different shapes and colours on both surfacec help users to identify the correct way to insert an U stick.

- The bionics design of a snake meets the customer’s personalized needs.

A/B TEST I then did an A/B test by comparing the time that users spent on inserting two U sticks (A - prototype; B- fastest U stick). The result indicated that there is a significant difference between two sticks, and prototype is more quickly insterted than the originally fastest U stick.

The bionics design of a snake meets the customer’s personalized needs.

There are two common ways to hold the USB stick while pluging in: hold its lateral sides or from the sides of up and down . considering of this, The design could make it easier for users to recognize the right direction to insert. The raised part and the dent below enable it easy to be held.

Time spent on inserting 12 10 8 6 4 2 0 1

2

3

4

5 Series1

6

7 Series2

8

9

10

Different shapes and colours on both surface help users to identify the correct way to insert an USB stick.

10