2020
PORTFOLIO
Yu - H s u a n L i u sherr y 0 8 0 0 @g ma il.co m
1
ABOUT ME Education Work Experience Competency Extracurricular Activities Certificates Publications
3
2
USER INTERFACE / USER EXPERIENCE Famicloud APP
7
Googene RWD & APP
21
Crest Diving Watch
35
GRAPHIC DESIGN Corartify Board Game Design
49
UP!ck Banner & Poster
59
Coding Angel Poster
61
3
YU-HSUA EDUCATION
COMPETENCY
Sep. 2013 – Jun. 2017
Wireframing
University of Taipei
Visual Design
Bachelor of Education in Learning and Materials Design
Rapid Prototyping Web and App UI Design
Aug. 2014 – May. 2015 | Weatherford, OK, USA
Interaction Design
Southwestern Oklahoma State University
Usability testing
Exchange student in Graphic Design, Department of Art
Front-End Coding
WORK EXPERIENCE
TOOLS
May. 2019 - Jan. 2018
Microsoft Office Suite
Visual Designer
Word, PowerPoint, Excel
Forward Design
Adobe
Marketing Assistant
Photoshop, Illustrator, InDesign, Premiere, AfterEffect, Dreamweaver
Developer Experiences and Evangelism Department, Microsoft Taiwan
Sketch
Jun. 2017 - July. 2016 | Intern
Oct. 2016 - Jan. 2016 | Part-time
Course Assistant Broadcasting Corporation of China
PROGRAMMING
Oct. 2015 - July. 2015 | Intern
HTML, CSS, Python, JavaScript
Public Relations Assistant Veda International Corp.
AN
4
EXTRACURRICULAR ACTIVITIES
CERTIFICATES
Nov. 2017 | National Taiwan Science Education Center
2019 | delivered by Information System Training
Board Games – “ Knowing How Much of Taiwan STEM Dreaming Lady? ”
Program, National Taiwan University
Certificate of Python Programming Certificate of JavaScript Programming
Sep. 2017 | National Taiwan Science Education Center
STEAM Fun Picture Book Seminar
May 2017 | Ministry of Science and Technology
2017 | delivered by University of Taipei
Multidisciplinary Professional Cooperation Summer Camp of iOS Application
Cross - border Application Exhibition for Children Literature
Jul. 2016 – Apr. 2017 | University of Taipei
Graduation Exhibition, Department of Learning and Materials Design Sep. 2015 – Jun. 2016 | University of Taipei
Student Association, Department of Learning and Materials Design
PUBLICATIONS “Vast Art Market” - Taiwan Culture and Creative Market - Picture Book Design May. 2017 | Published by Chinese Institute of Design Mar. 2017 | Published by College Student Research Program, Ministry of Science and Technology
Jun. 2016 | Taipei Zoo
Designing Interactive Learning App for “ Zoo Primate Conservation ”
“Vast Art Market” (Graduation Project, 40 Pages) Apr. 2017 | Published by Department of Learning and Materials Design, Uni. of Taipei
Jul. 2015 – Sep. 2015 | University of Taipei
Welcome Party, Department of Learning and Materials Design
USER INTERFACE / USER EXPERIENCE Famicloud APP Googene RWD & APP Crest Scuba Diving Watch
7
USER INTERFACE / USER EXPERIENCE
Famicloud 2019.03 App (iO S, Android)
Combining interac tive game in fresh food shopping application. Famicloud’s main target is to attrac t young group that provides them rapid and immediate deliver y s er vice.
USER INTERFACE / USER EXPERIENCE
8
MY ROLE Customer Insights & Ideation
Experience Strategy & Vision
I partnered with creative director to disclose insights and translate concepts into features that address customer behaviors and motivations.
I c re a t e d w i re f r a m e , f l o w m a p a n d prototypes to share website vision and content strategy. Those facilitated clients to evangelize ideas, gain alignment and drive decision making.
Oversight & Coordination
Design Execution & Validation
I designed independently and closely collaborated with PM partners to t r a n s l a te p ro d u c t fe a t u re s fo r e a c h platform context. Besides, I negotiated with front-end engineer with fair amount of details to perfect the website.Â
I executed style, wireframes, prototypes. Besides, I evangelized customer goals and balanced business goals. I prioritized and negotiated features for launch and beyond.
PROCESS
Design identify a problem
Style design style as original website for clients
Ideate think of solutions to problem
Mockups represent the structure, elements in a static way
UI flows think thoroughly towards overall app design
Prototype experiment with ideas while checking usability
Wireframes alleviate conversation gaps with clients
Done assist engineer whenever they need help
11
USER INTERFACE / USER EXPERIENCE
THE CHALLENGE Attracted Young Group to Purchase Fresh Food on Famicloud With the growth of e-commerce, online market is partitioned by numerous enterprises. Hence, Famicloud looks forward to provide distinctive services and intriguing shopping user experience via app in order that they could corner the market. Our challenge was to design stylish and fascinating application for target audience. In addition, we had to simplify complicated contents on website into application with small interface.
USER INTERFACE / USER EXPERIENCE
THE APPROACH Add Attractive Patterns and Colors to Increase Users’ Attentions To access our prospective users, we add interesting icons and images to make complex information more appealing and readable. In other words, this allowed users to quickly grasp the need they are looking for. Compared with texts, images and icons can easily catch users’ attentions. From then on, better user experience would be built up in user’s mind.
Apply Breeding Games in Application The assumption was reasonable—young group are easily addicted into mobile games because of positive stimulation which makes them delightful in their spare time. In particular, farm breeding games would give users some coupons after plants fruit successfully. With tangible advantages, this app not only save young group’s consumption in life expense, but also get rid of their worries regarding spending time purchase the food.
12
13
USER INTERFACE / USER EXPERIENCE
STYLE Adopt the original website style in application style design. Make website and application have strong connection in user’s mind.
USER INTERFACE / USER EXPERIENCE
WIREFRAME With one accord, wireframe is an indispensable approach. I used wireframe to condense the conversation bridge with coworkers and clients, and naturally the meeting process became more efficient and smooth. Besides, I could organize my thought first to get rid of impossible tactic.
14
15
USER INTERFACE / USER EXPERIENCE
MOCKUP Home Page
USER INTERFACE / USER EXPERIENCE
Category
16
17
USER INTERFACE / USER EXPERIENCE
Shopping Cart
USER INTERFACE / USER EXPERIENCE
Member Center
18
19
USER INTERFACE / USER EXPERIENCE
UI FLOWS An approach for designers to organize mindset easily and design all pages needed
USER INTERFACE / USER EXPERIENCE
PROTOTYPE https://marvelapp.com/1b91ahbg
CONCLUSION This application design contains fair amount of information and categories, such as product pages, advertisement, promotion etc. Hence, it spent many time for me to negotiate and organize those information with clients. After contemplation about how to display entire information without disorder and misleading, I substituted tangible design layout for some implausible methods. Finally, the final project was greatly satisfied by clients. Besides, clients provided positive feedback towards my overall design because I broke through original website design and adopted distinctive design tactic. Even though this project is still developing by engineer, the present project has certainly solved clients’ problem.
20
21
USER INTERFACE / USER EXPERIENCE
Googene 2018.12 App (iO S, Android), RWD
An ounce of prevention is wor th a pound of cure. Every customers can easily screen their gene via simple steps at home, and they can als o protec t families’ health in advance.
USER INTERFACE / USER EXPERIENCE
22
MY ROLE Customer Insights & Ideation
Experience Strategy & Vision
I individually disclose insights and translate concepts into features that address customer behaviors and motivations. Besides, I analyzed competitors’ website and gather some useful data which could be applied in design work.
I c re a t e d w i re f r a m e , f l o w m a p a n d p ro to t y p e s to s h a re w e b s i te v i s i o n , UI Flow and content strategy. Those facilitated clients to evangelize ideas, gain alignment and drive decision making.
Oversight & Coordination
Design Execution & Validation
I designed independently and closely collaborated with PM partners to t r a n s l a te p ro d u c t fe a t u re s fo r e a c h platform context. Besides, I negotiated with front-end engineer with fair amount of details to perfect the website.
I exe cu te d UI f l o w, w i re f r a me s , prototypes for both website and mobile app devices. Besides, I evangelized customer goals and balanced business goals. I prioritized and negotiated features for launch and beyond.
PROCESS
Design identify a problem
Style propose three distinctive design layout
Ideate think of solutions to problem
Mockups represent the structure, elements in a static way
UI flows think thoroughly towards overall app design
Prototype experiment with ideas while checking usability
Wireframes alleviate conversation gaps with clients
Done assist engineer whenever they need help
25
USER INTERFACE / USER EXPERIENCE
THE CHALLENGE Transform Gene Topic into Interesting issue General public is awarded of healthy issue recently, and therefore our mission is to design an appealing website to attract new users. However, the first challenge is to simplify complicated genetic information and make sure all the service contained in the website could be easily comprehended by readers.
Help Owners to Increase Selling Volume Existing competitors are the most integral problem for us to confront. From users’ perspective, website represents the very first and essential expression of company. In other words, we have to design an outstanding and eye-catching website so that company could achieve their goal successfully.
USER INTERFACE / USER EXPERIENCE
THE APPROACH Colour Website Elements and Design out of Normal Standard To access potential target users, we adopted data visualization to express genetic report because people normally have better sensation towards images and patterns rather than texts. Based on this factor, we then applied different colors and specific icon to each category in order that users are able to distinguish assorted information via those sign. Moreover, instead of implementing normal and usual layout design, we designed out of common standard. We thoroughly used the variations of figure and images to build up the diversity of visual expression. Naturally, whenever users see distinctive design work, they are more willing to spend time visiting the website.
26
27
USER INTERFACE / USER EXPERIENCE
STYLE
WEB Adopt bright and vivd color because gene is consisted of distinctive and specific individual. Moreover, I applied varied geometric figure to liven interface up, and elements were stacked up to increase variations in the visual expression.
Style1
Style2
Style3
USER INTERFACE / USER EXPERIENCE
APP Adopt foregoing website style in application style design. Make website and application have strong connection in user’s mind.
28
29
USER INTERFACE / USER EXPERIENCE
WIREFRAME With one accord, wireframe is an indispensable approach. I used wireframe to condense the conversation bridge with coworkers and clients, and naturally the meeting process became more efficient and smooth. Besides, I could organize my thought first to get rid of impossible tactic.
USER INTERFACE / USER EXPERIENCE
UI FLOWS An approach for designers to organize mindset easily and design all pages needed
WEB
APP
30
31
USER INTERFACE / USER EXPERIENCE
MOCKUP Main Page
WEB Service Intro
Genetic Tech
Inspection
n Method
USER INTERFACE / USER EXPERIENCE
Contact Us
QA
Member Center
Purchase
32
33
USER INTERFACE / USER EXPERIENCE
MOCKUP
APP
Login
Report
Setting
USER INTERFACE / USER EXPERIENCE
PROTOTYPE https://marvelapp.com/650fhb7
APP
https://googene.com/index.html
WEB
CONCLUSION This is a whole new product website from Googene corporation. When I designed and planned for this website, it took several time for me to create an unique and distinctive layout. With special visual design, it would first catch customers’ attention. Besides, genetic information is so complicated for general public to comprehend and make them focus on this issue. Naturally, the most tough task is to simplify the introduction and create an intriguing atmosphere towards viewers. However, I first surfed several relevant websites and took some reference from them. I then analyzed the pros and cons from other websites, and applied some merits in Googene websites. Finally, this design work not only satisfied clients’ requirement, but also assisted salesman to achieve the sales goal in a short period. From this project, my skill of data visualization advanced largely. This experience would help me to design more thorough user experience design for my next project.
34
35
USER INTERFACE / USER EXPERIENCE
Crest 2018.10 Diving Watch
An innovative high- class s cuba diving watch is suitable for divers to control s ea-relevant information while diving. This produc t can broadly ameliorate human suf fering and death rate.
MY ROLE Customer Insights & Ideation
Experience Strategy & Vision
I partnered with creative director to disclose insights and translate concepts into features that address customer behaviors and motivations.
I created wireframe to share website v i s i o n , f u n c t i o n a l m a p a n d c o n te n t strategy. Those facilitated clients to evangelize ideas, gain alignment and drive decision making.
Oversight & Coordination
Design Execution & Validation
I designed independently and closely collaborated with PM partners to t r a n s l a te p ro d u c t fe a t u re s fo r e a c h platform context. Besides, I negotiated with front-end engineer with fair amount of details to perfect the website.
I executed functional map and wireframes. Besides, I evangelized customer goals and balanced business goals. I prioritized and negotiated features for launch and beyond.
PROCESS
Design identify a problem
Style propose two distinctive design layout
Ideate think of solutions to problem
Mockups represent the structure, elements in a static way
UI flows think thoroughly towards overall app design
Prototype experiment with ideas while checking usability
Wireframes alleviate conversation gaps with clients
Done assist engineer whenever they need help
39
USER INTERFACE / USER EXPERIENCE
THE CHALLENGE Simplified Complex Information into 4cm Circle Interface Because numerous vital information needed to be displayed on the circle interface, such as rate of Oxygen, PPO2, MOD etc, our first challenge is to understand the meaning of technical term. Next, we must know the importance rate of diving information. After we clarified all those uncertainty, we had to concern about color’s visibility under the deep sea level.Â
USER INTERFACE / USER EXPERIENCE
THE APPROACH User Research with Divers to Confirm the Priority of Diving Information Via communication with divers, we can put together urgent information such as their oxygen volume, PPO2, diving time and other essential information related to diving functions. After interviewing the divers and gaining understanding in the technical terms, we then actively arranged the urgency of diving information and reflected our priority on the interface.
Apply Bright Color to Emphasize the Information In order to solve the problem of visibility, we conducted design by combining color psychology. That is, we adopted bright colors such as yellow and red to highlight the most important information in every mode. Besides, we also considered how to design simple gestures for divers to conveniently maneuver the interface under sea. After careful deliberation, we agreed that double tap gesture will best allow divers to swipe the screen quickly and without any difficulties.
40
41
USER INTERFACE / USER EXPERIENCE
STYLE Design two style for scuba diving watch. Both adopt bright and colorful elements to emphasize diving information.Â
style1
style2
USER INTERFACE / USER EXPERIENCE
WIREFRAME With one accord, wireframe is an indispensable approach. I used wireframe to condense the conversation bridge with coworkers and clients, and naturally the meeting process became more efficient and smooth. Besides, I could organize my thought first to get rid of impossible tactic.
42
43
USER INTERFACE / USER EXPERIENCE
MOCKUP Menu & Initial
Watch Mode
Scuba Mode
Bottom Timer
USER INTERFACE / USER EXPERIENCE
Apena Mode
Log Mode
Connection Mode
Setting
44
45
USER INTERFACE / USER EXPERIENCE
FUNCTIONAL MAP list out all pages to condense the conversation gap with clients and coworkers
USER INTERFACE / USER EXPERIENCE
CONCLUSION In the process, fair amount of technical term gave me a huge challenge. However, we overcame and won the praise from clients because our design was out of traditional frame. We created distinctive style and interface layout design, which achieved information requirement and visual effect. Besides, this project broadened my vision towards interface and experience design, since this product was new for me. For instance, I knew more about important information while diving and the need from divers, especially water pressure and oxygen volume. Therefore, even though scuba diving watch was kind of tough task, I learned a lot from it when I finished this project. The most important thing was the satisfaction from clients and users.
46
Graphic D esign Corar tify Board Game D esign UP!ck Banner & Poster Coding Angel Poster
GRAPHIC DESIGN
Corartify
2017.04 Board Game D esign
Graduation Project Department of Learning and Materials Design, University of Taipei
Through my research and immersive experience in the cultural and creative market , I have made observations on its advantages and disadvantages. I hope that by proposing a uniquely st yled and ground-breaking business plan, I can improve the industrial prosperity of cultural and creative markets in Taiwan.
50
51
GRAPHIC DESIGN
Logotyp e
Horizontal arrangment - Grid
The title “ 集 市 廣 藝 ” is both an extension and a word play of the Chines phrase " 集 思 廣 義 ” (which means to brainstorm) as the cultural and creative market is inarguably the gathering place of artistic innovation. The use of double entendre is meant to represent the full inclusion of “art” in the “marketplace,” which not only echoes the broader meaning of its phrasal origin, but weaves together ideas and actions to promote the values of cultural and creative market. The English name is taken from three root words: "cor," "art," and "ify." As a prefix, “cor” connotes completion and togetherness while the meaning of “art” is selfevident. When put after “corart” as a suffix and a verb, “ify” signifies the act of putting art together. The term "corartify" can thus be understood as an attempt to jointly put forth artistic creation, and so goes my inspiration.
Corporate typ eface Chines e
English
微軟正黑體
Cyclo Trial
文創市集
AaBbCc123
GRAPHIC DESIGN
Color palette C 72
C 5
M 40
M 15
Y 0
Y 78
K 0
K 0
#F5D747
#4783C4
The major tones of the visual effects are based on yellow (C: 5%, M: 15%, Y: 78%, K: 0%) and blue (C: 72%, M: 40%, Y: 0%, K: 0%). While the color of blue represents the sky and the market as spaces free of constraints, yellow speaks to the vitality of interaction between vendors and customers in the cultural and
Logotyp e
Mono Tone
52
53
GRAPHIC DESIGN
Table Game Design
Skills Cards
Raw Material Cards Func tions Cards Stands Cards
Creative Market Cards Rule Book
Package D esign
GRAPHIC DESIGN
Rule Book
54
55
GRAPHIC DESIGN
Board Game Cards
GRAPHIC DESIGN
56
57
GRAPHIC DESIGN
Dair y of Creative Markets
Cover
Contents
Introduc tion of Creative Market
Par tners
GRAPHIC DESIGN
58
59
GRAPHIC DESIGN
UI/UX Community Event
UP!ck Event 2017.11 Poster & Banner
GRAPGIC DESIGN
60
61
GRAPHIC DESIGN
Microsoft Student Program
Coding Angels Workshop 2016.04 Poster