DESIGN X ENGINEERING YU CHENG CHANG
YU CHENG CHANG
Developer, Designer and the Strategist
TABLE OF CONTENTS Featured
Smart Work
P.5
P.18 Lifestyle
P.20
P.8
P.11
P.13
P.15
P.22
P.23
P.25
P.26
ID
Sketch and other
Featured Projects Music Wrap Homecare robot
HOW I START
As the UX and UI designer in my team which includes markeTng ,PM, ID and engineers. I worked on exploring user's need and providing design guideline for ID and engineer to create best speaker. The process: 1.Image & target definiTon 2.Human factors and ergonomics study 3.Usability Research 4.UI design 5.Prototype and experiment 6.Manufacturing and issue review
IMAGE DEFINITION
Image & Target DefiniTon
MUSIC WRAP
My role : UX researcher, UI designer Other members : PM, RD
Music Wrap stands for a transformaTve Bluetooth speakers, a fashion accessory, as well as a brand-‐new lifestyle. Music Wrap can easily pair with Bluetooth enabled smart devices through NFC with a light touch. With its unique acousTc design, Music Wrap has crystal clear and excellent stereo audio quality. The flexible and bendable strap allows you to shape it for various uses, such as wrapping around a bicycle, docking for a smartphone or a tablet, or even wearing on your neck. Music Wrap is perfect for outdoor acTviTes with water, dust and shock resistance. Music Wrap provides more than good sound -‐ It makes your life sounds wonderful. Refer from iF DESIGN AWARD 2015 .
Usability Research
UI Design
Prototype Experiment
Review
In the preliminary stage of developing Music Wrap, we analyzed the results from markeTng research that indicated which types of portable speakers customers would like. We focused on the scenarios of outdoor acTviTes and gave portable speakers a new ability, which is accessory! Designer proposed that new design, music wrap, which can be hanged on the user's neck, used as a stand for a cell phone and wound in any shape they want. The most novel funcTon is hanging on the neck. In order to solve problems under this scenario, I had to study ergonomics and design the experiment for tesTng.
HUMAN FACTORS & ERGONOMICS STUDY Because of Music Wrap's unique feature -‐ wearing, I’m curious about how people wear it, how users feel with it and how they use it. Obviously, I have to firstly consider issues related to human factors, such as weight, length, neck circumference and biomechanics of grip. To explore the best design guidelines, I simulated several possible scenarios of wearing the speakers and proposed some assumed items based on literature review. Those assumed items would be proved and modified with experiment.
First of all, by referring to the data of sexual anthropometrics and the neck circumferences and running pre-‐test with 20 adults for collecTng subjecTve preferences of length, I defined three different speaker models which length are 60 cm, 65 cm and 70 cm for usability experiment.
Secondly, according to the literature of grip and thumb m o T o n o f r i g h t h a n d , I illustrated the different zones of efficiency on the speakers. The pink area means high efficiency, the yellow is middle and the green low. The layout of bugons was defined by the zones and corresponded to the frequency of usage.
SOFTWARE UI DESIGN In the part of UI design, the first challenge is that how to use 3+1 (three control bugons and one power bugon) bugons to manipulate sophisTcated funcTons, including play and , pause, bluetooth pairing, volume control and answering a call. Therefore, I classified the frequency of easy operaTon, the funcTon's usage and deliberated flow with blind operaTng without watching devices. To increase the recogniTon of each bugon, I suggest that three bugons should be designed in different shapes h meet the user's mindset of its funcTons. Therefore, users can recognize bugons without watching in a smooth and intuiTve operaTon flow for the speakers.
The principles: 1 The funcTons of high frequency of use are classified as the first priority. The relevant funcTons are group together. 2 To avoid the complex manipulaTon, each physical bugon can only have two statuses: short press and long press. 3 Matching the most intuiTve way, short press, to the first priority funcTons. 4 Illustrate the flow and evaluate the fluency. 5 R&D development.
PROTOTYPE AND USABILITY TEST In the experiment, I followed previous sekng and arrange the experiment to clarify issues related to human factors. In the experiment, the independent variables include (1) lengths of wearing (2) widths of tube Considering the effect of blind operaTon on bugons, different sekngs of below variables were tested by performance measures (3) size of bugons (4) distance of bugons According to the results, which include error rate of manipulaTng and the subjecTve response, the parTcipants' feedback. I concluded the best wearing speaker design should be: length: 60cm, width: >1.5 bugon size: >1cm, distance between bugons: >1.6cm
There are some discoveries during the experiment. 1 Most users prefer to separate lem and right speakers before they use and they adjust the right speaker's length for easer right hand manipulaTon. 2 The shape of area that touches the user's neck should be designed as flat as a pancake to reduce the pressure from weight.
By adopTng the human factor research and cooperaTng between ID and UI designers, the discovered issues have been solved to proceed to manufacturing stage.This great design won iF internaTonal award and fame in the market. -‐ Below pictures are from hgp://www.books.com.tw/products/N010701597?loc=P_004_001
This thesis aimed to apply the visual servo system with the mobile robot for the home-‐ care system to help everyday life of the elderly and disabled people. We design a visual servo control based mobile roboTc control system (P3DX), which is able capable to traverse through arbitrary obstacles (Chair etc.), find and hit all unhidden and hidden in the robot tesTng area, and finally transmit informaTon to a PC that will graphically display the robot’s telemetry informaTon and ground layout. To deal with all these problems, this study has to accomplish various objecTves such as map building and obstacles and targets idenTfying, path planning and moTon control, navigaTng/ collecTng informaTon within obstacle, traversing a closed path within obstacle, transmikng informaTon using transceivers, processing and displaying received data, and finding the red and blue balloon and bursTng it…etc.
Homecare robot navigation system
My role : Author
In recent years, the Aging populaTon problem is becoming more and more apparent. Technical aids are required allowing aging people to live independently and be supported in their private homes as long as they wish. Many researches propose that using the mobile robots system to provide daily service and help people with difficult and inconvenient work can be a soluTon. In order to execute the assignments, mobile robots are asked to become automaTc and intelligent. The basic missions of the home-‐ care system are like delivering the medicine and moving to the falling-‐down elderly. For the mobile robot system, the visual servo is like the eyes of the robot. There is much more informaTon can be retrieved or analyzed by the camera, i. e., not only color image the data but also the depth informaTon.
This project propose the sensor integraTon in visual navigaTon of a mobile robot. The global eye-‐to-‐hand system use an Wide-‐Angle camera mounted on the c e i l i n g f o r m a p p i n g , l o c a l i z a T o n a n d p a t h planning. The local eye-‐in-‐ hand system use the RGB-‐D camera mounted on the mobile robot to compensate the parTal and incomplete informaTon from the global vision system.
The significance of this work is summarized as • Sensor integraTon between global eye-‐to-‐hand and local eye-‐in-‐hand is developed, the efficiency and effecTveness is achieved. • RGB-‐D vision system is developed using on-‐shelf Kinect camera on the mobile robot to provide the depth data for environment modeling and localizaTon. • Visual odometry is proposed to esTmate the RGB-‐D camera pose and reconstruct the 3D environment. • Simplified SLAM operaTon. • Wireless networked and hierarchical distributed control system
System overview
EXPERIMENT AND RESULTS The robot follows the global path while searching for the hidden target locally. If the target exists, robot reroutes the path to arrive at the hidden target’s posiTon as shown in figures on the right. The robot will move back to follow the global path amer finishing the local mission. The figure below shows the 3D view of the robot trajectory of the whole scenario.
Smart Work BYOD -‐ VoIP APP Business trip UX WiDesk
My role : UI, GUI designer Other members : PM, RD
To integrate mobile phone and IP phone docking, we focus on four topics in office’s call with this two devices.
BYOD -‐ VoIP APP The smart mobile device is already everywhere in our lives. We use them to call, chat, search online, check emails and play…etc. Those smart mobile devices are mulT-‐funcTonal and easy to bring to anywhere. With so many features readily available, people expect that they can use their own mobile device to work effecTvely in the office. To build up a fluent rhythm of work, it is beger to connect devices with each other and exchange the informaTon real Tme. CommunicaTon is essenTal and necessary in the office. The tradiTonal communicaTon between employees is through their IPphone on their desk. Therefore, a call might be missed if the receiver is not on his seat. Nowadays, smart phone is the most common mobile device among employees. Because of the fact that people carry it around everywhere at all Tmes, it is the best device to be integrated with the IP phone system.
Transferring call between devices User can quickly match the smart phone with the docking and IP phone via bluetooth and transfer all calls between two devices smoothly. This enables the smart phone to complement the IP phone. Space conversion in the call Let’s carry the call to anywhere, not constrained by the desk. The call can be converted to smart phone even when people are answering. Just one press, the call will follow you. The caller informaTon Let the smart phone become the display of IP phone. APP can deliver detail caller informaTon to user. Users know immediately who is calling and why. Furthermore, the history of communicaTon can evoke the old memories of collaboraTon. Important calls will be tagged to remind user to callback. ConnecTng with the right person Smart contact system can sync with personal projects through which be connected to others relevant parTes by projects, funcTons or department. Let user easily find the right person.
To integrate with the OA IP phone system, we designed an android APP for employees to install on their own mobile phone and to connect it with the network of the company. This APP is capable to not only call the extension number in company through internet but also call phone through GSM signal. The most unique feature is, this APP can pair with the IP phone docking and transfer the call through bluetooth. Users only need to press one bugon on the docking or in the APP then his the call will be transferred. FuncTons • GSM and VoIP signal integraTon. • Transfer a voice call to IP phone docking through bluetooth • Tag of important call • Con-‐Call • Contacts management • History view • Text and voice message I have arranged all funcTons into 5 categories and integrated them in the permanent tab on the top. The tabs include history, contacts, dial, message and sekng. User can switch between all funcTons easily. The page of answering includes several advanced funcTons ,for instance, the docking transferring, con-‐call and merge calls. Based on the intuiTve UI design, user can communicate with the right person or members smoothly.
tagged important call
Transferring call between IP phone docking and mobile phone
Con-‐call interface
Chakng
Image source : hgp://www.a-‐counTngbiz.com/wp-‐content/uploads/2013/08/businesstrip2.png
Business Trip UX
My role : UX researcher
A business trip is a type of travel that can be undertaken for a variety of job-‐related reasons: to meet or entertain clients; to visit other faciliTes within the same company, or to agend trade shows and seminars. Although the existence of teleconferencing and telepresence technologies has reduced the demand of sending an employee on a business trip, some businesses sTll see advantages in face-‐to-‐face contact for tasks like solving a manufacturing problem or signing a contract. In a typical business trip, the traveller is required to finish all tasks and achieve related business goals against a Tght schedule. Consequently, the project aims to improve efficiency and effecTveness of business trips by reducing the efforts on trifles in travel and helping workers concentrate on the more important tasks.
RESEARCH The Research phase is key to creaTng an informed user experience. In order to explore the traveller demands in a business trip, firstly, I interviewed 8 employees and employers. I asked several quesTons which instruct them to present their experiences and their special memories in their trips. The transcripts were printed for the further analysis.
PERSONA
USER JOURNEY
To draw insights from data collected during the research phase, capturing, organizing and making inferences from the records can help UX designers begin to understand what travelers want and why. To help parTcipaTng designers and product managers understand the end users and to build up communicaTons between team members, Persona was created to outline the comprehension of target users. In Persona, I sketched the image of two target users, the business creator and manufacturing assistant, and described their acTons, goal of the trip, devices they brought and the schedule. Details of the process are shown in the figures below.
The user journey illustrates how travelers interact with their technical devices. User Journey describes at a high level of detail specific steps that different travelers take to complete a specific task during a business trip. The opinions of travelers at each step are also listed. Furthermore, I adjusted the regular user journey with the insights of opportuniTes, so that designers and product managers could more easily idenTfy the potenTal services and build up the strategy.
THREE PHASES OF A BUSINESS TRIP By making inferences from the Analysis phase, I organized the whole business trip into three phases, the Plan phase, the Work phase and the Finalize phase. The Plan phase includes the period of scheduling and making arrangements before the traveller arrives at the desTnaTon. The Work phase starts when the traveller has arrived the desTnaTon and proceeds with his tasks. Lastly, the Finalize phase is the period that the traveller finishes his tasks and reports to his employer.
OBSERVATION AND INTERVIEW According to observaTons in office life and interviews with several employees, I have idenTfied the following significant painful experiences:
It's hard to add my opinions, ideas and remarks in the file shown on the screen.
WiDesk - smart desktop
I want to find files quickly but I sTll need to wait for the computer to turn on.
How can I quickly save the handwrigen notes, calendar events and post-‐it ?
There are just too many reference wind ows and documents, how can I work more efficiently
Personal account, password and credit card informaTon always show on the screen nakedly.
Several typos are discovered when I look up to the screen.
My role : designer
Modern desktop devices help us work more efficiently, but there is plenty of room for improvement based on user experience. This project was inspired by the research of duo-‐screen interacTon on a personal workstaTon. From the research, we learned about significant painful experiences of the current Desktop/AIO PC users. We then translated our findings into the user needs. Finally, we designed a new product, WiDesk, to bring a more secure and efficient working style to Desktop/AIO PC users.
Consequently, we have derived the five main user demands : • HandwriTng is the most efficient way on the desk. • All tools are readily reachable whenever needed. • Focusing on single window when you are working. • Absorbing the latest news • Privacy protecTon
PROPOSED CONCEPTS HandwriTng is the easiest and most creaTve tools The window can be easily dragged down to your horizontal screen for beger handwriTng experience
You can write any notes or draw your ideas. It's convenient for you to drag materials to edit your file.
Minimize the loading of acTviTes Easy to compare or refer to any documents. Users don’t need to hold them beside the verTcal screen.
Privacy Privacy informaTon, including account, password and chat contents, is shown only in a privacy area defined by you
Always know what you want Check what you type on the horizontal screen, No need to look up.
Several widgets help you to handle trivia, you can just focus on the main verTcal screen.
Auto-‐sync with all your devices and integrate all data.
Lifestyle Home security Media life UX E-‐Community Sweet moment
Amer integraTng the above needs and the feedbacks of execuTon in security company, we proposed the key features of this project and constructed the system accordingly.
FEATURES Show status of each device The real Tme status of all sensors and IP-‐cam’s view are delivered to end-‐user for condiTon comprehension.
Home Security System
My role : UI, GUI designer Other members : PM, RD
The home security system can be distributed into four scenarios, e. g., end user, customer service, dispatch and system administraTon. In this project, I focused on the interacTon of end-‐user firstly, and built up this security system for user to monitor their home. This system provide end-‐users to control, check and reset all security sensors in house, no mager where they are. Through the internet, users can be noted and altered by Web and APP early and the system will connect it to relevant security center for protecTon.
Real Tme alert pushing Each event and alert will be delivered to user’s mobile phone and email immediately. For preparaTon, the co-‐contacts will also get the informaTon simultaneously. Modes of different scenarios For both safety and comfort reasons, system can be switched to different mode of security that accommodates to the end-‐user’s pace of life and habits Mastery of informaTon anyTme, anywhere End-‐users would like to know what is happening when they are away from home. To deliver the informaTon, we designed an APP which can sync with the system and show the sensor’s status and camera’s view to user. User will not loss any informaTon anyTme,anywhere.
CLARIFY USER NEED AND CONSTRUCT THE FEATURES According to field studies and interviews which were arranged to explore demands and behaviors of home security system users, we noTced that users pursue a real Tme and intelligent system to protect their house. What user said: • I want to track my house situaTon at anyTme from anywhere. • Aids from neighbors are more effecTve than someone who lives far away. Therefore, one of co-‐contacts could be my neighbor. • I want to customize the security mode when I'm doing something, like smoking, that may trigger the alarm.
FUNCTIONS AND UI DESIGN The funcTons extended from features were illustrated below: -‐ Dashboard : directly provide the most important informaTon to user -‐ Status of Sensor : track the sensors -‐ IP-‐cam live view : monitor and check the condiTon of house by live view -‐ History list : deliver and review the alerts and noTficaTons. -‐ Account management : administer the contact person. -‐ Mode sekng and switching : customize the security mode and the securing sensors. -‐ News and Q&A
WIREFRAME AND UI We believe that a security system should deliver the most important informaTon to user fast, accurate and clearly. For this purpose, the designed dashboard of Web is distributed to four areas which display live view of IPcam, real Tme status of selected sensor, brief of alerts and noTficaTons and the news of service provider. The main funcTons were designed on the tab, user can switch to each one for detail informaTon. The pull-‐down menus of mode located in the lem top of dashboard allows users to switch quickly. Furthermore, considering different behaviors, user also can create their preferred sekng in security mode on the menu. For example, smokers can switch to the smoking mode to turn off the smoking sensor. Or, users can also select the away mode that provides a complete protecTon when nobody is at home. The APP is designed as assistant of Web plazorm and provides service anywhere with internet accessibility. As an assistant, mobile APP is the extended display for user to catch informaTon. Therefore, mobile APP shows similar contents as does the web. However, considering the usability and manipulaTon on mobile phone, we keep some detail sekng in web version only and reduced the effort of manipulaTon in APP.
GUI DESIGN
Media life UX
My role : UX researcher Other members : PM, RD, GUI
Nowadays, imporTng user’s experience in the product design is a significant tendency. All product design efforts should consider feeling of users in the early planning stage and integrate the insights from UX research to improve the design. In this project, I focused on the media which we interact with on daily basis. What are other services available from the media to make people’s day to day life more comfortable and saTsfied? To answer this quesTon and teach all members in product design team, I was assigned to plan and host a workshop and facilitate all colleagues to develop the opportunity in this scenario and propose the innovaTve concepts together.
HOW WE STARTED The progress of UX research:
4.Brainstorming According to the classified needs and illuminaTng insights, members joined the brainstorming and proposed the new ideas for solving the lacks.
5.Idea evaluaTon and sketch Ideas were evaluated by different funcTon units in the organizaTon. All ideas were reviewed item by item categorized by needs f o r s a T s f a c T o n a n d pracTcability.
6.InterpretaTon I n t e r p r e t e d t h o s e evaluated ideas on story boards and presented the concepts behind them accordingly.
PROPOSED CONCEPT User's need I want to obtain the informaTons easily and synchronize data automaTcally.
1.Diary The designed diary is used to record the event which related to medias(video, photo, music, call...etc) in two days. Interviewees wrote and drawn the events and highlighted their opinions at that moment.
2.Interview Interviewees presented their diary and shared the experience. Researchers asked the quesTons of the records and explored the potenTals of user need.
3.ClassificaTon Researchers classified needs and painful points f r o m r e c o r d s a n d translated them into insights.
Type of users • Study new technology regularly • Have a large amount of data • Have a lot of storage devices and producTvity tools • Record and backed up device content frequently • Afraid to miss stored informaTon
SOLUTION Because of the memory issue, people always save and store the same files in their device at different Tmes. They are not sure that they have saved the informaTon already. Therefore, the problem of storage and the confusion of file version will occur. Benefits: When users find an interesTng file and want to save it, the system will automaTcally compare the new file with exisTng contents and noTfy users that if there is any similarity in their name, size, or contents…etc.
Amer the long-‐term cumulaTve, people have difficult to clarify the files in vast archive. Help to evoke users’ memory and build up the connecTon for each files is essenTal. Benefits: The system provides a file network that shows the relaTonship between all files. User can retrieve specific files by the connecTon and easy to manage it. To recall the content of a file, user can use the recorded voice tag of the file to understand the content without opening it. Just a mouse hover, the system will play the record to user.
I would like to tag my file by my personal tags in my personal way. I can arrange the files according to my preferences. Benefits: The system allows users to customize the style of tags, including text, GPS locaTon, figures and keywords. Users can manage their files in their ways without missing.
How to administrate the different versions of files ? Benefits: File's Tme machine provides the Tmeline for user to retrospect the old version of file. Furthermore, through the wireless network, All devices will synchronize files automaTcally.
INTERFACE OF TV The interface of this system comprises four parts: the main menu, the preview and select window, weather, and adverTsement. The main menu, which lists all funcTons, is controlled by the remote controller. The preview window shows relevant contents as selected from the menu, and some content items also have further informaTon upon selecTon. Moreover, the weather widget provides Tmely updates of weather informaTon from the local meteorological office.
INTERFACE OF THE ADMINISTRATION SYSTEM
E-Community
My role : UI, GUI designer Other members : PM, RD
Entertainment services for smart homes have become abundant, thanks to the ubiquitous Internet connecTvity, and the E-‐community is the way to enjoy all of them in an integrated, user-‐friendly system. E-‐community system is a smart community entertainment system that offers access to TV programs, streaming contents, t and online applicaTons, and it is synchronized with the security system via the TV box. E-‐community offers users a proprietary entertainment plazorm for watching the latest movies and videos. Moreover, the built-‐in security system is connected to the IP cameras in house and within the community to transmit live images for security surveillance. This communal entertainment system provides not only a convenient entertainment plazorm but also an effecTve community service network. The core of a complete E-‐community system is its administraTon system. To offer opTmized customer services, the administraTve plazorm is configured at the same Tme when the system is being constructed. The administraTve plazorm allows users to manage account informaTon, push the news and update the APP and AD without interrupTng the on-‐going services. What we provide to users: ● MOD (Media On Demand) system ● Security system ● APP store : Purchase and management of APPs ● Community board ● Account infomaTon
What design for administraTon system ● AdverTsement publishing and ediTng ● Account's management ● APP store management
The administraTon system has four main funcTons, which are listed on the top tab of the main admin screen, with the sub-‐catalog on the lem column showing the relevant contents. The administrator can change sekngs of this system, push the AD, and manage the accounts.
The comment can deliver your sensaTon and can share to your friends Cute emoTcons represents the score. The comment can deliver your sensaTon and can share to your friends
My role : UI, GUI designer Other members : PM, RD
SWEET MOMENT When a delicious meal serving, admiraTon is endless. You definitely have the experience by taking a photo to record moment for memory. Sweet Moment, the app help us to record those Tme and use the cute emoTcons to show the sensaTon. A short comment can deliver your feel to friends through the facebook, let them have immersive experience together.
ID Sketch & Other iHair
Cold
Hot
Outer ring LED light signifies the degree of temperature
iHair The fan-less hair dryer Have you ever had problems with your dryer ? iHAIR let you dry your hair at ease and with comfort, and never have to worry about your hair gekng stuck inside the fan again. iHAIR uses central circular design that compounds with the Dyson fan -‐ less technology, which shims the old fashioned mechanical parts from fan to handle, in order to prevent from hair being swirled inside and causing immediate danger. On the other hand, it inserted the shape memory alloys to changes its shape based on the exterior temperature and may concentrate the strength.
Three stages of temperature control and dual (hot / cold) for personal preference.
S h a p e M e m o r y Alloys Shape memory alloy will change or bend its shape based on the temperature, and will bend back to its original shape amer usage.
Package design
Magazine design