UX portfolio

Page 1

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

1


UX Design Intern ( SAP) 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


CONTENTS 1 2 3 4 5 6

LetStorm Collaborative Platform for Illustrators

BuddyBud Design an extracurricular Activities Calendar

FlashMob An APP to organize and join a flash mob activities

Umbrellect Integrated Umbrella Storage Box

Easy-to-Insert Flash Disk U Flash Disk Based on Usability

Smart LOHAS Chair a environmentally-friendly solution for a LOHAS lifestyle.

2


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


2

Buddy Bud User Research & UX Designer

Buddy Bud is an APP that enables parents to organize kids' after-school activities and assists kids to choose their own activity. It is an assistant for parents , and ideal tool during kids' growth.

12

Picture is from AlzhUp.com


User Research

Requirement Define

As the result of questionaires and interviews indicated, over 60% of parents admitted it is a headache to arrange their kids ' after-school activities. They usually make a plan by writing it on paper or keeping a note on online calendars. Which can be forgotten easily and extremely inconvienient. We also collected the items on their calendars.

plan

Activity Resource

Social

Share

Persona I made personas to define our targeted and potential users.

Information Architecture

As a single mom, it is particularly hard for Lily to have a balance between her family and her career. Sometimes she forgets some family events , which upsets her son from time to

They have three kids, which means they have to make different arrangements for their daily activities.

time.

Messages

My Profile

13


Wireframe

Calendar(Week)

Calendar(Month)

Edit

Check Activities

Activities

Messages

Chat

Me

Widget

14


UI

View and edit calendar to do arrangement for kids.

Search and add afterschool activities to calendar.

Send message to organizers to learn more details about the activities .

Position yourself to

discover activities around your family.

15


3 FlashMob UX & UI Designer

A platform for people to organize or play a part in flash mobs.

16


Conpetitive Analysis ( Layout & UI )

Targeted users 15~30-year-old young people. They are passionate about the dancing and singing, and they enjoy sharing these talents with friends.

Information Architecture

17


Wireframe Flash mob activities

Message

18


Message

Moments

19


UI ORGANIZE a flash mob MESSAGE the group to learn more details SHARE the pictures and videos about activities to friends

20


4 Umbrellect

User Research & Industrial Design

This design breaks through the common way to store

the umbrella by intergrating the storage container

with the umbrella itself, which simplifys the steps and improves the user experience.

The cone-link structure makes it possible for each part

of the container to be stretched out and drawn back

together.Which makes it a container and umbrella handle.

The cap attached to the bottom can be removed . Once

it's removed, it can be attached to the top to ensure the umbrellect waterproof.

21


Define Needs

Problem

When it rains, people put the wet umbrella -s on the seats beside them after getting on the bus. Others will get wet if they sit on a seat with a puddle of water.

Even though passengers hold it with their hand, it is so easy to get others soaked because subways and buses in China are packed all the time.

Questionaire

User Research

I observed 31 passengers to find out what they usually do with a wet umbrella when they get on bus or subway. The results can be summarised with following four pictures.

a

b

46.7%

I collected imformation about what made people change umbrella and the problems they encountered with their umbrellas through questionaires.

c

Beside some basic information, I also collected the data about what made people change umbrellas and the problems they encountered with their umbrellas through questionaire.

d

30%

13.3%

22


Sketches

Evaluation a

c

b

I came out the four solutions and grade it in different aspects.

d

Prototype & Usability Test

23


Final ( Integrated Umbrela Storage)

When the umbrella is opened, the umbrella storage box is just a normal handle.

Slide the bottom piece to cover the umbrella. The handle will be transformed to a cover which prevents the wet umbrella from touching other stuff or people.

Remove the cap at the bottom to cover the top, the umbrella is now waterproof.

This design breaks through the common way to store the umbrella by intergrating the storage container with the umbrella itself, which simplifys the steps and improves the user experience. • The cone-link structure makes it possible for each part of the container to be stretched out and drawn back together.Which makes it a container and umbrella handle.

The cap attached to the bottom can be removed . Once it's removed, it can be attached to the top to ensure the umbrellect waterproof.

24


5 Easy-to-mount U Disk User Research & Industrial Design

Based on a lot of research and experiments, this design aims to solve the problem that people have while

pluging in an USB stick into a USB port on a PC or laptop.

25


Problem

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

Workflow

Questionaire

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.

Observation I observed people using different types of U flash disks. In addition, we did interviews to explore how relevant success rate was to how long people have used them.

Failed Failed Failed Failed Failed

Failed

26


Experiment (shape)

Design&Model

I analysed different types of U flash disks to explore what kind of shape makes the USB stick easier to be pluged in.

According to what I investigated and researched, I made a model.

Experiment (color)

A/B Test

I analysed different types of U flash disks to explore what color makes it easier to be mounted.

I did an A/B test to compare the model with the most user-friendly product we have selected a user-friendly U flash disk from the results of the shape experiment.

27


Final

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

There are two common ways for people to hold the USB stick: hold its sides or hold its top and bottom . We made it easier for users to hold it considering those two common ways they hold it. The higher surface made it easy to hold.

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

28


6

Smart LOHAS Chair UX & ID Designer

The smar t LOHAS chair provides a friendly-environmentally solution for a LOHAS lifestyle. it enables you to be involved in nature at home to escap the hustle and bustle of the city life.

29


Marketing Research

Brainstorm

Proportion of LOHAS people in Europe , US and Japan are around 30%, while in China it is merely 6.2%. With the speeding social development, there will be more LOHAS in China which contains great market potential.

Centered around the key word 'healthy', we did brainstorm according to 5 physical senses-sight, sound, smell, taste and touch. In addition, we came out a way to achieve it.

Define Requirement Illumination

Energy Saving

Into the Nature

Rest

30


Sketch & Story Board Taking inspiration from cradle, we came out the initial design.

1.Get up

2.Choose 'read' model

3.Read

4.Go out for Work./The Solar roof collects somlar energy

5.Go home

6.Choose Youga model with changing light and quite music app chose

7.Sleep

8.go to tolet at the midnigt.It light up while detecting people walking through

31


Environmentaly-friendly

Solar Energy is collected during day time and used for illumination at night.

CSEM white plastic shell allows infrared Solar Panel ray to go through

Smart

LED Panel

Adjust the temperature and light automatically according to grass' status d species.

Personalization

Brightness and clolor of the lighting can be customized to adpt to personal preference.

Situations

Colors

Healthy

Dynamic light can alleviates fatigue after work. And the vary illumination cannot be easily perceived .

32


APP

Enhance brightness, change color and choose models.

The music suiting the current situation is played automatically

Detailed information about the music.

Five Scenes provide immersive exoerience

33


Dynamic Scenes Shape and color of the light will be changed to stimulate the natural scene that user chose , which can provide an immersive experience. In the meanwhile, corresponding animations would show up on the phone. Watch the demo>

Snow

Meteor

Sunrise

Spring

Moonlight

34


Thank You

Thank you for your time!

54wangqin1995@gmail.com

wang-qin54

Qin(Alex)Wang

See more works of mine

35


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.