幕后故事:數字銀行品牌升級

分類:設計 時間:2016-10-25

品牌設計實戰案例,通過這家銀行的品牌再設計,感受一次完整的品牌升級如何展開,如何做到面面俱到又渾然一體。

Monese是一項無網點銀行業務,能讓歐洲經濟區的居民在2分鐘內創建本地銀行賬戶,即使顧客無法立刻提供住址信息,或者信用記錄不良,也沒有關系。我們創造Monese,目的在于幫助9千萬被“排除在金融體系外的”歐洲人,因為銀行難以認同并給予他們信用授權。

作為金融產品,獲取用戶的信賴至關重要。因此,有統一易辨識的標志,是Monese成功的關鍵。

為什么決定要重塑品牌

在Android平臺發布之后,用戶基數快速增長。很明顯下一步就是發布iOS版,這也是回顧和改進我們形象的絕佳時機。

此時我們已經有一套現成的品牌識別,從真實用戶身上獲得的第一手產品使用反饋讓我們深受啟發,最終我們覺得品牌需要更好地將它們反映出來——我們對用戶需求有著更深刻理解。

我們從中找出了以下問題:

現有Logo不夠典型、獨特——它顯得有點幼稚,弧度過于圓滑。

我們用的“Brandon”字體不夠鮮明,它已經被許多創業公司濫用了,這就意味著它不可能是我們獨有的。

品牌元素中混合了尖銳與圓潤的形式,不統一,缺乏協調。

紅色的廣泛使用引發了一個挑戰,導致Monese應用中的錯誤狀態難以展示。

舊的Monese品牌元素

我們最初努力修補現有品牌。越深入,我們越意識到它的諸多劣勢正在阻礙著我們。我們需要一系列清晰的價值,和一個全新的品牌識別,來更好地傳遞我們的重要性。

作為一個精益團隊,我們知道徹底的品牌重塑困難得超乎想象,但如果我們打算這么做,現在正是時候。我們的任務就是用一個通用的品牌故事來統一整個公司,與顧客形成更強的連接,為將來的增長打下堅實的基礎。

品牌故事板

海量的工作,始于對Monese現有成就和未來方向的研究。我們的工作跨越了英國倫敦、愛沙尼亞塔林的工作室,我們與每一個公司成員聯系,收集他們各自對于公司自身價值的描述。

我們與用戶體驗分析師、管理團隊緊密協作,定義了一套品牌故事板作為起點。我們討論了我們的銀行服務如何幫助人們“升級”,伴隨他們的生活前行。然后進一步定義了我們的價值。我們非常認真對待這個環節,因為這些會形成我們的核心個性,并且會作為后續所有的根源,我們做的每一個品牌決策都能回溯到本源。

我們創建的列表在開始幫了大忙,但是內容太多難以記住。從全公司成員的描述中,我們分解得出3項更精煉的核心價值。

進步

Monese一直在關注著未來——總是通過新技術來幫助客戶快人一步。

人性

我們看到了人類個體與整體的價值。我們對于客戶不帶任何偏見,這使我們區別于其他傳統銀行。

信賴

我們給錢財提供了一個安全的家,對于我們的客戶完全敞開透明。我們態度親和,時刻準備回答問題。

重塑過程

時間緊迫,我們迅速行動,開始概念的設計沖刺。因為我們是個創業公司,時常需要從沖刺中擠出時間處理app功能和其他方面的業務。所以,為了保證一切盡在掌控,我們要確保一段時間內,核心關注點只在品牌工作上,然后再專門花幾天去處理其他事情。

每次沖刺大約4天左右。我們設定了每天的目標,保證大家全神貫注跟上節奏,并且檢驗我們的價值觀、為未來的發展探索靈感。在每一段設計沖刺之后,我們會討論回顧;一開始不為做出某個重大決定,更多是分享靈感,感受其他人的思考過程。

設計標志

Monese為顧客提供容易申請、使用的安全銀行服務,幫助他們在生活中自由行動。我們想要設計的標志既要能反映這一點,也要表達出我們的價值觀——“進步、人性和信賴”。于是我們開始畫草圖……

探索了幾條不同道路之后,我們做出了決定,開始圍繞我們選定的方案繪制。我們進行了許多次迭代,確保最終logo能夠傳達每一個品牌價值。

我們最終的方案,結合了相互連接的平滑線條,構成獨特的標志,反映出我們的特征——安全、活力和人性。為了增添柔和的感覺,我們增加了倒角,讓它感覺更加平滑、人性化。

字體

設計標志的同時,我們也開始探索字體。主要問題在于,我們現有的字體感覺太怪異了——沒法讓你放心存放你的工資。盡管它也經過精心設計,在我們公司早期階段,帶有輕微圓角的無襯線字體表現良好,但它不夠成熟——這是我們的新形象需要表現的。

我們決定基于字體“FF Mark”。這款新近字體誕生于2013年,形式借鑒自史上最成功的一些無襯線字體,但它給人感覺更現代,并且在現代的設計中讓人感覺無拘無束。

每個字形都精心繪制,賦予它硬朗、簡潔、醒目的邊界,但它的曲線也帶來了一絲舒緩和親和力,幫助它很好地與新Monese商標的形式融合。

我們顧客的大部分都是非本土的英語人士,這意味著易辨識是最高前提。Mark字體的x高度足夠大,有助于在小字號的用戶界面元素中清晰表達。并且多種字重使它具有靈活性,可以跨越多種品牌媒介使用。

總體來看,我們覺得Mark字體是正確的選擇,因為它提升了我們品牌的形象,強化了令人信賴的調性。

配色方案

我們希望配色讓人感覺新鮮、充滿活力,同時運用色彩向非本土的英語人士清晰表現銀行服務的元素,所以我們的選擇必須兼具功能與美觀。我們思考了app中用到的多種狀態的信息,選擇一套靈活的配色,有助于提升可用性。

主要配色中,純正的藍色、綠色和黃色傳遞出鮮活的感覺,遠比暗淡柔和的舊配色更好,我們覺得這個更加適合Monese的形象。我們早期的測試者說:“它不像其他銀行應用那般沉重。”

定義標志性交互

由于是數字產品,我們相信強大的品牌系統應該不只是一個符號,也應當決定了產品的表現。作為銀行服務,用戶使用產品中最重要的操作之一,就是付款。我們決定著重于這個操作,將它轉化為品牌的核心特征。

我們嘗試了多種處理方式,實驗如何通過動畫來體現。

重新考慮過動畫之后,我們開始使用JavaScript制作樣例,并且進行了一些用戶測試。要確保很重要的一點,動畫沒有妨礙這個操作本身。

制作與測試付款操作

關鍵在于保持動畫簡單,確保它的可用性,避免形式蓋過功能。我們引入了流動的彩色線條,隨著用戶向下滑動展開,完成付款。這種有彈性、像液體的動畫效果為界面注入了更多個性,令人愉快。

發展出整套體系

更進一步,我們探索了付款的線條如何擴展為一套密切相關的視覺體系。我們運用大量相連的彩條,通過動效表現各種支付方式。連線的修剪形成了一系列情感表達,從標準、精確到活力、有表現力。

我們從舊版信用卡上收集到的用戶反饋表明,有些顧客認為早先的卡片感覺不像是個合法的銀行產品。基于這個反饋,我們決定設計出更迷人的深色卡片,在上面呈現彩條的連接。交錯連通的線條紋理,表達出Monese平臺流暢的支付過程。

新的信用卡包裝

由于Monese是一款主要針對流動人口的產品,我們覺得,給品牌增加一些運動元素會很有好處。我們希望這套系統表現出運動的感覺,就像這張動圖展現出來的效果。這樣,我們就能真正表達出不斷進取的價值觀。

這種富于表現力的形狀,感覺流暢、人性化,在logo標志和app界面元素中保持形式統一。

app改版

我們也徹底改版了Android和iOS應用的設計,和品牌重塑同時進行。我們希望界面感覺明亮、清新,并且容易操作。與用戶體驗團隊合作,我們仔細考慮了每種元素,確保每一個決策都有服務用戶的清晰目標。

通過插畫,我們引入的元素能給用戶驚喜和愉悅,也加入了交互式圖形,采用與logo接近的線條形式。所有的圖標都重新繪制過,更加圓潤親切。我們還采用了時間軸形式,來呈現主界面的執行狀態。

重新設計的界面

原文還插入了一個視頻,請前往此鏈接觀看: https://vimeo.com/175713529

插畫與角色

我們加入了新的插畫風格,還有一系列的角色,幫助表現app的各個部分,也增添了一絲玩味。這些角色幫助用戶打消疑慮,表現出我們是一家多么平易近人的公司,時刻準備伸出友好的援手。

舉個例子:當注冊Monese賬號時,用戶需要等待身份信息核驗完成。我們加入了一個小動畫,表現出正在掃描文檔的場景。不一會兒,其中一個角色會站到掃描儀下,被噴了一身顏色。我們希望這能給等待中的用戶一點點獎賞,甚至讓他們希望等待動畫循環,再看一遍。

最終成果

回到最初修改視覺識別系統的初衷——之前我們覺得舊的Monese品牌過于簡陋,缺乏信任感。不僅僅因為過于圓潤的logo與多邊形狀的紋理和插畫不相稱,產生了一種混雜的調性,而且它終究不夠獨特,不能使我們獨一無二。

我們確定了這些問題——從更強有力、值得信賴的logo,到更親切的配色——我們對于新的品牌形象很自信,相信它能為Monese打下長期增長的基礎。它已經被公司內所有團隊滿懷熱情地接受,我們現在希望顧客也歡迎這一系列轉變。

這是我們目前得到的一些反饋:

Sia Houchangnia (@SiaHouchangnia)

非常棒的新品牌,已登陸iOS——一定要看看 #seedcamp (譯者注:一家創投公司)的公司 @MyMonese

Cloacute;ves Cardoso (@clovescardoso):

@MyMonese 的新品牌和新app看上去真棒。希望能進入英國,我很想嘗試。

Rohit Rahate (@RRRahate):

@MyMonese ,太喜歡你們的新品牌形象了。

elowa Design (@Delowadesign):

@MyMonese ,好家伙,新logo很贊 :)

另外,Monese正在倫敦和塔林招人。

www.monese.com

原文鏈接: https://blog.prototypr.io/branding-monese-9f076baf0d79#.w8w6q9hic

作者信息: Joe Allison

Design Lead at Monese

Tags: 銀行 移動設計

文章來源:http://www.ui.cn/detail/181676.html


ads
ads

相關文章
ads

相關文章

ad