Sharent

Project Type

Product (SaaS)

Deliverables

Brand identity, Website, Mobile app

My Role

Lead Product Designer — Designed the entire app&web( IA, Page flows, Prototyping, Interaction Design, and more.)

Sharent

Project Type

Product (SaaS)

Deliverables

Brand identity, Website, Mobile app

My Role

Lead Product Designer — Designed the entire app&web( IA, Page flows, Prototyping, Interaction Design, and more.)

Sharent

Project Type

Product (SaaS)

Deliverables

Brand identity, Website, Mobile app

My Role

Lead Product Designer — Designed the entire app&web( IA, Page flows, Prototyping, Interaction Design, and more.)

sharent's logo
grid smartphon mockuups
sharent's logo
grid smartphon mockuups
sharent's logo
grid smartphon mockuups

Overview

由於創辦人長期參與房產管理,深感簽約手續和租金對帳的繁瑣,因此希望開發一個方便易用的APP,讓房東和代管業者能隨時隨地輕鬆管理房源、查看租金狀況。同時,Sharent 也提供租客端,讓租客可以透過線上支付租金,房東則能實時對帳。這將有助於將繁瑣的紙本操作轉移到雲端,提升整個租屋流程的效率。

於2019年末,開啟了這項計畫,我很期待也很榮幸,可以直接與專案經理、創辦人一同參與架構討論,並由我負責將內容統整並延續後面的設計規劃。

websit user interface presentation
websit user interface presentation
app user interface presentation
app user interface presentation
grid of websit user interface presentation
grid of websit user interface presentation

Mapping out the whole application

租屋管理App 擁有房東和租客兩端,因使用者僅需使用一組帳號即可切換使用的身份,需要清晰且有組織的資訊結構來為頁面設計做最好的規劃準備。在我負責專案的4年中,產品經歷過幾次的討論與迭代,從一開始的最小可行的功能開始製作,到後來慢慢添加以行銷導向的功能,例:免費的律師諮詢、租客黑名單回饋

Information architecture of landlord

a hi-res PDF.

Information architecture of tenant

a hi-res PDF.

Design System

一個極其輕量的設計系統,並非在一開始就創建,而且在一個主要風格下逐步完善其所需要的元件,除了不浪費時間在製作不需要的元件外,更能因應需求設計出符合的元件。

logo with name of the brand
logo with name of the brand
logo with name of the brand
some icon and tags of design guideline
some icon and tags of design guideline
some icon and tags of design guideline
some components used in notifications
some components used in notifications
some components used in notifications
some components used in dashboard
style system
component: toggle&chip&radio button
component: toggle&chip&radio button
component of notices
component of notices
presentation of where the component were used

APP (iOS&Android)

使用Flutter同時開發iOS和Android兩個系統的APP,用較短的時間先上架最小可行產品進行測試,再透過使用者回饋不斷優化迭代產品。

app store mockup

原型展示

以下分享三個流程操作與設計理念:新增房源、Sharent 錢包、線上繳租

新增房源

透過問答的方式引導使用者新增房源,比一次把所有表單欄位呈現出來,更能讓使用者用最少的認知負荷去完成目標任務,前提是步驟不會太多(約3~5個步驟是最洽當)

而在頁面上方顯示步驟進度條,就像是創建了一條 「清晰的完成路徑」,讓使用者一開始就清楚了解到達最終目標所需的步驟數量,這樣可以顯著減少放棄的可能性;從心理學的角度來看,當你知道達成任務必須完成多少步驟,你就更有可能完成流程

在頁面左下方,使用者可以查看目前的訂閱方案,並隨時查看「可新增房源數量」和「已使用的額度」。透過預先顯示可用餘額數量,我們可以避免無法新增房源而引起的錯誤反饋,這有助於提升用戶體驗。

(當然,錯誤反饋仍是需要的😉)

Sharent 錢包

不只是記帳APP!若租約有與租客綁定,且租客透過線上繳租,房東不必一一對帳,於第三方金流撥款後,款項將保存在房東的sharent錢包內,房東可以在這檢視每間房源的金流狀態及申請提款,還可以透過日期、款項狀態查詢每筆款項紀錄。

日期篩選的日曆元件中可以在某些日期下方看到不同顏色的小圓點,這是什麼呢?

我們將「入帳通知 🔵」及「撥款通知 🟢」設計成不同顏色,在日期篩選的時候就可以先看到哪些日期有入帳或撥款的紀錄,在查帳的過程更省力。

線上繳租

#租客端

租約與房東端綁定後,系統將自動發送帳單,租客可以使用線上繳款功能(ATM轉帳、超商條碼、超商代碼、信用卡)。

若租客同時有兩間以上的租約,也能在一個流程中一次完成繳款,這邊採用user習慣的購物車結帳流程思維去做設計,不論是不同租約的帳單還是同一間但有多筆帳單需繳納,都能一次完成,提升了繳租效率。

若租客同時有兩間以上的租約,也能在一個流程中一次完成繳款,這邊採用user習慣的購物車結帳流程思維去做設計,不論是不同租約的帳單還是同一間但有多筆帳單需繳納,都能一次完成,提升了繳租效率。

App Landing Page

用landing page展示核心價值,吸引目標用戶下載使用。不需要滾動頁面就可以立刻知道產品用途:節省時間、房東與租客無紙化簽約、繳租與自動對帳。

# <a href="https://www.freepik.com/free-psd/website-template-laptop-screen_3383792.htm#query=laptop%20mockup&position=2&from_view=keyword&track=ais&uuid=145a8313-c616-488e-a0ec-f2fc781ac518">Image by rawpixel.com</a> on Freepik
# <a href="https://www.freepik.com/free-psd/website-template-laptop-screen_3383792.htm#query=laptop%20mockup&position=2&from_view=keyword&track=ais&uuid=145a8313-c616-488e-a0ec-f2fc781ac518">Image by rawpixel.com</a> on Freepik
# <a href="https://www.freepik.com/free-psd/website-template-laptop-screen_3383792.htm#query=laptop%20mockup&position=2&from_view=keyword&track=ais&uuid=145a8313-c616-488e-a0ec-f2fc781ac518">Image by rawpixel.com</a> on Freepik
在APP上架的同時,我們也將 APP的landing page 完成上線。在訪客最先看到的hero區塊就以房東和租客兩個角色利用app介面互動來表達最直接的核心功能;而下方則以房東角色為主,呈現房東端APP的五大特色功能,包含房源管理、租約管理、帳單管理、集中抄錶和推播通知。
設計風格和APP介面相呼應,利用可愛的塗鴉插畫風讓處理繁瑣事務的心情得以更加放鬆。
a woman using a laptop
a woman using a laptop
a woman using a laptop

Website

APP讓人有即時的操作和體驗,但對於需要管理大量房源和租約的使用者來說,透過電腦的大螢幕操作網站,能夠帶來更好的體驗和效率,所以我們在APP上架三年後,從穩定的迭代中,同時在網站上開發必要核心功能。

dashboard page in web view
dashboard page in web view
dashboard page in web view
dashboard page in mobile view
dashboard page in mobile view
即使是網站也有針對不同螢幕寬度做設計,所有顏色與元件皆維持在同樣的風格下,讓切換使用的過程中仍保持一樣的體驗。
mockup with page of adding property
mockup with page of adding property

More wrok

Let’s make something together.

I’m easy to work with and

love

a friendly collab!

BlairKu ©2024

Made with love and fries

Based in Taipei, Hsinchu

26 Friday

05:17:13

Let’s make something together.

I’m easy to work with and

love

a friendly collab!

BlairKu ©2024

Made with love and fries

Based in Taipei, Hsinchu

26 Friday

05:17:13

Let’s make something together.

I’m easy to work with and

love

a friendly collab!

BlairKu ©2024

Made with love and fries

Based in Taipei, Hsinchu

26 Friday

05:17:13