登入註冊流程UIUX 及Design System 建立

Backgound

Project Background

開發一個售票系統,用來販售各種展演活動,次需求為販售周邊、自家公司產品等,目標國際市場。

Task

讓進到售票系統的 User都能成功註冊及登入。

Challenge ⚠️

決策者與PM想要與旗下B產品共用會員資料庫,使曾經註冊過B產品的手機帳號可直接登入此售票系統。
預設可能產生的問題: User註冊時輸入於B產品的手機號碼被阻擋,卻不清楚原因。

Solution Detail

註冊前|表單最上方放提示訊息

● 在填寫冗長的註冊資料前先提醒, User 可因應需求切至登入入口。
● 可點擊 Info Icon 獲得完整資訊,確保跟User 想的 APP 是同一個。

註冊中|手機輸入框右側放提示訊息

● 輸入中的錯誤提示訊息、輸入框右側的 Tool tip 補充資訊。

Mock up

Mobile

Design System

Color

Typography

Component

下個作品:e動動郵局APP Redesign