Portfolio: UI/UX Design by Linda Hu

User Interface Design

LINDA HU 2013-2016 PORTFOLIO

Contents

UI Design CONTENTS

Resume

...................................................

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Flow Charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Task Flow and Screen Flow . . . . . . . . . . . . . . . . . . . .

Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

UI Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Model Case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Graphic UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Model Case . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Resume

UI Design RESUME

PROFILE EDUCATION EXPERIENCE EXHIBITIONS HONOR SKILLS

PROFILE I am an enthusiastic and highly motivated UI/UX designer looking opportunities to join an entertainments or Internet-related industries. My expertise is not limited to UI/UX Design, but any type of Graphical Design, Typographic, and Digital Arts. Meanwhile, I am progressing in extensive skills of UI Transition Design and Moving Image.

I have had involvements in planning and holding events since undergraduate studies in university. In particular, I have gained various opportunities in cooperating with people in different professions with my current job. Thus, these experiences not only gave me insights on how to work cohesively in a team, but also gives me the confident to engage in any kind of team.

UI Design RESUME

EDUCATION Birmingham City University 09.2011-09.2012 MA Visual Communication Master of Arts National Dong Hwa University 09.2005-06.2010 Bachelor of Social Science, Bachelor of Fine Arts, Double Major in Social Development/ Arts and Design Specific Studyings Creative Thinking Methods Corporate Identity Studying Ambient Advertising Studying Creative Outdoor Advertising Typeface Studying

EXPERIENCE Gamania Digital Entertainment Co., Ltd 26.05.2014-Now UX Designer Foxconn Technology Group 22.07.2013-28.02.2014 UI Designer World Vision 12.2008-06.2010 Internship

EXHIBITIONS Mobius 05.2010 2010 Graduate Exhibition, Dept. of Arts and Design, NDHU Here, I Met Arts 05.2009 Hu, Chia-Lunâ&#x20AC;&#x2122;s Personal Exhibition Fall Term Union Exhibition 11.2009 Dept. of Arts and Design, NDHU

UI Design RESUME

SKILLS HONOR Competition 2010 Corel Asia Pacific Design Competition, 5th Place Professional Qualifications Certificate of Completion of Corel Painter

Languages English Chinese Areas of Expertise UI/UX Design Graphic Design Digital Arts lllustration Professional Abilities Design Software: Adobe Photoshop Adobe Illustrator Adobe InDesign Adobe Flash Corel Painter

Introduction

Set new passw current password new password

confirm new passw show password

Save

Tap Tap

40 mins

12:00

12:00 2

-1min

Tap

Tap Tap Tap

+1min

Set new password current password

Password Setting

App

new password confirm new password show password Break

Homework

Start

Tap

Sleep

Reminder Setting About us

Save

Reset

Tap

Yes

Tap

Show passwo

UI Design INTRODUCTION 12:00

word

ord?

Tap

Set new pas

current passwor new password confirm new pa show password

Save

Designers and programmers collaborated to develop a series of flow plans for the user interface design. Through this process, they better understood what behaviors the users would engage in and what response screens and feedback the program should give to the user of the App. 設計師以及工程師開始著手執行介面設計的作業時，會先規劃出整體的架構，條列出架構中的情境之後，再著手流程圖的規劃，以更清楚使用者在使用此 App 時，將會有哪些行為，程式又會反應出哪些畫面以及相關回饋。

UI Design INTRODUCTION

The series of flow chart includes: 這一連串的流程圖包括： Map List the Use Cases Task Flows Screen Flows Wireframes UI Flows

Based on that information, designers were able to design the layout and visual graphics of the App while programmers developed the program. 根據這些資料，再規劃出 App 的視覺版面及頁面佈局，設計美術視覺，最後交由工程師執行程式作業。

Flow Charts

Set new passw current password new password

confirm new passw show password

Save

Tap Tap

40 mins

12:00

12:00 2

-1min

Tap

Tap Tap Tap

+1min

Set new password current password

Password Setting

App

new password confirm new password show password Break

Homework

Start

Tap

Sleep

Reminder Setting About us

Save

Reset

Tap

Yes

Tap

Show passwo

UI Design FLOW CHARTS 12:00

word

ord?

MAP

Tap

TASK FLOW SCREEN FLOW

Tap

WIREFRAME Set new pas

UI FLOW

current passwor new password confirm new pa show password

Save

MAP At the beginning of design process, designers map out the whole structure of App, based on what functions and services the App gives to user. The Map helps designers standing on the user side to consider what behaviours user would have through using the App and list all the possible Use Cases.

Setting Screen

Set Password Screen I-Protection App

Set Reminder Screen

UI Design FLOW CHARTS

Introduction Screen

First Password Setting Screen

開始一項 App 專案執行時，設計師們根據這款 App 將會提供什麼樣的功能與服務，規劃出整體架構。藉由 Map，站在使用者的角度去構思使用者在使用 App 時，會接觸到什麼的服務，以及用到什麼功能，列出所有可能的使用案例 (Use Case)。 Main Page

Start / Reset

Animation Choosing

Time Setting

Start Pause Reset Back to the Timer

TASK FLOW / SCREEN FLOW Task Flows are based on assumptions what kinds of motivation theusers might reflect in their behaviour; meanwhile, Screen Flows presents what corresponding feedback is provided on the screen by the program in response to the users of the App. Tap “+” and “-”

Finish timr setting?

Task Flow Yes Set the timer Tap “+” and “-” to set timer?

Tap counting number in the middle of timer wheel.

Enter needed time

Tap Cancel button I-Protection App

Yes

UI Design FLOW CHARTS

No Cancel timer setting?

Finish timr setting?

Yes

Tap OK button

End

Yes

TASK FLOW / SCREEN FLOW Task Flow 假設了使用者在操作 App 時，將會有哪些行為流程；而 Screen Flow 則是呈現了使用者在操作 App 時，將會有哪些對應的螢幕畫面顯示或程式回饋。 No When taps “+” and “-”, the counting number changes to what user sets in the timer wheel.

Finish timr setting?

When taps counting number in the middle of timer wheel, the keyboard pops up.

The buttons of keyboard gives feedback. The counting number changes to what user sets in the timer wheel.

Yes

Screen Flow Yes Set the timer Tap “+” and “-” to set timer?

Cancel button gives feedback. I-Protection App

UI Design FLOW CHARTS

Cancel timer setting?

Finish timr setting?

Yes

OK button gives feedback.

End

Yes

WIREFRAME Based on the Task Flows and the Screen Flows, designers developed the Wireframe of this App. 經過繪製 Task Flows 與Screen Flows 的過程，設計師即可開始設計 App 的版面架構及頁面佈局。

Timer When user taps the number in the middle of timer wheel, the keyboard will pop up.

12:00

Start The user can tap Start button to start the timer.

-1min

mins

+1min

Reset The timer returns to the default setting if the user taps the Reset button. 40

I-Protection App

The user can set the timer by tapping the "+" and "-" symbols.

Animations Selection Area Break

Homework

Start

Sleep

Reset

UI Design FLOW CHARTS

End Screen

1. A Pop-up window shows up with the End Page when time is up. 2. It plays the animation the user selected in the Timer screen and pauses any activities on the screen.

Please enter password

Password input area Please enter password

OK The user can tap OK button to escape the pop-up window. OK按鈕，離開動畫視窗。 12:00

0 min

The animation stops playing. Back to the Timer Homework

Back to the Timer

The user can tap the Back to the Timer button to return to the Timer Settings screen, which reverts to the default settings.

Password Setting Screen 12:00

Set new password current password show password

The user can check the box to show the password.User can check the box to show the password.

new password

Password input area

confirm new password show password

Save

Save When the user finishes setting the password, he/she taps the Save button to return to the Settings screen.

UI Design FLOW CHARTS

Remi nder Setting Screen 12:00

Keep calm and carryon!

When the user taps the Edit button, the keyboard pops up and the user can edit the description of the animation in the text field.

Break

Homework

Sleep

21/40

The maximum number of characters is 40.

12:00

Keep calm and carryon!

When the user finishes setting the description, he/she then taps the Save button in the text field to save the content.

21/40

Break

Homework

Sleep

The user taps the Cancel button to stop editing the description and return to the default setting .

UI FLOW In these UI Flows, according to the use cases, the UI designers defined the rules, process, and details for every scenario. Therefore, the programmers were able to follow these UI Flows to implement the App.

I-Protection App

根據使用者各種可能性的使用案例 (Use Cases)，介面設計師開始界定相對的情境規則、流程和資訊細節。以讓工程師能夠遵循 UI Flows 執行 App 的程式撰寫。

-1min

S stem Homepa e

a n t e an lo in

mins

Break

Homework

Start ap

Sleep

Rese

UI Design

FLOW CHARTS

ap -1min

+1min

mins

-1min

mins

+1min

-1min

mins

+ 1min

We advise that setting time is better under 40 mins to avoid visual fatigue.

Break

Homework

Start

Sleep

Break

Reset

Homework

Start

Break

Sleep

Reset

Homework

Start

Sleep

Reset

1min

ap an set timer

-1min

mins

+1min

2 60

1 ďź?1min

mins

Break

Homework

Start ap

Sleep

Break

Homework

Sleep

Cancel

Start

Reset

+ 5min

Reset

ap ap

MODEL CASE There is another example demonstrates in this session, based on the process of UI Design mentioned above. 根據前述的使用者介面規劃流程，用另一範例作展示。

View Modes

Map Monthly

Weekly

Daily

App - Calendar

The Map displays the whole structure of App-Calendar, including the functions and services the App offers. App-行事曆的整體架構展示，包含了其為使用者所提供的功能及服務。

UI Design FLOW CHARTS

Event

Add New Event

Edit Event

To Do List

View Event

Delete Event

Add New List

View List

Edit List

Delete List

Calendar

Calendar List

Display Calendars

Add New Calendar

Sync Calendars

Edit Calendar

Delete Calendar

UI Design FLOW CHARTS

Setting

Account Setting

Display Setting

Reminder Setting

Week Start at

Default Time

Time Zone

Default Reminder

About Us

Sync Time Sync Notification

Add New Event The main page Tap “+” button

Choose “New event”

Task Flow According to the three important selections of Use Cases: Add New Event, Edit To Do List and Add New Calendar, expanding out the three Task Flows of user behaviour modes. 在此範例中，根據特別篩選的三個重要的使用案例：新增事件、編輯代辦事項與新增行事曆，展示出使用者使用此 App 的三個行為模式流程。

After a chain of setting

UI Design FLOW CHARTS

Event Title

Set the essential condition No

Add new event?

Yes

Finish the essential setting?

Tap Add button

Yes

Tap Cancel button

Give up this event surely?

Yes

Tap Delete button

End

No Tap Cancel button

App - Calendar

Edit To Do Lise To do list

Choose one task user wants to edit

Expand the detail of the task

Tap Edit button

Add New Calendar Calendar management page Tap â&#x20AC;&#x153;New Calendarâ&#x20AC;?

Enter to the page of adding calendar

After a chain of setting

Enter to the editing mode

UI Design FLOW CHARTS

Save the changing task?

Edit the list

Yes

Tap Save button

End

Tap Cancel button

Add new calendar?

Yes

System would give every item a default setting, even user dose not set any preference. Tap Add button

Tap Cancel button

Give up this calendar surely?

Yes

Tap Delete button

End

No Tap Cancel button

視圖

View Mode

Calendar Month Add Button Add new event or new to do list . 新增按鍵可新增事件、待辦事項 Setting Button Go to the setting screen. 設定按鍵 Calendar Button Switch to the Calendar screen (Main screen). 視圖按鍵 To do list Button Switch to the To do list screen. 待辦事項頁面按鍵 Calendar list Button Switch to the Calendar list screen. 行事曆列表按鍵 Back to Today 回到今天按鍵

Wireframe App - Calendar

UI Design FLOW CHARTS

Calendar Week/Day

Go back to the last screen. 回到到上一頁按鍵 The event brief 事件簡述

The lay out of some important App-Calendar screens. 一些重要的App-行事曆螢幕架構展示。

事件管理

Event New Event

Location Button Expand editing blank. 地點圖示：可展開欄位編輯。 Repeated event Button Expand editing blank . 重複圖示：可展開欄位編輯。 Invitee Button Expand editing blank . 參與人圖示：可展開欄位編輯。 Note Button Expand editing blank. 事件備註圖示：可展開欄位編輯。

UI Design FLOW CHARTS

代辦事項管理

To Do List To Do List

Event Information 待辦事項基本資訊： Title 待辦事項標題 Deadline 期限 Note 待辦事項備註 Completed 已完成事項

View List

Edit List

Edit Button Enters to editing mode. 編輯待辦事項按鈕：點擊按鈕前進待辦事項編輯模式。

Delete Button Delete list. 刪除待辦事項按鈕：點擊按鈕刪除此待辦事項。

UI Design FLOW CHARTS

行事曆管理

Calendar List Calendar List

即時同步

Sync Button Sync all calendars with Google Calendar in time. 及時同步欄位：點擊後將會及時同步啟動同步的行事曆。

Edit Button Enter to managing mode . 管理行事曆按鈕：點擊按鈕前進管理行事曆頁面。 Calendar Categories : 行事曆類別有：我的行事曆

My Calendar 我的行事曆 Display Switch Switch on/off buttons to display/hide calendars . 顯示開關：開啟按鈕的行事曆將會顯示在視圖上。

本地行事曆

Local Calendar 本地行事曆 Google行事曆

Google Calendar

Calendars’ Colour User can set colours with different kind of calendars .

。 40

Calendar Management

Add Button Add new calendar. 行事曆新增按鍵

Enter to editing mode of each calendar . 點擊各個行事曆欄位進入該行事曆編輯模式。

UI Design FLOW CHARTS

Calendar Management

名稱

Calendaer’s Name

預設行事曆

Default Calendar Switch on button to make it becomes default calendar.

。與Google同步

。 Calendaer’s Colour User can set different colours for each calendar.

。

Sync Switch on button to allow syncing the calendar with Google Calendar.

Add New Event

2:38 PM

System Homepage

Tap

2:38 PM

Tap

1月 2014

取消

Sun

Mon

Tue

Wed

Thu

Fri

Sat

結束

提醒

Sun

Mon

Tue

Wed

Thu

Fri

Sat

新增事件

新增

標題

新增

重要

Tap

事件

行事曆

待辦事項

開始

Tap Tap

2:38 PM 取消標題重要

UI Flow

行事曆開始結束提醒

Tap

新增事件

新增

UI Design FLOW CHARTS 經過一連串設定

2:38 PM 取消

新增事件

2:38 PM 新增

標題 Get High on Fri Night

取消標題

重要

新增事件

2:38 PM 新增

Get High on Fri Night

標題

重要

行事曆 Dating

取消

新增事件 Get High on Fri Night

取消

新增事件

新增

標題 Get High on Fri Night

重要

行事曆 Dating

2:38 PM

2:38 PM 新增

新增事件

新增

標題 Get High on Fri Night 重要

重要

行事曆 Dating

取消

行事曆 Dating

開始 1月31日星期五