PROJECT DETAILS
2018-2019
UX/UI Design / Prototype / Concept / Sign in / Sign up
Sketch, , Axure
DESCRIPTION
URS 是南海控股集團的會員通行證系統，於2018年6月項目啟動， URS 為會員跨平台登入/註冊系統，集團內的應用皆有個平台自行一套的登入系統，不過由於技術上的些許不足，導致流程及帳號上需要加強完善，而主要原因為集團需要一個完善且健全的系統，並合併集團裡各應用之會員數據，加以完備會員數據知資料打通，且市場及運營部門也因運營需求，對會員之資料需掌握齊全，由於諸多原因使然，故集團需打造一討獨立且符合各應用之會員通行證系統，以支撐集團會員數據。
THE CHALLENGE
需打通所有會員數據，理所應當是需要集團旗下各子公司的數據接口調通，因不同場景需求的狀況下，各公司對會員所採集的信息有所不同，所以在設計這套系統時，我們先將登入及註冊作為第一期規劃，由於產品面對的是需要集團各應用的接入且跨平台，所以我們需要多方考慮諸多問題，可用性及體驗流程的順暢為我考慮的首要目標，做為登入註冊系統為使用者進入頁面之第一功能，如這步驟造成了用戶體驗的不流暢，將有可能失去用戶、用戶耐心的磨損，所以在設計頁面時是需要再三思考且做好設計前的調研工作，且 UI 的設計也要盡量簡化，能與多種應用匹配得當，如設計過度，可能會造成介面在跳轉上的樣式有太大的歧異。
THE PROBLEM
集團內的數據不同步是造成資料紊亂的原因之一，如需查找數據資料，因不同子公司，不同部門造成來回溝通的時間成本，這些都是在數據整理上的痛點，在大數據的時代，若無法掌握自己的會員數據進行分析，很有可能或錯失良機，在市場的推廣或者運營方面也可能沒法恰到好處，滿足會員用戶的需求，數據上的分析可幫助不管是公司本身或者用戶，都能相互得利，企業能精準掌握會員們的喜好、需求、習慣⋯等，用戶則可以因為精準的推送或者依據用戶喜好推薦，在電商上能減少挑選的耗時，節省時間也能夠買到自己所喜歡的產品。在新聞資訊上，可依據用戶喜好精準推送喜愛內容，用戶即可在頁面上閱讀自己愛好的文章內容。
由於會員數據的打通是需要循序漸進的，會員通行證包含了會員的基本資料、積分及錢包⋯等，所以我們規劃的是從登入及註冊開始。登入/註冊的第一實施對象為香港01，香港01原有自己一套的登入註冊功能，香港01也有自己的團隊，所以是需要兩個部組共同溝通討論進行推進，且因為集團的業務不只中國及香港，如多維，面對的是廣大的海外群體，所以介面上的設計也是需要符合大眾用戶需求習慣的，在設計上不僅需要符合需求，也需要考慮到不同用戶的用戶習慣，設計上需將組件能更加靈活運用。
THE SOLUTION
登入/註冊的第一實施對象為香港01，香港01原有自己一套的登入註冊功能，為了能使所有應用調用接入時，能確保風格上的差異不過於突兀，所以設計介面上將會採用乾淨簡潔的風格，佈局也盡可能地滿足需求且較為流暢的體驗。對於數據的打通，是需要兩個部組共同合作進行的，香港01在香港媒體應用上的用戶量僅次於蘋果日報，所以我們先將香港01的用戶進行測試及分析。雖然都是中文用語，不過中港台三地的用語卻有著不同的習慣及方式，三地皆有所區別，所以我們的系統目前將中文字體分為簡/繁兩種字體之外，用語上分為三種不同的內容顯示方式，香港01不只有新聞媒體應用，也有香港的外賣自取平台 - e肚仔，目前他們的用戶量在香港市場佔有一定比例，所以我們與香港團隊一同合作，一起做了用戶調研，從現有的登入註冊中尋找改進及體驗問題，再者，因香港用戶的使用習慣與歐美國家用戶較為相似，所以我們也在用戶習慣上與內地用戶的習慣進行分析比較，因香港有許多習慣使用的應用程序為歐美國家所開發，所以我們也參照了不少相關競品進行分析，不過在分析中發現，原本只存在於內地用戶的習慣 - 快捷登入及註冊，並且綁定手機的方式，也因為近年來安全性的增加，使得歐美國家也將此項納入了登入註冊中，如果用戶為早期註冊的會員，那將會在您下次登入時要求您綁定手機，這對帳戶的安全性有一定的加強，雖然以前綁定手機對於內地以外的用戶來說，有著害怕個資外洩的風險，不敢輕易填寫手機號碼，造成自己的困擾，隨著科技的進步，近年來的帳號安全意識，也更改了你我的用戶習慣，綁定手機不僅減少了被盜號的風險，也可降低用戶在忘記密碼或帳號時，造成在同一個應用下有多個帳號的問題，相對而言，不僅降低了不必要的重複註冊，也可使得用戶及產品本身有著更加完善的會員系統，便於管理帳號。會員帳號數據上也可降低幽靈用戶的產生及合理掌握用戶的精準數量及信息可信度。為了增加用戶對於我們的信任度，我們不僅將隱私聲明放於頁面中，並且也加上了雙重認證及設置登入密碼的方式，讓用戶在註冊的過程中，能更加安心且無疑。
DESIGN PROCESS
THE PROBLEM
由於資安問題，我們一開始有些擔心用戶對於綁定手機註冊的接受度，因香港與海外地區民眾，特別注重個人隱私權，所以若想推廣綁定手機的註冊方式，是必須要有方式且須有一定的事前準備，不管是市場調查、調研，都是必不可少的，並從結果中找出突破點，在使用習慣及介面設計上也需要加以研究，因它是一個須符合各個當地用戶的操作習慣及介面需要的，所以我們對於競品分析相對來說就有很大的需求及參考價值，我們皆需要好好執行調研工作才可幫助設計且符合需求，作出有效且有用的設計產出。
RESEARCH & ANALYSIS
我們與香港團隊合作一同做了調研及可用性測試，我們從中分析出近年來的用戶習慣變化，用戶因為大數據時代的變遷，接受度也寬廣許多，使得內地與其他國家的用戶的用習慣月來月相似，也讓我們可以將介面的佈局及使用習慣上能設計的更加統一，差異化不至於相差太帶，目前已有83%的香港民眾可接受綁定手機的方式註冊應用，已不再只能接受郵箱註冊登入，且為了便利性，如果有第三方登入 (Facebook, Google, Twitter⋯等) 他們經常會選擇使用第三方登入，他們認為這種方式既方便又能節省時間，不需要而外填寫個人資訊，對於填寫信，一方面覺得麻煩，一方面不喜歡個資的外露，因覺得與社交軟件的需求有些不同，所以如非必要，不輕易透露信息。這些資訊給予我們有極大的參考價值，從調研及測試中，我們也發現了許多有效信息，讓我們能更加完善系統及介面，符合需求或用戶習慣。
THE SOLUTION
上者提到，為了增加用戶對於 APP 的信任度，我們做了雙重認證與登入密碼的設置，多重安全設置，可使帳號的安全性增高，所以我們將手機註冊設置於註冊頁面的首選，雖然首選是手機號的註冊，但用戶也可自行切換為郵箱或者第三方登入，如果用戶還是不習慣於綁定手機號的話。頁面上的設計我們採用了簡潔且顏色不多樣化的設計，介面的乾淨，可使得用戶更加專注於輸入信息，且不因瑣碎的設計而被干擾，因為登入註冊介面需要傳達給用戶的是幫助填寫有效信息，而不是需要尋找目標功能而需要亮點提示，所以設計上採取了簡單又不失設計元素的方式，用戶流程方面，我們將介面佈局以步驟拆分，讓用戶能按部就班地填寫信息，完成註冊及登入的步驟，不會讓用戶有模棱兩可的狀態出現。
FUNCTIONAL MAP
SIGN UP - PHONE
USER FLOW
PROTOTYPE
SIGN IN - ACCOUNT
USER FLOW
PROTOTYPE
SIGN IN - PHONE
USER FLOW
PROTOTYPE
SIGN IN - SOCIAL MEDIA
USER FLOW
PROTOTYPE
FORGOT PASSWORD
USER FLOW
PROTOTYPE
TYPEFACE & COLORS
PROJECT DESIGN
設計佈局採用大字標題，因為是登入/註冊的頁面，標題的提示相較之下就挺重要的，加上大字提醒，可以使得用戶在使用時能有所感知，由於需要給集團各個應用調用，所以儘可能地將頁面即使用上簡單且基礎，主要是想讓它與其他應用的頁面切換不至於太突兀。目前第一期由香港 01 先行接入，今年將陸續接入集團其他公司項目，如 01 酒店、多維、日子里⋯等。
主要頁面『註冊』
註冊的頁面，我們在右上角的位置並無放置登入的切換入口，主要是因為我們在測試的過程中，發現放置在右上的登入切換入口並無太多用戶使用，如想返回登入頁面，皆點擊了返回按鈕，也因用戶一進到頁面的初始頁面為登入介面，在沒有註冊的時候才會切換到此頁面，所以以用戶習慣來說，放置了返回的按鈕在左上的位置，用戶只需點擊返回按鈕即可回到登入頁面。由於集團的業務有跨城市跨國的原因，所以在手機號碼的註冊上，需填入區域號，以避免可能有相同重複號碼的情況發生。由於運營需求，所以我們的註冊介面會首推手機號的註冊而不是郵箱，如用戶依舊不習慣使用手機號註冊，還是可從下面的位置切換註冊方式，由於 URS 最先實施的對象為香港 01，所以我們在香港進行了設計前的調研，依據調研結果分析出用戶對於手機號註冊的接受度已不像以往的比例較低，目前已達到了83%的用戶接受同意，所以我們將原有的電郵註冊換成了手機號註冊為優先。
主要頁面『登入』
登入介面的設計著重於填入登入信息，在點擊填寫時，採用了點擊後提示語有個小動效切換成為名稱標題，當用戶將帳號及密碼填寫完成後，登入按鈕將會亮顯，提示可進行下一步驟，如忘記密碼，也在密碼欄右下方的位置，有忘記密碼可進行重置密碼的功能。如想快捷登入，可使用簡訊確認碼或者社交媒體的登入，皆可進行快捷登入的操作，但由於目前安全性與完整性的考量，我們將社交媒體的首次登入是需綁定手機號的，所以如果第一次使用社交媒體登入的話，需多一個步驟。
主要頁面『驗證碼』
目前我們採取的是四位數的驗證碼，後續可能會為了安全性考量增設到六位數，且4-6位數為人們快速記憶裡的最佳位數記憶，即便增加到六位數也不會使得用戶在記憶上有所困難，加上也可以從系統的鍵盤上點擊快速輸入，使得用戶更加便利。如無接收到驗證碼，用戶可於60秒後點擊重新發送驗證碼。
主要頁面『設置登入密碼』
設置登入密碼的介面，使用了基本的再次確認密碼的校正動作，避免客戶誤觸輸入錯誤，而導致設置的密碼與自己設置的有所不同。由於密碼的安全性問題，密碼也有一定的設置規則，當輸入完密碼後，完成按鈕將會亮顯，點擊後，會自動校驗兩次密碼是否相符，如相符即可完成設置步驟。
主要頁面『找回密碼』
用戶可透過手機好或者郵箱重新設置新密碼，在此頁面中，如用戶使用手機號找回密碼，需選擇電話區號在填寫手機號碼，區號的填寫可讓數據庫的匹配更加正確，也可避免相似號碼的情況出現。