HCI Portfolio for Indiana University

YU-CHENG CHANG IU e-App Number : IU002103687

I certify that the work included in this portfolio is my own original work. Work included which was conducted as a part of a team or other group is indicated and attributed as such- the other team members are named and a true description of my role in the project is included.

Table of contents

Music Wrap

Wearable Speaker

P.03

Homecare robot

Home security Smart Home

P.17

E-Community

Computer vision

Smart Home

P.06

P.19

BYOD - VoIP APP

Sweet moment

Smart work

P.08

GuessGas Smart Drive

P.10

Media life UX

Lifestyle

P.20

iHair

Lifestyle

P.21

Lifestyle

Sketch and other P.22

Business trip UX

Co-Workers List P.23

P.12

Smart work

P.15

02

HOW I START As the UX and UI designer in my team which includes marketing ,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 deďŹ ning 2.Human factors and ergonomics study 3.Usability Research 4.UI design 5.Prototype and experiment 6.Manufacturing and issue review

IMAGE DEFINING

Music Wrap My role : UX researcher and UI designer Other members : PM x2, RD x3, ID designer x2, Marketing x1 http://ifworlddesignguide.com/entry/147054-music-wrap Music Wrap stands for a transformative 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 acoustic design, Music Wrap has crystal clear and excellent stereo audio quality. The exible 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 activities 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 .

In the preliminary stage of developing Music Wrap, we analyzed the results from marketing research that indicated which types of portable speakers customers would like. We focused on the scenarios of outdoor activities 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 function is hanging on the neck. In order to solve problems under this scenario, I had to study ergonomics and design the experiment for testing.

03

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.

UI DESIGN In the part of UI design, the first challenge is that how to use 3+1 (three control buttons and one power button) buttons to manipulate sophisticated functions, including play and , pause, bluetooth pairing, volume control and answering a call. Therefore, I classified the frequency of easy operation, the function's usage and deliberated flow with blind operating without watching devices. To increase the recognition of each button, I suggest that three buttons should be designed in different shapes h meet the user's mindset of its functions. Therefore, users can recognize buttons without watching in a smooth and intuitive operation flow for the speakers.

First of all, by referring to the data of sexual anthropometrics and the neck circumferences and running pre-test with 20 adults for collecting subjective 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 motion of right hand, 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 buttons was defined by the zones and corresponded to the frequency of usage.

The principles: 1. The functions of high frequency of use are classified as the first priority.

The relevant functions are group together.

2. To avoid the complex manipulation, each physical button can only have two statuses: short press and long press.

3. Matching the most intuitive way, short press, to the first priority functions.

4. Illustrate the flow and evaluate the fluency.

5. R&D development.

04

PROTOTYPE AND USABILITY TEST In the experiment, I followed previous setting 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 operation on buttons, different settings of below variables were tested by performance measures (3) size of buttons (4) distance of buttons

By adopting the human factor research and cooperating between ID and UI designers, the discovered issues have been solved to proceed to manufacturing stage.This great design won iF international award and fame in the market.

According to the results, which include error rate of manipulating and the subjective response, the participants' feedback. I concluded the best wearing speaker design should be: length: 60cm, width: >1.5 button size: >1cm, space of buttons: >1.6cm There are some discoveries during the experiment.

1. Most users prefer to separate left and right speakers before they use and they adjust the right speaker's length for easer right hand manipulation.

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.

Pictures are from : http://www.books.com.tw/products/N01070159 7?loc=P_004_001

05

Homecare robot My role : Algorithm development and System implement https://youtu.be/4vK0dR-l_Lk In recent years, the Aging population 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 solution. In order to execute the assignments, mobile robots are asked to become automatic and intelligent. The basic missions of the home- care system are like delivering the medicine and moving to the falling-down elderly.

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 robotic control system (P3DX), which is able capable to traverse through arbitrary obstacles (Chair etc.), find and hit all unhidden and hidden in the robot testing area, and finally transmit information to a PC that will graphically display the robot’s telemetry information and ground layout. To deal with all these problems, this study has to accomplish various objectives such as map building and obstacles and targets identifying, path planning and motion control, navigating/collecting information within obstacle, traversing a closed path within obstacle, transmitting information using transceivers, processing and displaying received data, and finding the red and blue balloon and bursting it…etc.

This project propose the sensor integration in visual navigation of a mobile robot. The global eye-to-hand system use an Wide-Angle camera mounted on the ceiling for mapping, localization and path planning. The local eye-in-hand system use the RGB-D camera mounted on the mobile robot to compensate the partial and incomplete information from the global vision system.

For the mobile robot system, the visual servo is like the eyes of the robot.

There is much more information can be retrieved or analyzed by the camera, i. e., not only color image the data but also the depth information.

06

The significance of this work is summarized as • Sensor integration between global eye-to-hand and local eye-in-hand is developed, the efficiency and effectiveness 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 localization.

• Visual odometry is proposed to estimate the RGB-D camera pose and reconstruct the 3D environment.

• Simplified SLAM operation.

• Wireless networked and hierarchical distributed control system

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 position as shown in figures on the right. The robot will move back to follow the global path after finishing the local mission.

The figure below shows the 3D view of the robot trajectory of the whole scenario.

07

DISCOVER USER NEED Communication is essential and necessary in the office. The traditional communication 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 times, it is the best device to be integrated with the IP phone system.

To integrate mobile phone and IP phone docking, we focus on four features in office’s call with this two devices.

BYOD - VoIP APP My role : UI designer and Visual desinger Other members : Software Developer x2, Visual designer x1 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 multi-functional and easy to bring to anywhere. With so many features readily available, people expect that they can use their own mobile device to work effectively in the office. To build up a fluent rhythm of work, it is better to connect devices with each other and exchange the information real time.

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 information Let the smart phone become the display of IP phone. APP can deliver detail caller information to user. Users know immediately who is calling and why. Furthermore, the history of communication can evoke the old memories of collaboration.

Important calls will be tagged to remind user to callback.

Connecting with the right person Smart contact system can sync with personal projects through which be connected to others relevant parties by projects, functions or department. Let user easily find the right person.

08

FLOW DESIGN

VISUAL INTERFACE DESIGN

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 button on the docking or in the APP then his the call will be transferred.

Tagged important call

Con-call interface

Transferring call between IP phone docking and mobile phone

Chatting

FUNCTIONS • GSM and VoIP signal integration.

• 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 functions into 5 categories and integrated them in the permanent tab on the top. The tabs include history, contacts, dial, message and setting. User can switch between all functions easily. The page of answering includes several advanced functions ,for instance, the docking transferring, con-call and merge calls. Based on the intuitive UI design, user can communicate with the right person or members smoothly.

09

UNDERSTAND USER We discover that people have problems for searching the suitable gas stations when they are driving. They don’t know where they can find a gas station. They also concern the gas prices and the risk of driving far. We want to solve this problem!

Questionnaire According to the online questionnaire and the interview with the target users, we summarize the needs that the users tell us: 1. I care about safety, the operation of the APP should be fast and easy.

2. I need to focus on the road, so the information of the navigation should be clear and easy to understand.

3. I have some favor brands. I prefer to go to those gas stations.

4. I need to know how much I have spent on the gas.

GuessGas UI DESIGN My role : UX/UI designer CEO: Leon CTO / Developer : Kenny Huang, UI designer: Sandi Wang • The Second Place of 2016 Boston University (BU) Summer Accelerator

Provide the accurate information for the users.

GuessGas integrates with the most powerful resource, google, including google map and the gas price. User will receive the up-to-date information and GuessGas will adjust the best solution for user automatically.

• The Third Place of 2016 Tech, Drugs, and Rock n' Roll at BU. Permanent service

http://guessgas.com/index.html GuessGas is the driving friendly APP. We provide the users the simplest way for the cheap gas. GuessGas reduces the effort of searching the gas station and guides the driver to the closest and cheaper gas station.

GuessGas replaces the "google now" function and shows as a shortcut button, floating botton, on the screen, standing by for users' requirement.

10

Safety = Simplicity Just 1 click, GuessGas will start the navigation automatically.

VISUAL INTERFACE DESIGN

Drivers need to focus on traďŹƒc. In order to reduce the time spending on operating the APP, we eliminate the operation steps. Users don't have to spend time on selection and decision making.

Preference setting According to the users' habit, car, model and preference records, GuessGas will automatically match the suitable gas station for them.

1

2

3 1) Launch 2)Desktop: Record 3) Setting 11

UNDERSTAND USER 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 questions of the records and explored the potentials of user need.

3.Classification Researchers classified needs and painful points from records and translated them into insights.

Media life UX My role : UX researcher, Project host Other members : PM x3, RD x3, UX researcher x3, UI Designer x2 Nowadays, importing 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 satisfied? To answer this question 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 innovative concepts together.

USER NEED AND PROFILE User's need I want to obtain the informations easily and synchronize data automatically.

User profile • Study new technology regularly • Have a large amount of data • Have a lot of storage devices and productivity tools • Record and backed up device content frequently • Afraid to miss stored information

12

DESIGN

STORY BOARD 4.Brainstorming According to the classified needs and illuminating insights, members joined the brainstorming and proposed the new ideas for solving the lacks.

Interpreted those evaluated ideas on story boards and presented the concepts behind them accordingly.

1

Because of the memory issue, people always save and store the same files in their device at different times. They are not sure that they have saved the information already. Therefore, the problem of storage and the confusion of file version will occur.

Benefits: When users find an interesting file and want to save it, the system will automatically compare the new file with existing contents and notify users that if there is any similarity in their name, size, or contents…etc.

EVALUATION 5.Idea evaluation and sketch Ideas were evaluated by different function units in the organization. All ideas were reviewed item by item categorized by needs for satisfaction and practicability.

2

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 location, figures and keywords. Users can manage their files in their ways without missing.

13

3

After the long-term cumulative, people have difficult to clarify the files in vast archive. Help to evoke users’ memory and build up the connection for each files is essential.

Benefits: The system provides a file network that shows the relationship between all files. User can retrieve specific files by the connection 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.

4

How to administrate the different versions of files ?

Benefits: File's time machine provides the timeline for user to retrospect the old version of file. Furthermore, through the wireless network, All devices will synchronize files automatically.

14

INTERVIEW The Research phase is key to creating 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 questions which instruct them to present their experiences and their special memories in their trips. The transcripts were printed for the further analysis.

image source : http://www.a-coun&ngbiz.com/wp-content/uploads/2013/08/businesstrip2.png

Business trip UX My role : UX researcher, Project host

Other members : UX researcher x2 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 facilities within the same company, or to attend 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 still see advantages in face-to-face contact for tasks like solving a manufacturing problem or signing a contract.

PERSONA 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 participating designers and product managers understand the end users and to build up communications 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 actions, goal of the trip, devices they brought and the schedule. Details of the process are shown in the figures below.

In a typical business trip, the traveller is required to finish all tasks and achieve related business goals against a tight schedule. Consequently, the project aims to improve efficiency and effectiveness of business trips by reducing the efforts on trifles in travel and helping workers concentrate on the more important tasks.

15

INSIGHT 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 destination. The Work phase starts when the traveller has arrived the destination and proceeds with his tasks. Lastly, the Finalize phase is the period that the traveller finishes his tasks and reports to his employer.

IDEA PROPOSAL I integrated company’s resource and proposed the integrated system (hardware and software) to improve the experience of business trip.

USER JOURNEY 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 opportunities, so that designers and product managers could more easily identify the potential services and build up the strategy.

SYSTEM STRUCTURE To convince the co-workers and product managers. I described more detail of the ideas. I provided the system structure of the proposed concepts.

16

CLARIFY USER NEED According to field studies and interviews which were arranged to explore demands and behaviors of home security system users, we noticed that users pursue a real time and intelligent system to protect their house.

What user said: • I want to track my house situation at anytime from anywhere.

• Aids from neighbors are more effective 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.

FEATURES After integrating the above needs and the feedbacks of execution in security company, we proposed the key features of this project and constructed the system accordingly.

Home security My role : UI/Visual designer

Other members : PM x4, RD x5, GUI designer x1, UI/UX designer x2 The home security system can be distributed into four scenarios, e. g., end user, customer service, dispatch and system administration. In this project, I focused on the interaction 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 matter 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 protection.

Show status of each device The real time status of all sensors and IP-cam’s view are delivered to end-user for condition comprehension.

Real time alert pushing Each event and alert will be delivered to user’s mobile phone and email immediately.

For preparation, the co-contacts will also get the information 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 information anytime, anywhere End-users would like to know what is happening when they are away from home. To deliver the information, 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 information anytime,anywhere.

17

FLOW DESIGN The functions extended from features were illustrated below: - Dashboard : directly provide the most important information to user - Status of Sensor : track the sensors - IP-cam live view : monitor and check the condition of house by live view - History list : deliver and review the alerts and notifications.

- Account management : administer the contact person.

- Mode setting and switching : customize the security mode and the securing sensors.

- News and Q&A

The APP is designed as assistant of Web platform and provides service anywhere with internet accessibility. As an assistant, mobile APP is the extended display for user to catch information. Therefore, mobile APP shows similar contents as does the web. However, considering the usability and manipulation on mobile phone, we keep some detail setting in web version only and reduced the effort of manipulation in APP.

VISUAL INTERFACE DESIGN

We believe that a security system should deliver the most important information 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 time status of selected sensor, brief of alerts and notifications and the news of service provider.

The main functions were designed on the tab, user can switch to each one for detail information. The pull-down menus of mode located in the left top of dashboard allows users to switch quickly. Furthermore, considering different behaviors, user also can create their preferred setting 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 protection when nobody is at home.

18

What design for administration system • Advertisement publishing and editing • Account's management • APP store management

INTERFACE OF TV The interface of this system comprises four parts: the main menu, the preview and select window, weather, and advertisement. The main menu, which lists all functions, is controlled by the remote controller. The preview window shows relevant contents as selected from the menu, and some content items also have further information upon selection. Moreover, the weather widget provides timely updates of weather information from the local meteorological office.

E-Community My role : UI designer and Visual desinger Other members : PM x2, Software Developer x2 Entertainment services for smart homes have become abundant, thanks to the ubiquitous Internet connectivity, 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 and online applications, and it is synchronized with the security system via the TV box. E-community offers users a proprietary entertainment platform 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 platform but also an effective community service network.

The core of a complete E-community system is its administration system. To offer optimized customer services, the administrative platform is configured at the same time when the system is being constructed. The administrative platform allows users to manage account information, push the news and update the APP and AD without interrupting the on-going services.

INTERFACE OF THE ADMINISTRATION SYSTEM The administration system has four main functions, which are listed on the top tab of the main admin screen, with the sub-catalog on the left column showing the relevant contents. The administrator can change settings of this system, push the AD, and manage the accounts.

VISUAL INTERFACE DESIGN

FEATURES What we provide to users: • MOD (Media On Demand) system • Security system

• APP store : Purchase and management of APPs • Community board • Account infomation

19

VISUAL INTERFACE DESIGN The comment can deliver your sensation and can share to your friends

Cute emoticons represents the score.

SWEET MOMENT My role : UI designer, Visual Developer (xml)

Other members : CEO / developer: Albert Pan CTO / developer: Heero Chen

The comment can deliver your sensation and can share to your friends

When a delicious meal serving, admiration is endless. You deďŹ nitely have the experience by taking a photo to record moment for memory. Sweet Moment, the app help us to record those time and use the cute emoticons to show the sensation. A short comment can deliver your feel to friends through the facebook, let them have immersive experience together.

20

DESIGN

Cold

iHair

Hot

Outer ring LED light signiďŹ es the degree of temperature

The fan-less hair dryer My role :ID designer 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 getting stuck inside the fan again. iHAIR uses central circular design that compounds with the Dyson fan - less technology, which shifts 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.

Shape Memory Alloys Shape memory alloy will change or bend its shape based on the temperature, and will bend back to its original shape after usage.

21

Sketch

Package design

Magazine design

22

Co-Workers List Music Wrap

My role : UX researcher and UI designer PM: Frank Hsieh, Peggy Lai RD: Jack Chen, James Woo, Hunting Kao ID : Jimmy Chen, Chinmin Wei Marketing: Eva Chen

Homecare robot Personal thesis

Business trip UX

My role : UX researcher, Project host UX researcher: Ally Wang, George Cho

Home security

My role : UI/Visual designer PM: Scott Pan, Peggy Lai, Jin Chen, Eileen Lu RD:Chris Ho, Peng Guan, Jun Yang, Ben Yang, Gang Yang GUI:Judith Cheng UI/UX designer : Dana Su, Lucia Lin

E-Community My role : UI designer and Visual desinger PM : Jill Chen, Alex Tang Software Developer: Skuld Su, Ben Yang

BYOD - VoIP APP

My role : UI designer and Visual desinger RD: Mark JT Yang, Andrew YB Lee Visual Designer: Sander Chen

Sweet moment

My role : UI designer, Visual Developer (xml) CEO / developer: Albert Pan CTO / developer: Heero Chen

GuessGas

My role : UX/UI designer CEO: Leon Chen CTO / Developer : Kenny Huang UI designer: Sandi Wang

Media life UX

My role : UX researcher, Project host PM : Owen Hsu, Benjimin Lee, Allen Chen RD : Frank Huang, James Woo, Hunting Kao UX researcher : Hiroshi Tsai, Ally Wang, Sharon Hsu UI designer : Renee Chen, Sander Chen

iHair

Personal

Sketch and other Personal

23

END THANK YOU