Your SlideShare is downloading. ×
  • Like
  • Save
Ivy's portfolio 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ivy's portfolio 2012

  • 136 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
136
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • GUI 發包,定義,規則,建議
  • GUI 發包,定義,規則,建議
  • GUI 發包,定義,規則,建議
  • GUI 發包,定義,規則,建議
  • ‘ 11 1028 Surrounding UI SH 置入行銷

Transcript

  • 1. Personal InformationChing Yun, KuoIvyTaipei, Taiwan+886 912581595yunning.tw@gmail.com Education Bachelor of Arts, Digital Media Design, 2005 Ming Chuan University, Taiwan Experience • UI/UE Designer, Wistron Corporation Inc. , ’10-’11 • UI/UE Designer for web, ASUS Computer Inc. ’06-’10 • Web Designer, Taiwan Television Enterprise Ltd. ’05-’06 Awards • Young Designers Exhibition – 3D animation • Taiwan provincial government art exhibition – photography • ASUSTeK computer inc. photo competition • Young Times Advertising Awards - radio advertising 2
  • 2. Wistron ’10 - ’11• system | Haier Smart TV GUI Design• system | Asus BD Player• application | Asus BD Player – Remote Control Others ’05 - ’06• application | Windows Media Player• application | e-Education • Others• space design | Tech Day Exhibition • 3D Animation | Mon Chiy• new UI Concepts | Table AIO • 3D Animation | Sky of Strawberry• application | 3D (with naked eyes)• space design | Scenario Room• application | Smart Home (Home Entertainment + Communication) 1 3• experiment | Surrounding UI• application | Smart Home + Product placement + Surrounding UI Portfolio• application | VOIP phone 2 ASUS ’06 – ’10 • Web | official site redesign * • Web | online store * • System | IT Request System • Client & Web | IM (instant message) • application | Global management system • Web | member site • application | iKey
  • 3. 1 Wistron ’10 – ’11 • system | Haier Smart TV GUI Design • system | Asus BD Player • application | Asus BD Player – Remote Control • application | Windows Media Player • application | e-Education • space design | Tech Day Exhibition • new UI Concepts | Table AIO • application | 3D (with naked eyes) • space design | Scenario Room • application | Smart Home (Home Entertainment + Communication) • experiment | Surrounding UI • application | Smart Home + Product placement + Surrounding UI • application | VOIP phone 4
  • 4. Project ‘10– ‘11system | Haier Smart TVI were responsible for•UI and GUI designThis is the first time we cooperated with Haier.We broke through the limitations of hardware tomake the best recommendations and solutions for UI.We made sure the request from user by survey, thenprovided ergonomic recommendations and GUIdesign.
  • 5. Project ‘10– ‘11system | Asus BD PlayerI were responsible for•UI and GUI design•Ergonomic recommendation We not only cared GUI style but also considered user experience and ergonomics.
  • 6. Project ‘10– ‘11 I were responsible forAsus BD Player : •UI and GUI designapplication | Remote Controller •Ergonomic recommendation •Prototyping, Usability Testing •Web (HTML) Paper prototype (Operate by two hands) (Operate by one hand) This is an application on android phone for controlling ASUS BD player. To make sure the Remote controller doesn’t go against the Ergonomic Principles and fit users’ mental model we used Paper prototyping and usability testing. Real scale 1:1 Usability Testing
  • 7. Project ’11application |Windows Media PlayerI were responsible for•GUI designDesigned the GUI style under the fixed UIflow and interaction (moving and bluelight as following picture).
  • 8. Project ’11Application | E-SchoolbagI were responsible for•UI•GUI design An application on Tablet which was designed for elementary school students, it included teacher-parent communication log, workbooks, textbooks, assignments and tests ... etc.
  • 9. Project ‘10– ‘11Space design |Tech Day ExhibitionI were responsible for•UI and GUI design•Usability TestingTech-Day is the most important Information TechnologyExhibition for Wistron.In this project we have to handle the unify plan and entirevisual design. Surveying, interviewing, making usability ismy responsible too. After the shows, we provided theproduct usability reports and recommendations to BU.
  • 10. Workshop (by brainstorming to find new concepts and createProject ’10 – ’11 topics)New UI Concepts | Table AIO • Warm up: Freewheeling Association • Create: add and combine the necessary terms withI were responsible for Stimulus, then sketch some stories.•User Research • KJ method Step1. Definition Step2. Brainstroming Step3. Feasibility assessmentResearch and development of new products. What (MKT resource)can we do when AIO lie down? It’s a topic. Step4. Focus groupI chaired several workshops, made cross validation Step5. Personawith marketing resources then outputted some new Step6. Storyboardconcept proposals. Step7. New Concept proposal
  • 11. Visual Interaction optimization ‧Gesture ‧Photo Size ‧ Viewable Quantity 1 3 ‧3D Scene changingProject ‘11 ‧ Informationapplication | 3D UI 2 Rule(with naked eyes) definition ‧Starting and TerminalI were responsible for ‧Sequence ‧Seldom photos and large photos•GUI design ‧Direction•UI Flow•Team LeaderThis is the first time we design the UI of 3D with nakedeyes, we don’t have any cases or experiences to follow.The user interaction/behavior is very different fromnormal, I tried to study some documents and learnedby experiment.After making technical exchange with programmers, wedesigned the application of camera and media galleryon 3D Tablet (with naked eyes) well; included UI flowand GUI style.
  • 12. Project ‘10space design | Scenario RoomI were responsible for•Space / Vision designWe built the scenario room for usability testing.Created an atmosphere like living room to make thesubjects feel easy and operate our products free. Then weobserved their behavior in observation room by one-waymirror. 13
  • 13. Project ‘11– ‘10system & application | Smart Home Device Type Tablet NB / PC TV(Home Entertainment + Communication) Display 30 cm 60 cm 3mI were responsible for Distance•UI and GUI design User Touch pad / Button type•Ergonomic recommendation Touch screen Behavior Cursor mode Cursor mode (Mouse / Keyboard)•User Research (Mouse / Keyboard)•User Usability Testing Device 480p Full HD Size 7 – 10 吋 10 – 19 吋 46 吋以上 OS Android 3.0/ Windows 7 Windows 7 Smart Home is a big, long-term project. Our propose is to connect all screens/devices in family, integrate home entertainment and communication, make more convenient and close the family relationship. The difficulty in this project is that different behaviors, experience, resolution, interaction in those devices. (TV, notebook, mobile device...ect.) But It’s very worth to break, innovate and rationalize. In order to fit user’s requirements, we focused deeply on user research and usability testing.
  • 14. Project ‘11– ‘10system & application | Smart Home(Home Entertainment + Communication) (page 2) Defining visual guidelines for wide variety of dimensions and screen sizes of all devices, Android and Windows.
  • 15. Project ‘11– ‘10system & application | Smart Home(Home Entertainment + Communication) (page 3) After User research, workshops, we designed entire UI flow chart for discussing with programmers and PM. GUI Design Guideline for Smart Home Defining visual guidelines for wide variety of dimensions and screen sizes of all devices, Android and Windows.
  • 16. • Observational Research BrainstormingProject ‘11– ‘10system & application | Smart Home Observation(Home Entertainment + Communication) (page 4) We improved the phase 1 version and The user comment was extracted interview target users, they innovated new functions in phase 2 by could mainly be divided into three types usability testing, workshop. 1. Positive comment Data collection 2. Negative comment 3. Expectation comment Operation • Coding / KJ method Authentication 不受空間限制 感應靈敏度 所有家電 公 / 私領域 回饋感 ★ Final ★ 當個最聰明的我知道我正活在當下 傻瓜 中斷後的繼續 ★ 我不需動腦過程符合預期 就可以掌握一 輔助裝置 Use the KJ method to group those mass raw data, then the ★ ★ 切 categories issues could be found. 一致性 握持的手感 與差異化 視覺提示 ★ ★ 辨識度 ★ Opportunities Strengths Strengths • Matrix table & Finding
  • 17. BathroomProject ‘11experiment | Surrounding UII were responsible for•Interaction Design•GUI design Ground Interaction Living Room Bedroom In order to create an interaction atmosphere, we built projector into ceiling and projected animation resources on the ground. This case is home treadmill, I want to simulate the Road Run atmosphere for doing exercise easily at home. In the future, it can be added the technique of motion sensing and other equipment to detect speed, distance ...etc. for making health assessment and recommendations. 18
  • 18. Playing “ToyProject ’11 Story"application | Smart Home+ Placement Marketing+ Surrounding UI I were responsible for •Interaction Design •GUI design Ground Interaction Living Room In order to create an interaction atmosphere, we built projector into ceiling and projected animation resources on the ground. In this case, we combine Smart Home project with Surrounding UI project and added placement marketing. The ground will be projected the same atmosphere as the movie which is playing. At some moment it could be Working inserted product promotion, at the same time user can check and buy it on tablet that were installed “SmartHome” application.
  • 19. Project ‘11– ‘10application | VOIP phoneI were responsible for•UI Flow•GUI design VOIP Phone is office videophone on Tablet for employees to communicate easily. Main functions: Multiplayer video, online chatting, word processing business. It could be regarded as a mobile office for business people. The GUI design will be changed over time.
  • 20. 2 ASUS ’06 – ’10 • Web | official site redesign * • Web | online store * • System | IT Request System • Client & Web | IM (instant message) • Application | Global management system • Web | member site • Application | iKey 21
  • 21. Project ‘09 – ‘10web | Official site face-liftI were responsible for•Web planning•UE and UI design•GUI design In this facelift project I did not only change visual design but also improve usability.
  • 22. Project ‘09 – ‘10web | official site redesign (page 2) Sample 1 Service center: I used zip code and google map instead of table list to show it, also I inserted QR code in this page for user to take the information away easily . Sample 2 Product selection: •“Tell us what is your model name” is a new way to replace the old and long "Pull-down menu". •Using the model images and rearranging the product categories to help user select them easier and more accurate.
  • 23. Project ‘09 – ‘10web | official site redesign (page 3) Website architecture UI Flow (by use case) 24 24
  • 24. Project ‘09 – ‘10web | official site redesign(page 4) Planning / survey / analyzing / communicating / defining / visual design / html
  • 25. Project ‘09 – ‘10web | Premium CareI were responsible for•Web planning•UE and UI design•GUI and Logo design "Premium care" is a kind of warranty service; I designed different GUI style page for it to emphasize, promote its unique. I designed 2 logos for the service of premium care; one is for light-colored background another is for dark.
  • 26. Project ‘09 – ‘10web | Online StoreI were responsible for•UE and UI design•Technical support•Promotion planning design•Product images Shooting( some visual design from outsourcing) Feature CSS + XHTML Multi-language Unfixed design Browser Compatibility Product images Shooting
  • 27. I gave some UI/UE recommendations to outsourcing and programmers.Project ‘09 – ‘10web | Online Store (page 2) Website architecture
  • 28. Project ‘07 – ‘09system | IT Request SystemI were responsible for•UE and UI design•GUI design This is an internal system for all asus global employees to apply IT request. I have to considered that it is different user behavior between different country. User Interface design should be friendly to everyone.
  • 29. Project ‘08 – ‘09Client & Web | IM (instant message)-User/AgentI were responsible for•System plan•UE and UI design•GUI design The main function of IM system is to provide end user to consult online. It has two parts, one is for end-user another is for service engineer. How to help service engineer to answer on time and provide the correct information, it is a big challenge on the UI design.
  • 30. Project ‘08 – ‘09system | Global managementI were responsible for•UE and UI design•GUI Design GMS is a global monitoring system of materials and parts. I have to design good UI to fit big screen size and long time watching. So I choose a softer tone and the colors are easy to distinguish.
  • 31. Project ‘08 – ‘09web | Member siteI were responsible for•Web plan•UE and UI design•GUI design Feature Events Notice Technical support
  • 32. Project ’09application | iKeyI were responsible for•UE and UI design•GUI Design This application is for Notebook. It provide: product registration, online consulting, Where to buy ...etc.
  • 33. 3 Others ’05 – ’06 • Others • 3D Animation | Mon Chiy • 3D Animation | Sky of Strawberry 34
  • 34. Works show - other 3D Animation / 3D Graphic design VideoInteraction design Graphic design
  • 35. Project ’04 – ’053D Animation | Sky of Strawberry06’ 08”
  • 36. Modeling * Texturing LightingProject ’04 – ’05 Skeleton *3D Animation | Sky of Strawberry •Bone & Joint(page 2) •Bind Skin •LocatorI were responsible for ( * ) Animation *Planning * •Facial blend shape(object, target, story, storyboard, character, •Walkcycle / Runcycle •Keyframe / Mel (script) scene…) Young Designers Exhibition – 3D animation l_forearm spin l_shoulder head jaw l_wrist pelvis neck l_elbow torso l_hip l_collar l_knee l_ankle
  • 37. Project ’043D Animation | Mon Ki01’ 54”I were responsible for ( * )Planning *Modeling *TexturingLightingSkeleton * • Bone & Joint • Bind Skin • LocatorAnimation * • Facial blend shape • Keyframe
  • 38. Plus ’12 If someone asks 2012 This year…
  • 39. If someone asks 2012 this year…1 5 4 2 3 It cannot let me stop I were a cosmopolite in developing countrues. Until the end of the world, I found myself No matter how harsh environment there I were afraid, but I didnt stop Stumbled all the way I were lonely, but I cherish the time with myself I felt real existence by my sore foot and hunger Living, is not so taken for granted Smiling, touching and embracing the world This is I, my travel!
  • 40. The end 。 Thank you