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