PigRent
PigRent
透過介面優化提升租屋流程，帶給房東、租客嶄新的使用者體驗
透過介面優化提升租屋流程，帶給房東、租客嶄新的使用者體驗
執行時間
2017.09 - 2019.05
2017.09 - 2019.05
產品使用平台
Web
Web
使用工具
Sketch, Axure, Principle, Zeplin
Sketch, Axure, Principle, Zeplin
服務公司
家豪科技
家豪科技
專案背景
專案背景
台灣房價高漲，租屋需求日益升高，內政部統計2017年租賃市場有租屋需求的人口數約300萬人，佔全台人口約八分之一，大部分的人都會藉由網路平台或者社群平台找房，PigRent 找個窩希望能夠提供房東及房客一個易用性佳、收費合理、省時快速的租屋平台，帶給使用者全新的租屋體驗。
台灣房價高漲，租屋需求日益升高，內政部統計2017年租賃市場有租屋需求的人口數約300萬人，佔全台人口約八分之一，大部分的人都會藉由網路平台或者社群平台找房，PigRent 找個窩希望能夠提供房東及房客一個易用性佳、收費合理、省時快速的租屋平台，帶給使用者全新的租屋體驗。
角色產出
角色產出
我與其他兩位設計師合作並參與從頭到尾的產品設計流程，負責從前期競品分析，定義產品架構至定義 Design Guide、介面設計以及原型製作，與需求方以及前、後端工程師合作開發。
我與其他兩位設計師合作並參與從頭到尾的產品設計流程，負責從前期競品分析，定義產品架構至定義 Design Guide、介面設計以及原型製作，與需求方以及前、後端工程師合作開發。
專案挑戰
專案挑戰
改善房東刊登房源體驗
改善房東刊登房源體驗
針對房東的使用體驗，我們這次的目標為改善刊登房源的方式以及簡化收費方式，透過資料拆分以及改善介面設計希望能夠將複雜的資訊以更易用、易讀的方式呈現。
針對房東的使用體驗，我們這次的目標為改善刊登房源的方式以及簡化收費方式，透過資料拆分以及改善介面設計希望能夠將複雜的資訊以更易用、易讀的方式呈現。
提升租客搜尋房源體驗
提升租客搜尋房源體驗
針對租客的使用體驗，希望使用者能夠以最輕鬆的方式輕鬆找到合適的住處，透過 360 度及 720 度影像支援技術，減少照片與實際的落差，並提供更好用、精確的搜尋服務，加快找房速度。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
我們的客戶原本都仰賴著 Shopify App 內的各個 App 來滿足客製化的服務需求，但每個 App 之間又或者是與 Shopify 之間其實都會有互相牽制的可能，導致客戶無法打造最佳的銷售體驗來達到最好的銷售額。
第一步，從了解使用者、競爭對手開始🤓
第一步，從了解使用者、競爭對手開始🤓
競品分析📑
競品分析📑
針對不同面向的使用者分析
針對不同面向的使用者分析
競品分析📑
競品分析📑
針對其他的競品分析
針對其他的競品分析
發現需求👀
發現需求👀
透過競品分析定義三大設計機會點
透過競品分析定義三大設計機會點
簡易輕鬆的刊登方式
簡易輕鬆的刊登方式
簡易輕鬆的刊登方式
大部分的平台都是採用一頁式表單，但刊登房源時其實需要非常多的資料，當使用者一進到頁面時常常會感到資訊爆炸，不知道該從何輸入起，若不是專業房東時常在刊登房源可能會在這個步驟就感到挫折。
大部分的平台都是採用一頁式表單，但刊登房源時其實需要非常多的資料，當使用者一進到頁面時常常會感到資訊爆炸，不知道該從何輸入起，若不是專業房東時常在刊登房源可能會在這個步驟就感到挫折。
大部分的平台都是採用一頁式表單，但刊登房源時其實需要非常多的資料，當使用者一進到頁面時常常會感到資訊爆炸，不知道該從何輸入起，若不是專業房東時常在刊登房源可能會在這個步驟就感到挫折。
簡潔易懂的網站版面
簡潔易懂的網站版面
簡潔易懂的網站版面
租屋平台為了收益都會有各式各樣的廣告版位甚至是蓋版廣告，時常令使用者感到困擾，除了感到眼花撩亂外，也沒辦法快速找到需要的功能甚至是房源，有可能會增加使用者的離開率。
租屋平台為了收益都會有各式各樣的廣告版位甚至是蓋版廣告，時常令使用者感到困擾，除了感到眼花撩亂外，也沒辦法快速找到需要的功能甚至是房源，有可能會增加使用者的離開率。
租屋平台為了收益都會有各式各樣的廣告版位甚至是蓋版廣告，時常令使用者感到困擾，除了感到眼花撩亂外，也沒辦法快速找到需要的功能甚至是房源，有可能會增加使用者的離開率。
清楚明瞭的收費方式
清楚明瞭的收費方式
清楚明瞭的收費方式
刊登房源通常會需要刊登費以及廣告費，但為了商業策略考量，平台通常會推出各種不同的廣告方式，對於新手房東來說可能會非常困惑，沒辦法很直覺的選擇適合自己的方案。
刊登房源通常會需要刊登費以及廣告費，但為了商業策略考量，平台通常會推出各種不同的廣告方式，對於新手房東來說可能會非常困惑，沒辦法很直覺的選擇適合自己的方案。
刊登房源通常會需要刊登費以及廣告費，但為了商業策略考量，平台通常會推出各種不同的廣告方式，對於新手房東來說可能會非常困惑，沒辦法很直覺的選擇適合自己的方案。
當目標明確後👊🏼
當目標明確後👊🏼
當目標明確後👊🏼
01.
01.
建置設計系統
建置設計系統
Design system 是基於 Bootstrap 規範來做設計，並且同時參考 material Design、Vuetify Design 設計出適用於 RWD 以及 Web App 的元件。
色彩方面採用白、灰階色彩搭配品牌色以及簡潔、色塊的設計風格，並用陰影創造出深度，做出空間感。
Design system 是基於 Bootstrap 規範來做設計，並且同時參考 material Design、Vuetify Design 設計出適用於 RWD 以及 Web App 的元件。
色彩方面採用白、灰階色彩搭配品牌色以及簡潔、色塊的設計風格，並用陰影創造出深度，做出空間感。
02.
02.
定義產品介面設計方向
定義產品介面設計方向
良好的第一印象
良好的第一印象
乾淨簡潔的網頁版面
不同面向的資訊呈現
沒有廣告干擾
乾淨簡潔的網頁版面
不同面向的資訊呈現
沒有廣告干擾
易用性佳的用戶體驗
易用性佳的用戶體驗
不迷路的網站架構
簡易快速的刊登方式
不同的搜尋結果呈現方式
不迷路的網站架構
簡易快速的刊登方式
不同的搜尋結果呈現方式
清楚明瞭的收費方式
清楚明瞭的收費方式
簡易快速的刊登方式
沒有額外的加值費用
即用即停的扣點方式
簡易快速的刊登方式
沒有額外的加值費用
即用即停的扣點方式
針對不同用戶給予幫助
針對不同用戶給予幫助
針對房東及房客個別有對應的版面，給予不同的需求，沒有雜亂的商業廣告，但有內部房源版位，依然保有商業價值空間
針對房東及房客個別有對應的版面，給予不同的需求，沒有雜亂的商業廣告，但有內部房源版位，依然保有商業價值空間
地圖找房搭配卡片式設計
地圖找房搭配卡片式設計
地圖找房讓使用者能夠更直覺地知道地理位置，卡片式的設計在RWD上可以靈活的變換尺寸，以及顯示的張數，也能夠讓圖片有更好的呈現尺寸，使用者能夠在不點進去的情況下就清楚的看到房源
地圖找房讓使用者能夠更直覺地知道地理位置，卡片式的設計在RWD上可以靈活的變換尺寸，以及顯示的張數，也能夠讓圖片有更好的呈現尺寸，使用者能夠在不點進去的情況下就清楚的看到房源
720º、360º照片看房
720º、360º照片看房
720º、360º照片能夠將房源的全貌完整的呈現，避免被照“騙”到了房源，浪費時間，在網站上就能先看清楚房源，再決定要不要實際探訪，或者直接承租。
720º、360º照片能夠將房源的全貌完整的呈現，避免被照“騙”到了房源，浪費時間，在網站上就能先看清楚房源，再決定要不要實際探訪，或者直接承租。
輕鬆簡易的刊登方式
輕鬆簡易的刊登方式
步驟式的刊登，做到一步一目瞭然，並且及時給予提示，在電腦版更能夠預覽房源，使用者所見即所得，即時預覽資料呈現方式。
步驟式的刊登，做到一步一目瞭然，並且及時給予提示，在電腦版更能夠預覽房源，使用者所見即所得，即時預覽資料呈現方式。
清晰的收費方式
清晰的收費方式
將全部上架方式一次呈現，並且對比有、沒有的項目，讓使用者能夠直覺的選擇需要的功能。
將全部上架方式一次呈現，並且對比有、沒有的項目，讓使用者能夠直覺的選擇需要的功能。
Line Bot找房
Line Bot找房
不必下載APP佔用手機容量，使用Line就能輕鬆找房，手指點一點設定條件就能立即找到對應的房源。
不必下載APP佔用手機容量，使用Line就能輕鬆找房，手指點一點設定條件就能立即找到對應的房源。
反思與學習
反思與學習
觀察、分析，善用工具
觀察、分析，善用工具
在接到工作時，我會先尋找搜集資料，觀察相關競品，確定什麼是必要的功能、什麼是我們可以優化的功能，在分析現行版本是否有相似功能以及運用 Hotjar、GA 觀察使用者在我們網站的相關操作，在進行後續的製作流程。
在接到工作時，我會先尋找搜集資料，觀察相關競品，確定什麼是必要的功能、什麼是我們可以優化的功能，在分析現行版本是否有相似功能以及運用 Hotjar、GA 觀察使用者在我們網站的相關操作，在進行後續的製作流程。
有邏輯的設計
有邏輯的設計
訂定明確的 Design System，不要有自創的元件，知道 HTML 與 CSS 的規則，製作時 Mobile First，在每個階段與工程師持續保持聯繫，若需特別需求，先尋找相關資料、套件，與工程師溝通後再進行，UI 完稿後在 Zeplin Note 出須溝通的部分，如有多種狀態，可以製作簡單的文件給工程師，加快溝通的效率，成為彼此最好的夥伴！
訂定明確的 Design System，不要有自創的元件，知道 HTML 與 CSS 的規則，製作時 Mobile First，在每個階段與工程師持續保持聯繫，若需特別需求，先尋找相關資料、套件，與工程師溝通後再進行，UI 完稿後在 Zeplin Note 出須溝通的部分，如有多種狀態，可以製作簡單的文件給工程師，加快溝通的效率，成為彼此最好的夥伴！
不斷的學習與溝通
不斷的學習與溝通
不斷的學習，UI/UX 是一個每天在更新的領域，必須持續更新自己的想法及技術，以及擁有開放的心態，接受不一樣的意見，保持良好的溝通，與團隊共創最好的產品！
不斷的學習，UI/UX 是一個每天在更新的領域，必須持續更新自己的想法及技術，以及擁有開放的心態，接受不一樣的意見，保持良好的溝通，與團隊共創最好的產品！