2016-2018 portfolio by Chu, Jia-Li

2016-2018

Portfolio

by Chu,Jia-Li

UI & Graphic Design

朱家立 Chu, Jia-Li +886 930462701 teasecharliee@gmail.com 1991年 生於臺灣台北 2013年6月 台北市立大學視覺藝術學系 畢業 2013年9月-2016年9月 鴻鼎資訊UI設計師 2016年11月-2018年3月 91APP UI設計師

Born in 1991, Taipei, Taiwan.

- Bachelor of Fine Arts, 2013.06 Taipei Municipal University of Education,Taipei, Taiwan - UI designer, 2013.09 - 2016.09 Holdingtop, Taipei, Taiwan - UI designer, 2016.11 - 2018.03 91APP, Taipei, Taiwan

表格優化 Before

After 2

3 5

4

6

背景 「商品頁查詢」是客戶最常使用的功能之一，在 表格上資料的取捨必須和需求單位溝通。 在不更動架構的前提下，希望能最小幅度改善現 有議題，進行表格優化並建立表格Guideline

議題 • 資料內容多，表格過高滑至中段時會不知道對 應標題為何 • 內容過高時，scroll bar只存於表格最上/下方， 滑至表格中段時，無法左右滑動 • 因表格過寬超過螢幕時，User不知最後方有btn 固定

1

可操作（編輯、複製、刪除） • User不知道超鏈結藍字可點

設計 滑動範圍

1 表格頭固定，向下滑動可對應內容、scroll bar固定上方可左右滑動

2 匯出btn和下方表格群組化 3 操作btn前移，不需向右滑動即可操作 4 超連結文字提高彩度，與一般文字做出差別 5 開關圖示化，快速辨識商品頁狀態 6 數值靠右對齊，方便閱讀

Facebook商店

背景 Facebook對大部分店家來說是最大的人流 來源，整合勢在必行。和Facebook進行資 料串接，在一個後台建立商品即可同步資 料至官網、APP及Facebook，節省三平台 都要上架的人力、增加商品曝光率、確保 資料一致。依循現有規範及元件進行排版 設計。 UX：KK UI：Charlie

目的 → 增加商品曝光率 → 導流Facbook人群至官網 → 一個後台上架至多平台，節省人力

Facebook商店

初次設定入口

STEP 1

STE

1

STEP 2

第二家店設定入口

STEP 1.2

STE

STEP 3

STEP 2

1

對於新功能設定，先有介紹說明，準備好必要資料即可進行設定。

2 在儲存設定前，提供必要說明文字，再進行儲存設定 3 Facebook審核的狀態說明 4 提供刪除設定的入口

EP 2

2 STEP 3

EP 3

3

4

兩步驟驗證

背景 兩步驟驗證是在使用者輸入帳戶密碼之後，再多加一個驗證動 作，並透過手機來驗證登入者是否為本人。此功能由網頁指示 使用者下載安裝APP，目標讓使用者的手機和帳號進行綁定， 因使用者需來回穿梭於下載APP、開啟APP、掃描和網頁指示 之間，所以確認每個步驟做到，才會進到下一步。 UX：KK UI：Charlie

目的 → 帳號安全機制

設計 說明文字簡潔、輔以圖示說明。

兩步驟驗證

STEP 1

1

STEP 2

STEP 3

3

STEP 4

1

對於新功能設定，先有介紹說明。

2 進度說明，讓使用者了解每一階段要做的事

4 確保項目完成，才進到下一步

3 易混淆搖操作紅字標示，提高注意力

5 圖示說明驗證碼位置

STEP 2

2

STEP 3

STEP 4

4 5

驗證碼設定成功，請重新登入

直播購物

Portrait

Landscape

目的 → 身為一個店家，我希望藉由直播影片讓消費者更願意購買我的商品 → 身為一個店家，我希望在影片中可以跟我的消費者互動 → 身為一個消費者，我希望老闆可以即時回答我關於商品的問題 → 身為一個消費者，我希望觀看影片後可以方便的購買商品 UX：KK UI：Charlie

加價購

主要結帳流程

加價購區域

背景 向上銷售：在消費者已經決定購買的情況下，提供額外的服務或折扣，促使消費者願意購買更多且 更高客單價的商品，常見的案例如咖啡第二杯五折。 UX：Annie UI：Charlie

目的 → 增加商品曝光率 → 向上銷售增加客單價 → 增加活動類型，活動多樣化

設計 消費者進入購物車結帳時，按下“下一步”前，以不干擾原本的購物流程的前提下，去瀏覽其他商品。

iOS改版 目的 → 因應專案開發疊加的功能需整理、重新設計 → 建立元件庫加速開發 → 建立Guideline 確保設計一致性 → 提供更多的客製化設計 → APP文件建置

20

Guideline 目的 → 定義間距、圓角度數、顏色、筆畫粗細、字級行高 → 定義元件 → 定義流程 → 定義使用情境 → 任何人看著Guideline就知道如何排

Isometric

#map

#photo

#worker

#appstore

Daily UI

DailyUI_ Calendar

DailyUI_Coming Soon

DailyUI_ Weather

DailyUI_ Recipe

DailyUI_ Workout Tracker

DailyUI_ Happy New Year

DailyUI_ Daily UI logo

DailyUI_ ToDo List

DailyUI_ Activity Feed

2016-2018 portfolio by Chu, Jia-Li

朱家立

Chu, Jia-Li

+886 930462701 teasecharliee@gmail.com

The dots will connect down the road will give you the confidence to follow your heart.