Kuei Tien Huang
PORTFOLIO _2015
UX DESIGNER
Leave the past behind Create a better tomorrow
PROJECTS 04
About me
06
educoco
18
28
Cathay Financial Holdings
32
Wedding Invitation
34
Fashion marketing magazine
38
Contact
Racing
Kuei Tien Huang I am a visual designer and UX designer Product planner , and coffee addict. .
I find enormous value designing beautiful products with user in mind. I strive to create user-centered design through researching , strategizing , designing and iterating . My passion in UX design is to understand hoe people interact with product and technology and find ways to improve their quality of life.
04
WORK & EDUCATION Product Planner United Daily News Group Feburary 2015 - Present
Freelancer Visual Designer October 2014 - December 2014
Interaction Design (Master Degree) Nottingham Trent University Visual Designer Bread of life Christian Church
September 2013 - September 2014
May 2013 - July 2013
Visual Design Intern Labsology October 2012 - March 2013
Mathematics (Bachelor’s Degree) Taipei Municipal University of Education October 2008 - June 2012
My Tools
illustrator
photoshop
indesign
axure
uxpin
flinto
sketch
Hobbies & Interests
05
educoco Op e n -s o u rce l e ar ni ng p l atfor m
educoco is not only a writting & reading platform for junior high and senior high students ,also a teacher-led program.educoco’s mission is to transform the learning experiece by using gamification and socialization to encourage students collaborated in finishing the task.
pro to t y p e o f o ne ac tivity website 06
UX P RO CESS A LEAN UX APPROACH
Generative Research Ideation Mental models
Test Results Competitive Analysis
Le a r n & I deas
D at a
Build
A/B Testing Site Analytics Usability Testing Funnel
M e a sure
Prototypes Wireframes Mockups Landing Page Hypotheses Deployed Code
MY R O L E
WHAT I DO
Applied user centered
Contextual Inquiry
design to enhance the Teach-
Requirement Analysis
er’s and Student’s
User Flows
experience. I was invovled as
User Journey
a product planner to focus on
Interaction Design
optimizing the website.
Mock-ups / Wireframe
I work with visual designer,
UsabilityTest Findings
front-end engineer ,back-end
Analyze the data and
engineer and QA tester.
customer insights into action
turn
07
P LA N N I NG As a team, we prepared a project plan that highlights the tasks that will be done for each day to give our client a good idea of what will be expected from us .Because educoco is a teacher-led platform, we had three teachers who are our teamworker .They will join our discussion .We also created our own project schedul which each team member will update their own progress on their assigned resposibilities.
PROJECT SCHEDULE
08
PROJECT PLAN
COM P E T ITOR R ES EA RC H As part of my research,I conducted heuristic evaluation of existion UI and then I did a competitive analysis to get an overview of the educational industry latest trends and best practices being followed in the educational industry.
FEATURE ANALYSIS Most sites provided lots of on-line videos and courses to let students learn by themselves without teacher help and the videos could repeat again and again.We will take these key features and implement them into our site design. Junyi academy and Khan academy offer a achievement system into learning environment to encourage students to study harder by themselves. Another key element is the style of the avatar .Some of them imitate famous online game such as Classcraft which copy the style of Warcraft.
09
USE R RES E ARC H Afterwards,I conducted a survey to find more about user’s expection and their feedback on the original website, and other educational website as well.Furthermore,we conduct some user interviews and workshops to gauge the shortcomings of the orginal design,
10
SURVEY
INTERVIEW
Users identified their pain points when using a subscription site,Thet were quote to say that “asking fortoo much information“,”User interface is difficult to understand”,and”not enough function to use”.
The user interviews leads us to identifying key features to implement into the website: record my learing process,provide interesting videos and games, beginner’s mission and FAQ.
PERSONAS&CUSTOMER JOURNEY The initial design gave us a general understanding of online learning and teaching habits.When we dug deeper through the survey and interviews, we uncover many pain points ,user aspirations and expectation.With these keys ,we were able to develop our user scenerios and personas.
11
ID E AT I O N We generate ideas about what solutions might be possible to define the product more clearly. Questions we asked ourselves as a team was whether the idea are viable , feasible and desirable. During the process we conducted affinity mapping ,and design studio.
AFFINITY MAPPING
PAPER PROTOTYPE
Through our user interviews we collected extensive data on user pain , pleasure, context and behavior on subscription services. We organized these findings by affinity mapping to
With a thorough understanding of the challenge and its primary user base, we were able to move onto desgin studio to translate our findings into designs.
define key features for the design stage.
12
WORKSHOP
13
D ESIG N Once the designs proved intuitive to the user, we were ready to built them into higher fidelity. These detailed wireframes and interactive mockups brought our designs to life and created a real time experience for our users during our next step:usability testing.
>>optimize thepurchase procedure of coco store
>>Improve the Information Architecture
c l i c ka bl e w irefra me
>>optimize the virtual account registration process
14
c l i c ka b l e w i re f ram e
Hight fidelity Mockup>>
>>optimize the Landing Page
High Fidelity Prototype
c l i c kable w irefra me
>>Beginner’s mission
15
T EST IN G , IT ERAT E With our wireframes transformed into a clickablee prototype, we set out to find user to test our product.We providesd our users with scenarios and recorded our observations through note taking and videos. It was critical for me to not leave any details out as any subtles in behaviors during testing are essential to the overall experience.
MSFT PRODUCT EXPERIENCE CARD After the user testing, we asked our taregt audience to choose 5 emotional card from the product experience card in order to seek for their deep emotional through the prototype and information architecture.
16
LAUNC H Once the codes are deployed to production environment, I will track the data and analyze once a week in order to know user’s behaviors and whether the new function has enhance the conversion rate or not . It gives us strong evidence to continuing refining design until the fuction has been accept by the marketplace.
google analyst
mixpanel
17
RACING G RA DUAT I O N P ROJEC T
This is my thesis project during my master degree courses.My research question is ”How to incorporate group interactive AV experience within everyday activities,in particular dining ?“
P R OTOTYPE VI DEO 18
THE P R OBLEM People tend to have companies when they were having a meal in the restaurant. What’s more , majority of the people go to restaurant looking for an emotional experience. Accidentally, the result of the my survey show that many people become slaves to their smart phones without even realizing it. People pay more attention on their relationships on Facebook than the person they’re actually face-to-face having a dinner with. I did a lot of qualitative research due to find out my target audience.Eventually, I chose family by seeing less interaction during teen’s puberty
T H E S O LUTIO N
MY R OLE
After done lots of
I serve as a UX and
secondary research, I
interaction designer.
found out that gameplay ex-
As a user experiece de-
perience will be the key to
signer I focus on interper-
solve the problem because
ting data collected from
this experience related to the
interviews and contexual
player’s emotion. Base on
inquires
the emotional design, there
As a interaction designer ,
must be a product that is
I studied the user on- board-
functional, reliable and
ing process and create a
usable before a layer of
brand new experience . The
pleasure can be applied.
game programing was done
Thus,I chose to use the
by the other three computer
resource in the restaurant
programmer.
DELI VERABLES Brief User Flows User Journey Visaul Design Prototype Interview Question Usability Question UsabilityTest Findings Design evaluation
to play the game which is something unique.
19
M Y D ESIG N P RO C ESS User Centered Design
St a rt
P l a nni ng & E xp lore - Literature Review and Existing solution - Case Study -Analyze data and Refine problem -Heuristic Evaluation -Technology Overview
De fi ne Target & User Researc h -Conducted Enthographic research and field study to gather user data - Literature Review -Personas and user scenario -User Interview -Questionnaire
20
E xe cute -Visual Design -User Interface of Console -High fidelity prototyping
User Testing - Revise the game design - Revise the interface of console
Ide ati on - Collect secondary data - Sketch - Design requirement - Card Sorting - low fidelity mockups - Literature Review - Use case Scenario - Funtional flows
Deliver
21
BAC KG ROU N D R ES EA RC H I did lots of survey in order to find out what kind of emotional experience do people have in the restaurant. Accidentally, the result of the survey show a problem that people have in this information explode age .On the other hand, I found out that there is a interactive restaurant called ”INAMO” in London. I collect secondary data from the research just to know how people feel about the interactive food ordering system into the restaurant, the result was a positive feedback .
SURVEY Some people talk more about their relationships on Facebook than they do face-to-face with the person they’re actually in a relationship. Base on this problem, I wish to enhance the social interaction though the interactive audio visual in the restaurant.
22
CASE STUDY Most of the customer are all impressed by the interactive screen which is projected onto the table from above. They thought it was a very special experience and having fun with it.
USE R RES E ARC H With my current findings,it lead to wonder - why teens are always relunctant to talk to their parents during dining?To access these user perferences,characteristics and attitudes towards using interactive media into the dining environment I create survey and interview to get an insight into user needs.
SURVEY The result of the survey and the field research lead me to I chose family as my target audience by seeing less interaction between teenagers and their parents.
USER INTERVIEW My interviewee found that is getting harder to have a pleasure conversation with her older son who is during the adolescent, because he became quite sensitive.
From the user interviews,I created 3 persona , 2 scripts and 1 storyboard in order to validate my ideas and guide myself in further user research.
PERSONAS
I went back to my data collected from my survey and interviewsans pick up key points to give to my 3 personas.They will be my reliable and realistic representation of my key audience segments for reference
STORYBOARD I create scripts for Winnie ,Tom and Eason .Also,I did the role-playing activities again to revise my script.Then ,I start to illustrate the storyboard and their flow.
23
ID E AT I O N My next step is to brainstorm ideas that could be experience in the restaurant.I use card sorting to organize my data collected from my research and identify key feature and sketch them out . According to literature research , younger teens are the most likely to play on portable gaming devices. I experiment different things in the restaurant that happen to be a console such as cutlery and crockery .Eventually,I decided to use coaster as a console.
SKETCH IDEAS I sketch out different ideas in order to know which kind of experience might happen to be in the restaurant.
CARD SORTING I analysed the data and segregated the relevant information using the card sorting ,and categorised the problem on script and personas.
24
LITERATURE RESEARCH
USE CASE SCENARIO
Secondary data that gave me a strong evidence .It shows thatgirls and boys are equally likely to play racing games between age 11-14 (77% of boys and 71% of girls)
After experiment different things in the restaurant that happen to be a console such as cutlery and crockery , I decided to use coaster as a console.
D ESIG N &E XECU T I NG I try to find the suitable interactive device that can be use in the restaurant such as NFC , RFID and QRCODE.Accidentally, I discover a special marker called �Fiducial Marker�. My idea is to attach this Marker on the physical object which is coaster and placemat .Then, made it like a steering wheel.
GAME DESIGN Majority of the game programming was done by three coders.The user interface of the game was design by me and another designer.
FIDUCIAL MARKER This is a technique that could identifying and tracking the position and orientation of optical markers by the camera image. My idea is to attach this Marker on the physical object which is coaster and placemat .Then, made it like a steering wheel.
CONTROLLER DESIGN I came up multiple designs of the user interface of controller and the feedback that recieved from users.
25
SIM U LAT E T HE E NV I RO NM E NT In order to make my test more accurate ,I try to create the dining environment that similar with the interactive restaurant-INAMO.To be more realistic,I put my dinner on the table.
Se t up t he s ce ne
US E R T EST IN G , I TERAT I O N I conducted user testing of my prototype with user group to get the shortcomings and correct them and finally validate them.I also tested the UI component of the game and coaster design .Then, I modified them.
TESTING There are 14 participants which come from 6 countries ,namely,China,Taiwan,Brazil,Germany,Poland and Vietnam.I divided them into 7 groups.
26
RESULT Majority of them really like the idea of using placemat to control the car.
Th e w h o le d es i g n p roce ss tinahuang45.wordpress.com
P ROTOT YP E V ID EO
27
CATHAY FINANACIAL HOLDINGS In this project,my client was Cathay Financial Holdings .My job is to design a annual report for them in order to show their client what they had done this year and a series of poster design that they are going to welcome the New Year’s Eve. Due to the privacy and copyright , only part of the annual report could be shown.
28
Using spot-line area to connect “ACCOUNTABILITY“ and “FIDELITY“ in order to visualize also emphasize the core value of enterprise.
Understanding the demands from client andshow them the correct direction to the solution is Cathay Financail Holdings mission. After brainstorming,I came out the idea of compass which could represent their enterprise,to convey their business concept.
To represent the profession of Cathay Financail Holdings that helps client to open the door of wealth , majoirity of my layout design has full of financial elements.
29
N EW YE A R G RE E TI NG S P OSTER Before I started to design ,I done some research about the convention of Chinese new year’s eve.Then,I came up three style of poster.My client chose the right one and asked me to do a collection for subsidiary.
In Chinese culture, dragon and
Carp is a symbol of wealth,in
Accourding to the Chinese
lion dance is a big event of the
terms of Chinese culture.Large
culture,ancient dynasty regard-
Lunar New Year Festival. In ad-
amount of carp swim into the
ed dragon as a fetish. It usually
dition , it add to festive atmo-
pond which means money will
represent the emperor.
sphere but also get the trouble
come.
away . Thus,I came up an idea whish is children dancing with the dragon ,symbolizes good luck is coming.
30
31
WEDDING INVITATION This porject is about design a online wedding invitation and the wedding procedure brochure .The element was drawn by the bouquet which they are going to use in the wedding scene.
32
This is their wedding procedure brochure.
Wedding procedure brochure
Wedding invitation
33
FASHION MARKETING MAGAZINE The Hakka culture is slowly disappearing. In order to preserve and promote the Hakka culture, the Hakka Affairs Council has been established. To support the initiatives set up by the Council, the aim of this project is to investigate the revival and promotion of the Hakka culture through fashion. Except the content , the whole magazine layout was designed by me. Due to the privacy and copyright , only part of the content could be shown.
34
After the discussion between me and my client ,who is a postgradute student,I decided to use this picture who a elder with a Hakka style buff. I chose ”black” and “Hakka fabric “as a element throughout the entire book.
35
36
37
CONTACT
CONTACT +886 931079381
kthuang@outlook.com
http://tinakthuang.weebly.com/
38
Thankyou for checking my work and I look forward to hear from you soon
39