UI初心者-知名百貨B公司會員APP(partA)

Angie Wu
7 min readOct 22, 2017

--

其實我不懂UI

這是我在R公司接到的第一份工作,公司以外包的方式承接了台灣知名百貨龍頭B公司的會員APP,說實話,這時候的我才剛進公司不到一個月,對UI的理解還在畫畫漂亮的icon,定調各種風格的頁面(科技風、漸變風、可愛風……),菜鳥如我被PM及客戶要求要在一週內生出Functional Map、UI Flow跟Wireframe,本來我還覺得我可以的(因為在上一間公司都是做很小的工具型APP,頂多一週就把頁面畫完了,還可以慢條思理的設計多種不同風格)第一次接觸到功能如此繁多的APP,加上對軟體操作及整個專案的UI流程也不熟,整個那週就爆掉了阿!無論是UI的產出速度或是品質都遠遠不及標準,對於初次學習專案流程的我,時程掌控也是在這個專案中主要學習到的部份,像是如何正確的估時,將開會的時間及修改時間納入估時中,這些部份,正是我當初在轉換工作時,很希望能夠學習到的。

硬生出來生澀第一版草圖 (當時對登入、註冊、忘記密碼這些流程完全沒概念!)

此時的我對於APP的規劃,真的沒什麼概念,雖然讀了很多的blog文章,知道一些iOS guideline或是Material design的設計方法,但也僅知道這些,接到一個新的專案時,要不就把iOS的UI pattern直接套用,要不就pinterest挑幾個喜歡的版型試著用,當然當時的我還是找了很多其它競品的APP包含日本的新光三越、大立伊勢丹百貨、國外的沃瑪當參考(但事實是只有一週時間,我根本來不及慢慢做競爭對手分析阿!!!),這也導致後面wireframe畫不完的冏境,而且其實這些APP的功能性上還是有個別的差異能夠提供參考的價值很有限。

當時在有限的時間內試著做競品分析及產品的Functional Map,再給我一次設計的機會,我一定會找目標用戶來做Card sorting,畢竟這類的產品在客戶要求之下實在塞入了太多功能了。

客戶大人~您到底要什麼啊?

這一~兩週中還發生了很多事,像是跟PM去開會,完全不理解客戶為何意見反反覆覆(但客戶就是會反反覆覆阿!後來才明白能夠引出客戶心中真正的需求或是讓客戶理解我們在為他做最佳的服務,也是設計師的重要技能!)然後無止盡的開會,做事的時間變得很少,因為客戶提出的功能需求好多,好多細節都不清楚,你APP內要兌換禮券,那你要怎麼換呢?你要兌換禮物,那要怎麼換?那萬一換了要退呢?APP內要購買禮券,怎麼買?串接哪個第三方廠商?需要輸入哪些資訊?有好多好多的未知,我只好逼問PM或是跟她一起想(但是PM也不是客戶,她其實也不知道,其實就算逼問客戶,客戶當時也不知道)就這樣,又浪費了更多時間,而且事實上當時想的好多複雜的功能,其實第一版也都沒做,之後我才理解,面對這樣的客戶,我們應該先把主要的功能確定,其它功能或許可以先示意(保留它之後可能會在APP內的位子)或切割成幾個版本,協助顧客narrow down他們的目標,因為在專案時程限制下,加入工程師的施工時間,可能也只能完成部份重點功能,但先將時間花在主要功能的UI,有多餘的時間,再將其它功能可能會需要客戶想清楚跟確定的東西條列給客戶,讓他們在其它功能上線前,可以先確定。

右邊為一開始的Function Map事實上,用戶還一直加功能,實際考量工程估時及客戶的deadline才縮減成為較合理的左邊的Functional Map

客戶也要因材施教

然後就是面對客戶的策略,我發現目前遇到的客戶最在乎的莫過於APP的首頁了,就是登入註冊進來以後的功能主頁,其它細節頁面他們倒是還好,或許是首頁比較像是門面最常會看到的頁面,最常聽到的需求像是棋盤式的首頁(因為他們要把所有功能塞在這頁),另外客戶對於APP設計流程的不理解也是一個問題,wireframe跟GUI的差別他們並不理解,畫wireframe有什麼好處?我想是在一開始就需要跟客戶做溝通的,協助他們了解像是蓋房子,我們先把房子的骨架確定好,要有兩房一廳一衛浴還是三房兩廳兩衛浴,而不是先看你要歐風還是要日風,這個部份也因為客戶的不理解,當時我的主管下了一個新的策略是採用首頁先提視覺稿的方式,我覺得因應不同的客戶隨機應變的採用不同的策略也是很重要的技巧。

我試著整理了公司實際專案運作的流程圖(希望能給老闆當以後其它專案的參考)
在我規劃提供給客戶的服務建議書裡,簡介UED流程的頁面,讓客戶對於未來專案進行的流程有一定的理解

定好目標帶我(們)上天堂

另外一件更重要的事,我覺得是老生常談了,不過對UI設計真的非常重要!那就是”確定目標!””確定目標!””確定目標!”(因為太重要,所以講三次!)面對客戶,就算他自己不清楚他的目標,你也要協助他釐清,這個APP最主要的目標是做什麼的,這不僅是對設計師好對整個團隊都好,譬如說這個百貨的會員APP,它可以有很多不同的目標,它要拿來做行銷的渠道或是會員經營的工具,這兩個目標本質上有很大的差異,因為我的UI設計一定會以這個目標為設計總指標!如果是行銷的渠道它需要有大面積的產品露出,優惠資訊傳遞及查看,但如果是會員經營要讓會員好用、愛用、常用,那會員使用的方便性就會為第一優先需求,這當然是在我工作了兩三個月後才逐漸理解的道理,每個UI都是一種取捨,頁面就那麼大,有些東西重要其它的東西就只能輕一點,大家都一樣重要阿也就都不重要了阿!(就跟整本課本畫螢光筆一樣!!!)學會了這件事,我就開始會反覆的跟我的需求方明確他的目標(如果他生不出來,我就幫他寫再跟他討論這是不是他要的),每次開會前,我都會把目標再拿出來一次,為了達成這個目標,所以我選擇了這樣的設計方式,這有另外一個好處是如果這個會議是整個團隊的會議,大家也可以理解目標是什麼,我們是朝同一個方向,不會冒出”為何我們不做像FB那種動畫?”類似這種需求,又或者客戶忽然殺出一個”為什麼我們不做像instagram的介面”時,能再拿出目標來說明為了滿足這樣的目標需求如果採用instagram的介面會有哪些缺失的地方。

主管傳承下來的Project Owner 目標設定表,我再上網找資料並用自己的方式詮釋修改的更詳細一些 (雖然客戶跟PM可能還是會不當一回事,但想辦法釐清目標也是設計師的責任!)

雖然最終產品的樣貌,讓我不甚滿意,還有很多可以優化的使用性問題,及資訊架構問題,但面對客戶的產品其實很多時候都是考驗設計師溝通與協調的能力,客戶方自己的團隊在協調上都橋不隴了,身為設計師也只能盡可能的讓客戶理解我們的設計是在滿足他們的商業目標並且也企圖讓他們的end user使用起來方便容易。

--

--