許雅琇 作品集 Hsu, Ya Hsiu - Portfolio

Page 1

Hello 你 好 ,

許 雅琇

Hsu , Ya Hsiu

Call/ 0936-387-725

EMail/ lily61426@gmail.com

ABOUT ME

擁有 7 年以上設計工作經驗 ,目前任職UI/UX Designer。其中包含 3 年流行產業的產品開發經驗,能 夠提供從 0 到完整的趨勢市場分析、時程規劃、開發設計等的服務。

扎實的設計藝術背景,具備設計思維和擅長多變的設計風格。

有豐富的田野調查和客戶訪談經驗,也擅長後續的訪談調查整理、痛點分析等。

KEY ACHIEVEMENT

受邀" Tailwind CSS 3.0 從零開始-入門到實戰"實作開發章節網頁UI稿件設計。

舉辦"用實戰突破思維瓶頸!UIUX入職必學工作坊" ,該 工作坊獲得現場74%淨推薦值。

開發 " Icon Archer " 鞋款,設計全新大底和新彈力帶系統, 上市 14 天迴轉率達到 42.9% ( 上市最高 32% ) ,成為 RE 2019 年最熱賣的明星商品。(更名為 Icon2.0x )

負責開發大底 Hyperim ,突破品牌的全新風格和材質,成為品牌第一個運動型大底,舒適穿著度 為品牌 帶來新客眾 ,此款大底 佔比每季開發數量三分之一 。 ( 一季 80~95sku)

獨立完成 Ultrahard Formosa 系列明信片專案,商品 2014 年 獲得博客來明信片排行第七名 ,全數 售出 五千多張 。(已絕版)

ABOUT ME
EDUCATION 德名財經科技大學 多媒體設計系 學士學位 Sep. 2012 ~ Jun. 2016 UI/UX Design Tool Web Layout Tool Visual Design Tool Other Tool Figma Zeplin HTML CSS Photoshop Illustrator After Effect Premiere Pro Xd Draw.IO SCSS Bootstrap4 Lightroom Indesign Word Power Point SKILLS LANGUAGE 中文 Chinese 英文 English 母語 中等 INTERESTS Travel 旅 行 Photograph 攝 影 Movie 電 影 Choir 合 唱 RESUME

WORK EXPERIENCE

誠品生活股份有限公司 使用者介面 & 體驗設計師

UI/UX Designer

SEP 2021 - NOW

建構與維護 Design Guideline 、 Web Design System 確保產品視 覺和體驗的一致性。

透過競品調查分析優化、規劃 Web 和 App 設計與功能。

參與 B2B 後台系統介面設計,製作更有易用性的介面。

使用 Scrum 進行的專案開發,有彈性的調動。

跨部門與 PD 、 Front-End 、 QA 、 IOS 、 Android 等部門積極溝通 協作。

運用自身切版撰寫能力減少與前端工程師溝通成本。

UX 意見整合,規劃優化項目改善介面體驗。

手動測試新功能上版是否與舊有功能、介面執行互動或跑版問題

製作 Prototype 幫助團隊更好地協作,減少誤解和溝通成本

Jieyou studio 解憂製物所

資深品牌設計師

Senior Brand Designer

JUL 2020 - FEB 2021

執行網站 UI/UX ,提高品牌曝光量並增加 28% 的顧客詢問。 ( 使

用 Bootstrap4 、 CSS 、 HTML 、 JQuery)

研究客戶背景、 TA 特性和競業分析,制訂品牌商業模型。

在網站中設計互動區塊,建立與顧客感性的情感連結,提升品牌 CX 。

執行 Logo 及品牌形象策略,提升 17% 的瀏覽率。

ROYAL ELASTICS

商品部 產品經理

JUN 2017 - JUL 2020

Product Manager ( Team Lead ) FEB 2018 - JUL 2020

Leadership

- 帶領三人團隊。

- 安排團隊執行每季商品開發。

- 經常與成員進行討論,提供設計和專業技能上的指導。

- 管理團隊時間和預算,監督推動專案項目的進度,確保團隊達 到目標。

- 提供實質教育訓練、文件,積極推動部門的長期發展。

用趨勢分析、市場反應,針對不同客層的需求設立商品線、價格 策略及成本控管。

SWOT 戰略分析、競業對手商品性能和市場研究,針對優劣勢與 市場機會提供策略執行。

常跨部門溝通協調確保商品銷售、企劃執行。

實際田野調查、客戶訪談,將客戶實際體驗的反應蒐集整理,用 於調整目前已開發產品或往後的新產品。

視覺暨產品設計師

Visual and Product Designer

JUN 2017 - FEB 2018

負責開發項目有鞋款、大底(鞋底)、包款、配件、五金、 Pattern 等等。

品牌活動主視覺設計。

與合作廠商聯繫確保商品生產狀況。

20 20
20 21
。 20 22 ABOUT ME

20

17

網路電影『娥媚扣殺』

海外經歷 Overseas Experience

美術助理

Assistant Art Designer

DEC 2016 - FEB 2017

負責道具製作,透過繪畫應變能力,使道具效果提升。

協助採購、場景陳設和拍攝現場美術支援等。

暨任該電影的電影平面設計師,設計電影中所需平面設計(虛擬 品 牌、書冊封面、新聞廣告等設計)。

Jorsindo 小老婆汽機車資訊網 影音剪輯師

Film Editor

透過影視後製能力增加公司影音生產。

20 15

JUL 2015 - JUL 2016

負責影片和平面企劃、腳本構想、影片剪輯後製。

JAN 2014 - MAR 2015

Assistant Visual Design

構思文具設計和視覺企劃的提案並執行。

運用熟練的插畫和設計技能,開發文具商品。(開發書衣、筆袋、 明信片、 貼紙等等。)

商業攝影:

- 拍攝、編修商品照為 POP 、行銷活動和網站使用。

- 拍攝場景設計、佈置,加強商品形象和情境效果。

AWARDED

臺中市立圖書館 形象識別系統徵件比賽 - 入 選 實務專題競賽『時冊 TIME BOOK』- 優 勝

國防部 PHM 短動畫 - 人物 & 元件插畫

台北世紀合唱團『她說』 35 週年音樂會 - 主視覺設計

裕永食品股份有限公司 - Logo 設計

松韻合唱團『穹蒼』音樂會 - 主視覺設計

Jorsindo 週邊商品開發、印花設計

松韻合唱團『邊境漂流』音樂會 - 主視覺設計

絕境重聲 國際知名客席指揮 聯合音樂會 - 主視覺 & 多媒體設計

松韻合唱團『時光絮語』音樂會 - 主視覺設計

福容大飯店 15 週年慶 - 主視覺設計

明台產險 - Web & Mobile UI 設計

Ultrahard 超硬股份有限公司
視覺設計助理
16
20
MAY. AUG. JUN. MAY. JUN. MAY. MAR. NOV. OCT. 2021 2021 2020 2020 2020 2017 2017 2017 2016 2016
CASE JUN.
2021 2015 EXPERIENCE

UI / UX DESIGN

目 錄 1 誠品線上 NEXT In FASHION 解憂製物所 明台產險 8 16 24 32
CONTENTS 2 OTHER PROJECT ROYAL ELASTICS 40

專案簡述 Project Breif

『誠品線上』有別於過去的誠品書店網站,除了可以訂購書籍外,

也可以在上面購買到 生活日用、五金、 3C 等多樣性商品的電商平

台,加上行動裝置市場的發展,誠品決定將目標資源投入開發 IOS

與 Android 的 App 。

Web & App UI/UX Design

Figma 、 Sketch 、 Zeplin 、 Illstration 、

Photoshop

使用軟體/
執行項目/

Overview

需求問題 Problem

讓使用者順暢瀏覽商品快速找到資訊重點。

-

由於網站商品眾多,察覺了使用者在購買國過程中, 如何快速瀏覽找到商品資訊並加速使用者結帳速度。

滿足更多使用者更多樣化的使用情境。

專案目標 Goal

・將新功能加入 Web & App ,完成開發並上架。

・建立元件庫,以利於管理設計稿和減少設計決定成本。

・依據已上線平台,優化其介面和使用體驗。

・藉由競品分析劃分重點功能和次要功能,進行實作開發。

使用體驗和功能日漸增加,察覺使用者有其他新的操 作需求,期望除了基本功能開發外,也能拓展有更好 的體驗和更友善的功能操作。

執行團隊 Team

UIUX 設計師、前端工程師、後端工程師、 QA 工程師、 Devops 工程師、專案經理

Responsibilities

依資訊架構分配

專案初期會依照專案經理的資訊架構進行切分,評估分配每個 Sprint 的大項目 和須要執行的子項目。

流程與組件設計

開發較大新功能前期,會先針需求和對其他競品進行分析, 提供 初版 Lo-Fi

Wireframe 統整後並提供希望的風格、樣式與專案經理討論,之後依據當週

Sprint 安排進行頁面與 Prototype 設計。

優化介面和體驗

隨著使用情境的增加改變,除了專注於新功能開發,優化原有介面也是不可獲 確的。考量到新功能開發的介面最大值外,也需評估原有的功能介面是否優化 調整,並劃分重點功能和次要功能進行開發和優化。

UI / UX DESIGN

確認實作難度或者是否有邏輯、程式框架限制等問題,過稿確認後會再標示操 作細節。

˙頁面串接流程

˙欄位編輯

˙細節操作流程

˙特殊狀態情境(傳送失敗、頁面失效等)

˙各種情境細節

功能開發完成上到測試站,UIUX會開始進行測試。

˙UI是否與Mockup一致

˙頁面流程是否正確

˙特殊狀態的出現邏輯是否正確

˙新功能和舊功能是否相容,而不會產生跑版或其他異常狀況Bug。

子需求項目完成後,用文字或畫面製作flow,讓工程師可以快速理解畫面順序。

標示與操作細節
eslite.com
UI 與流程測試

功能案例/APP 會員刪除功能

設計“刪除步驟”,讓使 用者清楚流程進展。

提供“會員資料”連結, 協助使用者快速進入該頁 面填寫資料。

除了文字外,加上插圖加 重示意資料刪除的意向。

UI / UX DESIGN

流程規劃

配合IOS政策新開發的功能。 初期期望以兩個步驟完成該功能 , 規劃好 Lo-Fi wireframe 和競品資料和專案 經理討論,之後提給需求部門。

由於利害關係部門期望「 新增簡訊驗證身份」和再多一步「確認刪除介面」避 免後續客訴問題,因此做了目前的流程版本。

原先期望方案

*點選刪除會員帳號後彈出“密碼輸入“確認會員身份 (Step1)

*進入 Step2 畫面,直接顯示誠品點、優惠券、訂單數量,讓使用者出現猶豫 考慮的情境

*按下”刪除“按鈕,成功刪除帳號,跳回首頁

最後確定方案

點選“刪除會員帳號”後進入Step1,閱讀同意點“下一步” 進入Step2 的簡 訊驗證,驗證確認後點選“下一步”進入 最後 Step3 ,點選“確認刪除帳號”後, 已登出狀態跳回會員頁面。

eslite.com
UI / UX DESIGN

Project Learnings

建立元件庫管理設計稿

由於 UI 介面軟體更換, 一開始 進行誠品線上 Web & App 的UI設計並沒 有元件庫可使用,造成設計開發時程拉長外,發生不同頁面相同元件有差 異的狀況。為了避免同樣的問題一再發生,在設計的過程中決定重新建立 元件和更新頁面,以便後續管理維護設計稿。

面對多項功能同時開發的問題

面對設計人力不足的過渡期,時常要同時處理Web和App開發設計,又 會遇到緊急插件,此時容易出現資訊或需求 的 遺漏,也會出現專案衝突等 問題。因此開票記錄顯得十分重要,不僅避免遺漏,也可以確認自身時間 和票數多寡,有利評估可行性和優先級 安排 。

實作團隊資訊同步的重要性

專案中,較常因利害關係人時常變動已確認或新增新需求的狀況,除了先 與PD討論想法和確認其重要性是否必須一同上線完成外,也須忖度和實 作團隊佈達變更事項的時間,頻繁的更動會導致設計、程式不斷大幅修改 而導致專案進度遲滯,太晚佈達可能會有功能疏漏或是檢測時間不夠。

eslite.com

Side Project

NEXT In FASHION

目標客戶 Target

(此 App 設定非多種品牌結合的電商平台)

・ 喜愛歐美的穿著風格

・ 對該品牌有忠誠度的顧客

・ 有網路購物習慣

・關注 Fast Fashion 快時尚流行產業

設計過程 Process

・ 研究分析市面的電商品牌 App

・ Function Map

・ 整體視覺風格擬定

・ Lo-fi Wireframe

・ 流程設計與 UI 設計

・ Prototyping

解決方案 Solution

・使用介面簡單化,排除視覺干擾

・用戶結帳便利性,快速下單

・商品瀏覽順暢

專案時長/ 設計項目/ 使用軟體/

25.MAR.2021 ~ 26.APR.2021

App UI Design

Adobe Xd

UI / UX DESIGN
prototype

以電商角度 觀察分析 其他品牌介面、動線規劃,和細節等。

( 分析的 App 如下: FILA 、 PUMA 、 OB 嚴選等電商品牌 )

觀察問題如下:

介面配色和商品配色相互干 擾,影響操作體驗。

底排功能列表按鈕和使用裝 置功能預留空間不夠,點選 按鈕時會出現干擾。

無結帳步驟進度,填寫資料 過程會不知道還剩餘多少頁 面和時間,容易造成使用者 不耐煩和放棄結帳的情形。

功能按鍵名稱或 Icon 不夠 直觀,讓使用者難以馬上了 解按鈕的用途和訊息。

不清楚是否符合活動消費或 折扣活動資格。

Function Map

解決方法:

統整或減少介面使用配色, 降低視覺干擾混淆。

把底排功能列表按鈕向上移 動一點,將底部預留足夠的 空間,避免操作干擾。

可設計進度百分比條、文字 進度標示等等,清楚還剩餘 多少內容填寫。

盡量使用符合大眾體驗認知 的名稱和 Icon , 或加上介面 操作說明,增加操作了解。

設計標示未符合條件的原因 說明或條件進度條,了解是 否達成該活動條件資格。

目標

・快速下單購買商品。

・清楚知道本次消費是否達成活動資格。 ・解決上述市場分析觀察遇上的問題。

市場分析
4.
4.
UI / UX DESIGN
1. 3. 2.
5. 1. 3. 2.
5.
NEXT In FASHION IOS UI Flow Iphone 11 1 否 否 是 是

底排功能列表按鈕設計偏上和底部預留空間,使操作過程中排除手機裝置本 身功能的干擾。

產品頁面以兩樣商品為一橫排清楚展示商品,在較小裝置使用也不會感到視 覺擁擠。

按鈕“加到購物車”固定在商品詳細頁最底端,方便使用者隨時下單購物。

商品詳細頁面底部設計左右滑動的商品推薦選項,吸引消費者增加點選觀看 更多商品的機會。

商品瀏覽介面 點擊Top
Bar的“ 熱銷排行榜 ”或“ 每月新品 ”可以立即快速瀏覽商品。
1 2 3 4 5 2 (商品推薦選項) 5 4 1 3 UI / UX DESIGN

右圖為用戶購物的結帳頁面,可以清楚知道本次消費符合哪些活動條件,以 及未符合原因,都可立即點選介面馬上了解。

由此列可知道進行到結帳步驟哪一階段,並且清楚得知還有多少步驟可以完 成結帳流程。

用戶可以在最後一步再次確認購買項目,省略回頭確認的步驟。

NEXT In FASHION 購物結帳介面 2 3 1
1 2 3
(展開狀態)

整體視覺風格擬定

考量服裝品牌容易因季別和流行趨勢走向,開發生產不同 顏色的服飾,介面使用無色調加上主色淺金色減少整體視 覺的干擾。

・配色符合當下歐美流行趨勢的極簡、撞色風格。 ・以簡潔、沈穩風格意象,在元件上的細節做呈現。

介面組件 折價券 限時優惠 訊息公告 瀏覽紀錄 商品搜尋 個人訊息 Facebook Instagram Messege Line 首頁 會員專區 購物車 1 收藏 1 NEXT In FASHION 4G 14:00 確認購物車 付款與運送方式 資料填寫 最新動態 熱銷排行榜 每月新品 焦糖色 鐵黑色 COLOR S M L SIZE COUNT 1 S SIZE Buy Now 下一步 UI / UX DESIGN

專案反饋&學習

非會員顧客也能直接消費結帳

由於這是第一次嘗試從無到有 發想 電商平台 App 的 Side Project ,在規劃結帳系統部分還有很多優化空間,可以考慮設 計不登入成會員也可下單購買的方式,讓未註冊的非會員顧客排除因註冊麻煩,而取消購物的可能性。

統一名稱的重要性

相同 連結的按鈕即使是在不同頁面,命名統一也是很重要,即使只有一兩字的些微差異,也可能會造成使用者使用上的 遲疑或誤解。

商品類別增加獨立 頁面或 Bar

此 Side Project 請其他使用者測試後,對於漢堡選單蒐集到兩種反應,部分使用者再點選分類時覺得不夠直覺。漢堡選 單在整理分類資訊收納是很方便,但服裝電商 App 目的為主推商品銷售,若調整成 直接 在頁面上有商品分類 Bar 可點選, 便可再省略一個點選的動作步驟,加快商品瀏覽的速度。

按鈕點選的範圍考量

後續測試過程發現部分按鈕點觸不靈敏的狀況,未來的專案會考慮到 在小 Button 的部分加上觸控的範圍的加強,讓 使 用者的使用體驗 更加完善。

NEXT In FASHION
UI / UX DESIGN

目的 Goal

為品牌架設獨立網站,增加更多曝 光機會和吸引更多對手作課程有興 趣的顧客,並透過網站增加顧客對 該品牌的信任感。

1.針對品牌客群設計符合該品牌風 格網頁。

2.線上販售商品需求,增加品牌收 入管道。

3.展現提供客製化商品服務能力。

4.針對各項課程提供簡單敘述,增 加顧客對於課程項目的了解。

負責部分 Responsible Part

UX Research

- 田野、 市場調查

- Persona

-用戶需求、分析

UX Design

- Web flow

- Wireframe

UI Design

- Mockup

Responsive Web Design

- 網頁 切版

- 網站上線

V isual Design

- Logo Redesign 成就 Achievement 執行UX/UI架設網站,提高品牌曝光量 並增加28%的顧客詢問。

架網站後,每週課程詢問人數5~8人 架網站前,每週課程詢問人數 2~3人

專案時間/ 負責項目/ 程式軟體/ 程式語法/

OCT. 2020 ~ JAN. 2021

UX & UI Design

Visual Studio Code

HTML5 、 CSS3 、 jQuery 、

BootStrap4

Background Research

時代影響台灣憂鬱人數逐年增加,根據衛福部資料統計2019年,服用抗憂鬱藥物近 140萬人 。 其中女性人數(83萬人)高於男性人數(56萬人)。

憂鬱增加的成因複雜,社群媒體、家庭人際都有影響,也是憂鬱症年輕化的主因。

Target Audience

・20~35歲 年收入20萬以上

・生活、工作步調較快族群

・喜歡動手做東西,織圍巾、製作小物件、做料理、活動體驗等

Interviewees 21

Analysis

挑 戰

・打破一般人對於手作是給小朋友做的刻板 印象。

・產品設計除了吸引一般顧客,也須吸引到 憂鬱族群目光,激起興趣。

機 會

・UI視覺很療癒,目前市面競品大多偏兒童 客群,相同性質客群風格的網頁很少見。 ・主打成人客群課程,有別於一般兒童市場。

台灣人使用抗憂鬱藥物逐年提高 (衛福部資料) 130 135 140 125 120 (萬人) (年) 105 106 107 108 139.7萬 133萬 127.3萬 121.2萬 70 80 90 60 40 50 (萬人) (年) 105 106 107 108 56.5 54.2 83.1 78.7 74.9 71.2 52.4 50 男 女
人 實地採訪 社交媒體採訪 Method 8 13 Secondary Persona 20歲~25歲 Primary Perosna 25歲~35歲 35歲以上 Age 20歲以下 12 2 6 1
總數受訪者
UI / UX DESIGN

Persona

20~26 歲 / 大學生、職場新鮮人

27~35 歲 / 白領上班族

小資族群,處在青年危機階段。

i世代最大特點就是焦慮和憂鬱等心理問題比較嚴重。

身體比以前安全,心理比以前脆弱。

( i世代指1995–2012年出生的人) 大學剛畢業的社會新鮮人,目前從事一 般行政人員,朝九晚五的上班時間,偶 爾加班。興趣喜歡收集扭蛋、公仔和擺 飾,也關注很多外國公仔的IG。

多數時間休閒喜歡看電影、小說、漫畫、 youtube影片,偶爾假日會去參加一些 畫畫課,喜歡一個人靜靜隨意畫想畫的 東西,又不需要特別自已準備材料和收 拾善後,但因為外面的繪畫課程基本都 是有設計好的主題,很少有可以只畫自 己想畫的東西,又有老師偶爾可以協助 瓶頸。

一般網站上找到的資訊大多都和小朋友 有關,很少有提供給一般成人的繪畫課 程。不排斥嘗試其他課程,但不喜歡和 外面一般補習班那種太多人的上課環境。

尋找應對人際、工作、人生方向和家庭等壓力。

目前在科技公司擔任QA工程師,平常假 日喜歡在家裡作甜點料理、針織、畫畫 和刺繡等手作,也會主動翻閱購買相關 書籍和材料包,對於手作活動很感興趣, 但很少有專門開放多元手作課程的地方, 或是網路資源很零散。

希望可以找到實體小班課程,也想收到 新課活動消息。

除了假日,如果課程時間不長也希望有 平日晚上的小班課程,因為上班需要長 時間面對電腦,下班會想要離開螢幕和 手機轉移注意,而且假日可能會有其他 活動或是其他事情需要處理。

痛點分析

・網路上手作課程相關資訊零散,難以蒐集。

・無法客製化做自己感興趣的作品。

・難以確保購買的材料包品質。

・上課時間不好安排,無法約一對一授課。

・要自己購買、準備材料好麻煩。

・從無到有好像很難,想要有人在旁指導。

・相關手作內容大多偏向兒童風格,很少有 符合大人偏成熟的風格。

用戶需求

・想要有豐富的課程選擇。

・主打20歲以上的客眾。

・提供客製化的商品、課程服務。

・透過手作紓解壓力。

・可以自由選擇要購買實體課程,或購買材 料包觀看線上教學。

26 27 Jieyou studio. 紓解壓力 感官療癒 定期按摩 使用擴香機、精油 體驗手作課程 教練課程 欣賞音樂、電影等活動 買會員月票、年票 泡澡使用沐浴球 塗鴉、繪畫 上健身房 手 作 25~35歲 20~25歲
Secondary Persona Primary Perosna
Sandy 23歲女性 Bess 29歲女性

Index Page

以情境帶入方式,客戶第一時間接收到『手作、舒壓、療癒、輕鬆、 慢步調』的品牌形象。

最新消息欄位讓客戶可以迅速前往目標想看到的內容頁面。

手機版本則是以文字為帶入情 境的方式呈現 。

UI / UX DESIGN

Class Introduction Page

頁面開頭同樣使用情境照開始,維持品牌 形象。

課程介紹的欄位採取交錯的棋盤狀排法, 使整體畫面不會略顯呆板。

Shop Page

商品販售頁面設計輪播功能,讓客戶可以 迅速了解和瀏覽商品項目有哪些 。

使用 bootstrap 的卡片設計簡單明瞭的商 品販售欄位,乾淨簡潔又好閱讀 。

28 29 Jieyou studio.

Mockup

UI / UX DESIGN

Project Learnings

客戶樣貌的洞察

在這專案中有機會能做到前期的市場分析和潛在客戶訪談,訪談過程 中除了更清楚之後要著手的網站風格樣式外,也獲得 了額外新資訊,

例如 『有購買材料包在家手作的興趣』,品牌也因此額外增加了材料 包的販售服務。

略為可惜的是沒有考慮做到負面人物誌的部分,抓出不合適族群降低 廣告投遞成本等運用。

制定優先層級的考量

當需求越多就越需要列出優先順序,考量目前哪個需求最重要,可使 後續設計過程更為流暢。

品牌為創新期希望以品牌推廣、形象宣傳為主,銷售需求暫為次要。

30 31 Jieyou studio.

MSIG 明台產物保險

客戶需求 Needs

『公司希望有別於一般大家既定印象中的保險業 風格,能吸引年輕消費族群外,也希望可以保有

帶給客戶專業度和信任感的好形象。

例如在活動頁面配色能有些變化,有別於主色紅 藍色,可以嘗試輔助色和其他顏色搭。 』

設計過程 Process

・ 與客戶討論頁面需求

・ 鉛筆稿 Wireframe 討論

・ 整體視覺風格擬定

・ Web UI 設計

・ Mobile UI 設計

負責部分 Responsible Part

・ Web & Mobile UI Redesign

・ 元件設計

解決方案 Solution

・ 改變原先漸層色的元件和設計,網頁風格以 乾淨現代感的扁平式設計。

・ 將內文明體字改使用黑體字,讓使用者有冷 靜沈穩的感覺,並增加閱讀便利和速度。

・使用明橘色帶給使用者精神、活力、明亮的 感覺,作為頁面輔助。

專案時長/ 設計項目/ 使用軟體/

JUN.2016 ~ JUL.2016

電腦介面設計、手機介面設計

Adobe Photoshop

UI / UX DESIGN
32 33

明台產物保險 舊版本網頁

專案負責部分

由於專案時程較短和預算關係,依照客 戶提供的需求和網站架構 負責網站視覺 風格 Redesign ,和 負責"個人險"支 線的頁面設計 ,提供客戶公司延伸其他 頁面設計的視覺規範。

底色和文字色對比不明顯,造成閱讀不易和降低閱讀 速度。

按鈕、標題、內文字字距無調整,視覺上過於擁擠。 字體大小不明確,無法第一時間找到重點資訊。

半透明列表文字會被網頁底圖干擾,閱讀不清楚。

使用者痛點

・網頁介面風格有守舊、古板的感覺。

・資訊閱讀不易,無法迅速找到符合的條件內容或相關 資訊,尤其是表單內容。

改善目標

・網頁風格年輕化,並保有該產業的專業感和信任感。

・減少介面閱讀上的干擾、影響。

在舊網站中我發現......
・ ・ ・ ・
Flow UI / UX DESIGN
Web

Mockup

保單查詢 (登入)

已投保的保單

首頁優化

調整 Logo 和其他分頁的距離和比例。

分頁字型更改,調整按鈕間距,使視覺較為簡潔不 擁擠。

活動訊息 訊息內容

此三則保險為當時主推方案活動,放置在首頁明顯 的中間位置增加點擊觀看率和迅速查找。

安排 More 按鈕在公告區旁, 讓 有興趣想了解更多 的使用者 點選而瀏覽更多。

旅平險方案介紹 保單內容說明 海外緊急救援卡

公告區活動消息數量減至 6 條,減少頁面過多資訊 降低文字密集度。

34 35 明台產物保險
・個人險
首頁
保單查詢 ・ 登入
查詢已投保的保單 旅平險
方案介紹 - 海外緊急救援卡程序內容
保單內容說明 活動訊息
訊息內容
首頁

旅平險 頁面

該頁面為旅平險方案頁面,欄位配色使用輔助色 綠色和橘黃色,使頁面傳達明亮和有精神的感 覺。

下方的條款資訊和上方表單使用重要性為次級, 壓灰底減少對比,凸顯上方圖表資訊。

旅平險 方案介紹頁面 旅平險 內容說明頁面 旅平險 方案介紹頁面(手機版)
UI / UX DESIGN

登入查詢已投保保單

個人險 登入頁面

將查詢條件安排置頁面 上方,讓第一次登入的使 用者在視覺動線可以先 落在"查詢條件"處。

手機版本"查詢條件"處 以白底做呈現,增加閱讀 方便度。

將分頁相關子項目設計 在右邊區分點選,設定跟 隨頁面滑動讓使用者隨 時可以點選其他子項目。

保單查詢 顯示頁面

原先舊版網頁表單設計 的底色和文字色對比不 明顯,造成閱讀不易和降 低閱讀速度。

因此為底色文字配色加 強對比度,並且用顏色區 分不同類別保單,降低太 多保單找不到目標保單 的問題。

36 37
明台產物保險
UX / UI DESIGN

因應預算與開發時程必須做出權衡

此為第一次獨立接觸介面設計的案子, 主要以 Redesign 為目標, 該公司預算考量和專案開發時程等因素,因

此 較難提出 新增 新使用功能和調整頁面支線安排,加速專案流程。

Wireframe 與詳細備註文字的重要性

在執行專案中後期,才發現後面新增的某頁新頁面沒有考慮到串連,後續讓前端工程師另外新增按鈕補上,讓 我意識到『新增項目都需同步更新(例 : Wireframe 、 Web Flow ),以防止在核對過程中有疏漏,而且遺漏之後 可能會動用大量資源彌補,往後需更謹慎』。

考慮『看不見』的需求增加使用體驗

介面功能上,頁面較多的支線可以在介面上考慮新增麵包屑導航 (Breadcrumbs) ,除了方便知悉頁面層級外, 也方便照使用者心意返回頁面,往後若有機會再更新網頁,可將這部分列入規劃安排。

介面系統、元件管理分類的重要性

由於部分頁面顯示資訊較多,各式各樣的欄位管理標註就相對重要,提供之後客戶公司的設計師及前端工程師 能夠快速檢閱。

專案學習

Product Design

金 大 底 鞋 款 標 籤
OTHER PROJECT

Graffiti Design

40 41
ROYAL ELASTICS

CAMOFLAGE

OTHER PROJECT

FLAGE

都市叢林-變形迷彩

都市是現實與虛幻的無限交疊。網際網路重新定義了時間和距離 ,行動裝置 、 4G 、社群軟件、大數據,讓一切都像唾手可得但又似光年般遙遠。

都市叢林與通訊軟體對話視窗的結合,搭配上RE 的塗鴉LOGO ,幻化出全新 的迷彩Pattern,風格鮮明、跳耀、獨特吸睛。

專案項目/ Pattern 設計、迷彩系

列主視覺、周邊商品

42 43
Manhood Rider Bishop
迷彩 Pattern 系列
ROYAL ELASTICS

Graphic Design

OTHER PROJECT
44 45 ROYAL ELASTICS

Pattern Design

跟髓每季不同的流行趨勢為品牌設計 印花、塗鴉,增添商品的豐富變化。

46 47 ROYAL ELASTICS

Visual Design

OTHER PROJECT
48 49 ROYAL ELASTICS

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.