top of page

2021.04-2021.05

類型 Redesign  |  擔任角色 UI/UX設計

東立電子書城 提升次元文化的閱讀體驗

改善閱讀線上漫畫之流程及購買系統,並重新整合各式書籍內容,讓使用者能夠更加順暢進行閱讀、購買。

並加深其品牌風格,加強個人化設計

專案背景

東立出版有限公司是台灣的漫畫、輕小說出版社,以翻譯出版各類日本漫畫為主。主打著傳遞日本最新話數漫畫,以及精緻快速的翻譯,能定時的接收到最新連載。

之所以想進行Redesign是因為個人及朋友在使用介面及購買功能上時常感受不佳

並希望透過優化同時建立符合東立品牌形象之設計

設計流程

收集評價反饋
並進行實際
用戶研究

定義問題並
重新規劃流程

建立設計系統與繪製icon

​評價反饋

APP Store / Google Play 商店評價及實際用戶訪談,歸納重點修改方向。統整​整體商店評價

80% 觀看漫畫時跳頁、讀取不佳的系統問題 20% 則有搜尋、介面及分類等功能性的改善需求。

Frame 350.png

我們也實際找了朋友幫忙測試,希望能讓我們更深入了解是否有除了系統以外的核心問題能進一步改善

​透過訪談整合了一些使用痛點:

Frame 349.png

icon標示不清

書櫃排列
​搜尋不易

無法順利找到
連載及單本

介面斷層
​操作不順

視覺設計
過於單調

調整架構

原先架構層級偏多,單一頁面上標籤也較無統整性,嘗試簡化部分頁面架構及命名方式

● 像是新聞頁面原先都會出現輪播BN及電子書選項,但由於在連載/書城兩個頁面中已持續曝光

思考過多的出現是否會讓使用者疲乏或資訊過量,則新聞頁面修改專為活動及消息放置區。

● 將 已購買 移至 個人資訊-消費紀錄 中,起初是參考購物網站中消費紀錄,編列至此處希望能將更多相關(日期/價錢/退書...等)資訊統整比較好查閱。

● 原是好意的每日一抽為何消失了?之前玩遊戲時曾遇過有不少人提起相關抽獎/領獎一類的問題,其中更多人表示

『若這個抽獎只是噱頭,根本沒辦法實質得到東西或東西很爛,那我寧可你不要擺』

個人使用此APP時也嘗試過一周每日進去抽獎,但大約9成都是抽到銘謝惠顧...雖然起頭是很好的設計,但思考到若是沒有想完善此功能的話,不如一開始就拿掉也許對使用者來說會有更好的觀感

螢幕擷取畫面 2022-05-23 122024.png

設計系統

包含品牌色彩計畫、Icon重新繪製...等樣式設計。

0629-2.png
0629-3.png
Frame 244.png
Frame 351.png
Frame 351.png
0629-6.png
0629-4.png
0629.png
0629-1.png
0629-5.png
0629-5.png
0629-7.png
0629-8.png
Frame 244.png

01
首頁展示

將原版卡片式並疊加陰影的設計修改成較簡潔的排版,並將之前過多的分類資訊精簡化

同時也重新設計底部導航Icon,希望能使之更美觀易懂。

Frame 352.png

原版介面使用較多陰影及線條,底部Icon設計有點過時且不直覺

改版後將上下導航改成圓滑形狀,並用深灰+主視覺藍色​線條強調重點。

02
個版頁面

原先需點擊單本才會出現簡介,且舊版設計簡介框太過狹小,資訊不只容易被斷層截斷,亦容易忽略或不清晰

重新設計改為將大綱介紹放置第一位,並將單行及連載的選取統一至上方

讓使用者清楚知道自己在哪個頁面,不再迷路。

連載

S__34504731.jpg
S__34504731.jpg

單行本

S__34504729.jpg
S__34504729.jpg

想看連載第二話卻找不到地方,原來要點選單行本出版

​才能連接到想去的地方

Frame 352.png
Frame 353.png

修改後將各集簡介放置藍色區塊,並加強購買套書、分享及閱讀按鈕的識別度。

03
購買頁面

修改原版容易混淆且不明顯的代幣、餘額及簡介資訊

改為彈出視窗並加深背景陰影,希望讓使用者更清楚正在動作的資訊及動向。

S__34504728.jpg
Frame 354.png

04
書櫃分類
個人頁面

原版閱讀漫畫頁面不明原因容易遮擋到下方頁數,icon標示也不夠清楚。

優化過後加強了下方標示及新增能點選話數的視窗小幫手。

Frame 355.png

05
書櫃分類
個人頁面

優化完最常被使用的上述頁面,後續依照使用者反饋及各種評論,嘗試調整書櫃分類選項及更符合現代之個人頁面。

重新規劃Icon及排版,加入更多能與使用者互動的區塊,並加強代幣及福利點數的視覺強度。

S__34504727.jpg
4_書櫃.jpg
5_個人資料.jpg

06
互動展示

動畫A-1-2.gif
動畫B-1-2.gif
動畫D-1-2.gif

挑戰與反思

# 硬實力與軟實力的培養
第一次以Figma為主製作 UI/UX 作品呈現,製作過程中幸虧朋友們幫助,對於UX的脈絡分析及使用者訪都抓到不少重點,而APP評論上相對多數的系統問題,也常常讓我在製作時陷入思考『若我這麼做真的會比較好嗎?』

顯示出還有更多自己要深入探討的部分。
# 永遠保持好奇心,並持續進步
在製作過程中觀察許多設計師的作品,不只是排版上有很大的學習空間,對於畫面的掌握、動態的模擬、更深入的研究思緒,都對自己相當有幫助。期許下一份挑戰能使作品更臻完善。
# 針對閱讀漫畫的思考,試著考量更多企業需求
過程參考了不少閱讀漫畫的相關競品,有些廣告及宣傳特別明顯,有些將重點放在閱讀漫畫上,但考量到企業的需求,也許有些排版並不那麼適合,又或是需要/不需要的資訊卻可能有更多商業利益要顧及。這次Redesign過程中有好幾處想突破的設計,有些狀況是硬實力面的待加強,有些則需要軟實力不停回頭詢問使用者反饋,期望下一次的自己能在兩者中間取得更好的平衡。

# 平面轉換的邏輯思考

前陣子帶著作品面試各個產業時,剛好很幸運遇到其中一間公司針對此app提出不少建議與提點

寫下來讓未來的自己不只設計上甚至思考邏輯都能更臻完善

原先的介面比較起來比較合乎直觀使用,以及icon/按鈕的大小與顏色配置,都要多注意

改版雖然把部分痛點拉出來改善也顯得清楚,但有些按鈕卻使用相同顏色及大小,有可能會使使用者混亂

過往平面的經驗讓我總是想著豐富畫面,甚至野心勃勃希望讓app煥然一新,但很多時候未必需要修改過大或凸出特色

而是要抓到舊與新之間如何更加平衡,切勿因為自己私心而盲目修改。

bottom of page