UI/UX Design
YIBA Live streaming App
專案類型
UI/UX Design
專案時間
2021 Jul.~Oct.
在疫情的衝擊下，我們待在家中的時間越來越長，對於休閒娛樂的需求逐漸上升，於是YIBA就此誕生。我們是一款關於「寵物」、「社群」和「直播」的平台，我們與別人不同！主打療癒、可愛的毛小孩才是我們的主角，你不用擔心露面，只要分享家中可愛的毛小孩就好！甚至還有機會收到粉絲們的抖內，讓毛小孩用牠的可愛替自己賺一點飼料和玩具吧！
關鍵字
App、Social media、Pets、Live streaming、fun、UI Design、UX
我的角色
UI/UX Designer
使用工具
Figma、Adobe Illustrator
｜專案概況
I. 專案挑戰
-
從0到1開發設計的全新產品
在臺灣目前還沒有人為寵物專門做一個社群平台，大部分都是使用現有媒體來分享和經營帳號，因為沒有人設計過類似的產品，所以我們沒有地圖可循，只能靠訪談與驗證來找出一條適合我們的路。
2. 想讓使用者保有全新的驚喜感！
主要TA鎖定在18~35歲的女性，當有些設計方向需要透過訪問來驗證市場反應時，卻困難重重。因為想讓使用者對產品推出後有全新的驚喜感，所以我們只能秘密的進行調查或是暫時透過內部票選方案，等推出後再做實體的調查與訪談。
III. 世界觀
Pet wonderland，當打開YIBA App時，彷彿身在一座寵物樂園中，您可以盡情的與喜歡的毛孩們互動、遊玩、送禮；也可以讓自己成為直播主，體驗被眾人注目、歡呼的感覺。
II. 專案目標
1.打破民眾對於「直播」這件事的負面觀感。
2.要讓直播主覺得直播是件簡單且有趣的事。
3.要讓使用者進入到Pet wonderland的感受。
4.主打臺、日市場，設計時必須同時考量到文化、喜好、語言…等的差異。
｜設計開發
1.設計架構
產品經理將功能與規格訂好後，由我們負責製作wireframe，並在Planning Meeting中使用wireframe與工程團隊反覆進行討論、修改與確認。
2.介面設計
以確認好的wireframe為架構，由我開始進行介面設計，包含視覺、功能、版面與呈現形式等，並製作iOS、Android雙系統和Max.Mini尺寸的Hifi-mockup，最後進行標示並設訂Key值。
3.驗證設計
該階段功能開發完畢後，工程團隊會進行Demo與全公司測試，藉此確認開發是否符合目標與需求，並找出與設計不相符或需優化的地方，反覆進行測試、修改、優化、確認，以確保此該階段開發完善。
｜優化設計重點介紹
1.「首頁」中的改善要點
定義問題與討論
因為在用戶未接觸過品牌時，都是用第一印象（首頁與視覺）去感受並定義品牌價值，所以強化首頁的樂園感受對我們來說很重要。
產品的世界觀設定為「寵物遊樂園」，但舊版畫面經過測試與訪談後，用戶卻感受不到樂園的氛圍。本次優化的重點為強化用戶進入到產品中寵物遊樂園的氛圍與整體感受。
擬定並排序解決方案
目標 :將產品的「寵物遊樂園」感受變得更濃厚。
→1.將下面的Tab icon 變得更熱鬧、活潑。
→2.嘗試不同的繪畫風格與色彩調整。
→3.從on boarding頁面開始營造氣氛，包含圖像與文字。
於是我們嘗試了幾種畫風，並選出最終方案：
・色鉛筆手繪風
→此風格使用色鉛筆手繪，營造一種親和力高、溫暖的氛圍。但居家、日常的感覺比較多一些。
・Ｑ版向量風
→將原本椅子、茶水、主角的元素套用在「樂園」的主題上，變成傲嬌的貓咪坐在寶座上享用下午茶的愜意有去感受。
Before
After
・Tab的圖樣風格不同
→因首頁圖像較豐富與複雜一些，且因程式開發關係，所以將圖樣設計的較簡單，但看起來稍為突兀。
・加強樂園感並統一風格
→將樂園的元素放進tab設計中，原先因開發的關係，在安卓版本會縮小呈現，經過了解、溝通後，調整成接近設計圖的版本。
Before
After
・風格色彩較低彩度
→較低彩度的手繪風，給人一種日系、親民、溫暖的感受，但樂園的感受較不明顯。
・樂園形象較不鮮明
→雖然有達到可愛、溫暖的感受，但沒有樂園的活潑有趣與繽紛多彩。
・彩度與顏色調整
→將畫面的用色彩度調高，並將前景處加上有樹叢，與更多隱藏的小細節，讓畫面變得更豐富、更有層次。
・歡迎進入寵物樂園
→將樂園與寵物元素與功能結合，並調整風格以設計的統一性，並使用雙色設計，較不易搶走主角的目光。
2.「直播間」中的改善要點
定義問題與討論
直播間的聲音彈幕功能為主打特色之一，但因為將功能藏太深不易找到，且對於初次使用直播產品的用戶來說，icon不易辨識與理解，所以決定將彈幕功能層級提高，並優化其表現方式。
目標為讓用戶多使用聲音彈幕的功能，並誘使發送彈幕，讓更用戶願意嘗試和了解如何使用此功能。
擬定並排序解決方案
目標:將彈幕功能階層提升，並使用圖像和文字引導使用。
→1.將文字與彈幕訊息合併、使用tab提示功能可切換、增加文字輸入空間。
→2.將彈幕性質與彈幕特效結合，可讓使用者更清楚彈幕效果。
→3.加上透明色塊，讓使用者清楚知道可操作範圍。
Before
After
・icon不易表示彈幕
→原先的icon設計為「訊息」＋彈幕的「噴射」效果，但對於初次使用直播app的人，不易理解icon代表的意涵。
・壓縮文字輸入空間
→原版設計因需切換文字與彈幕功能，所以佔掉了同行的文字輸入空間，使用體驗較不佳。
・功能以圖文表示
→將功能按鈕改為使用Tab+文字和圖示表示。讓使用者對於此功能一目瞭然，並加上placeholder提示。
・文字輸入空間大
→將功能切換移至上方後，下方的文字輸入欄位變大，讓使用者一次可以看到較多的文字，使用彈性變大，體驗也更好了。
3.「直播主-更多功能」中的改善要點
定義問題與討論
因為當初設計時，未明確定義功能icon的顯示方式，所以導致有些顯示功能、有些顯示狀態，易讓使用者混淆，造成使用體驗不佳。
此次目標為盤點與統一所有已開發、開發中與待開發功能的使用一致性。
擬定並排序解決方案
目標:將產品中的功能icon統一成顯示功能的「現在狀態」。
→1.調整文字描述，讓使用者更能理解當下狀態。
→2.在顯眼的地方加上持續性的「狀態提示」。
→3.優化icon，讓功能和‘狀態表示更加明確。
因開發時程關係，我們刪掉了一些尚未開發的功能，並調整介面。
Before
After
・六個直播主功能
直播主介面中，可使用「更多功能」來調整直播內容和互動，例如在直播間設置公告與發訊息給觀眾...等等。
・icon顯示邏輯需統一
→在產品中的icon有非常多，但有的是顯示狀態、有的則表示功能，容易讓使用者產生混肴，需統一。
・移除未開發功能
→我們將MVP的功能留下，並移除「人物濾鏡」、「互動」等需要較多人力開發的功能，並微調介面。
・統一icon顯示邏輯
→經過團隊內部討論，決定將icon顯示表示為「現在狀態」。且因直撥主畫面不會跟者反轉鏡頭而改變，所以我們加入toast與常駐提醒，提示直播主現在畫面的狀態，並優化畫面反轉開/關的icon。
｜品牌與風格指南
-
選用顏色與配色
黃色是代表活力與希望的顏色，令人覺得溫暖、光明的印象，搭配藍綠色、棕色描邊和暖色系背景，讓整體更有走進童話王國的感覺，充滿可愛、活潑、有趣的感受，並搭配馬卡龍色系的輔助色，提升樂園感與療癒感。
2. Icon
Icon設計採用較有遊戲感的描邊外框當作按鈕，並以顏色區分功能與分類，顏色則使用輔助色進行設計，保持可愛活潑的風格。我們使用描邊外框當作按鈕另一方面是因為：直播的畫面通常會很複雜，若沒有特別強調功能按鈕，有可能會在直播畫面中看不清楚。
3. Typography
設定雙系統所用的字型，使用適合的字體與尺寸，不僅能幫助使用者了解使用情境，更能引導使用者更快完成目標。
｜啟發與成長
從不同的面向去改善、優化使用者體驗
實際訪談寵物飼主後，約有7成的飼主認為，因為認為直播這件事很困難，會降低他們直播的意願，因應此原由，我們擬出了解決方案：
A：在我們的產品中，增加「直播小白教學」和「推薦主題」，讓新手直播主可以透過教學服務和推薦主題，更快的融入直播圈，不用煩惱直播該拍什麼樣內容。
Ｂ：提供店家固定直播的方案，由於寵物咖啡廳或寵物餐廳，除了毛小孩以外，還必須提供客人餐點的服務，所以我們提供他定點式直播的方案，以解決必須隨時跟拍毛小孩的困擾。
C：直接邀請潛在使用者試用App直播：
在訪談過程中，我們將產品交給訪談者操作，觀察他們的神情與反應，並且提供一些方法和眉角，讓他們嘗試開直播。其中一位受訪者在我們訪談後，馬上就在社群帳號中開了將近1個小時的直播，並與觀眾互動，體驗直播。
成為真正的使用者後，才會發現的問題