重塑銀行APP品牌形象背后的故事

資訊頻道 - 創(chuàng)意潮 來源:中國設(shè)計在線 作者:cdo 2016-09-30

a0a457e9345f0000018c1b1b7c86.jpg

Monese是一個無網(wǎng)點銀行業(yè)務(wù)服務(wù)商,即使客戶沒有立即提供住址或有不良貸款記錄,也允許歐盟經(jīng)濟區(qū)的居民在120秒鐘開一個當(dāng)?shù)氐你y行賬號。我們開發(fā)Monese是為了幫助橫跨歐洲大陸的9千萬人們——那些被財政排除的人,因為銀行很難確定他們的身份或他們的信用評分。

作為一款金融產(chǎn)品,獲得用戶的信任是很有必要的,因此有一個一致可識別的特性對Monese的成功是極為重要的。

為什么我們決定重塑形象?

在安卓發(fā)布后,我們看到用戶快速增長,在iOS發(fā)布顯然是我們下一步計劃,感覺是時候重新審視和修改我們的設(shè)計了。

同時我們有一個已經(jīng)存在的特征,我們最終覺得品牌需要更好地表達我們從自己初次使用產(chǎn)品到給真實用戶使用過程中學(xué)到了什么——我們更深入地理解了他們的需求。

這是一些我們發(fā)現(xiàn)的問題:

這個logo不是一個值得擁有的標(biāo)志——感覺有點孩子氣,線條太過于友好了。

用"Brandon"字體并沒有給我們一個強有力的聲音,它被很多創(chuàng)業(yè)公司過度使用,意味著它不能只被我們獨有。

有各種各樣的圖形和圓形樣式,品牌元素不統(tǒng)一,不協(xié)調(diào)。

我們大量使用紅色,也在要顯示錯誤狀態(tài)時制造了挑戰(zhàn)。

Monese正在成長,我們的品牌識別需要表現(xiàn)出這個,同時在多個觸控平臺上要能更靈活地被運用。

d8fd57e934740000018c1b9be639.jpg

舊版Monese品牌應(yīng)用元素

    我們最初是想修復(fù)我們現(xiàn)有的品牌。我們越深入的去梳理時,對現(xiàn)有品牌的缺陷理解得就越深入,這些缺陷讓我們又回過頭來思考:我們需要有一套更清晰的價值和一個新的品牌識別,能更好地表達我們服務(wù)的意義。

    作為一個精益團隊,我們知道重塑品牌形象將是一場拉鋸戰(zhàn),但是如果我們打算這么做,現(xiàn)在就是最好的時候。我們的目的是為了讓公司有一個通用的品牌故事,和我們的用戶形成更強的連接,也為將來公司的成長打下堅實的基礎(chǔ)。


2f9957e930550000018c1b8afc9e.jpg

    品牌故事板

    我們開始了大量的調(diào)研,把自己沉浸在我們已經(jīng)達到的和我們將要達到的事情上。我們和英國倫敦、愛沙尼亞塔林工作室跨團隊合作,聯(lián)合了公司每個人去收集意見,關(guān)于我們怎么描述我們自己的價值。

    在與用戶體驗分析人員和管理 團隊密切合作中,我們開始定義品牌故事板。我們討論出我們的品牌服務(wù)是幫助人們提升他們的生活,轉(zhuǎn)而我們?nèi)ザx品牌價值。我們非常重視這個,因為這將會形成我們品牌特性的核心,并且是我們所有品牌決策的起源。

我們創(chuàng)造的列表是一個很有幫助的開端,但是離我們需要記住的還很遠。通過整個公司同事的輸出,我們深入地提取了3個更精簡的核心價值。


c5a257e9303a0000018c1b8df02e.jpg

    進步的

    在Monese我們總能看到未來——保持領(lǐng)先一步,使用新技術(shù)來幫助我們客戶。

    有人情味的

    我們看到了人性化的價值,無論是獨自的還是團隊的。我們不會對我們的用戶動輒評頭論足,這也讓我們和其他的傳統(tǒng)銀行有所不同。

    可靠的

    我們?yōu)槟慕疱X提供了一個安全場所,對客戶我們都是公開透明的。我們始終保持親切的態(tài)度,時刻準(zhǔn)備回答您的任何問題。

    過程

    面臨著有限的時間,我們快速執(zhí)行,開始了概念設(shè)計。因為我們剛成立,我們經(jīng)常需要花時間遠離在app功能上和其他業(yè)務(wù)方面的事情。這段時間為了保證事情是可行的,我們要確保我們核心的專注力要放在品牌工作上,然后再花時間去做其他的事情。

    每次沖刺通常是4天左右。我們制定每日目標(biāo)保持注意力和專注,檢驗我們的價值并為更遠的發(fā)展探索思路。我們在每次的沖刺結(jié)束都會開會回顧;最初不是為了做任何大的決策,只是能分享我們各自的想法,看看每個人的思維過程。


079257e930800000018c1b07a232.jpg

    設(shè)計我們的標(biāo)志

    在Monese,通過提供很容易加入、操作簡單、安全的銀行服務(wù),我們幫助客戶讓他們的生活變得更加自由。我們想設(shè)計一個標(biāo)志,一方面能表達我們的服務(wù)理念,也能傳達我們的價值觀——進步、有人情味和值得信賴。我們開始了草圖...


9eb257e9309a0000018c1b58a9e7.jpg

    做了好些不同的方案后,我們最終做了決定,開始起草我們比較傾向的方案。為了確保最終的logo能創(chuàng)達我們品牌價值的每個特征,我們做了很多次迭代。

    我們決定采用一種流動互聯(lián)線條的組合來構(gòu)成我們獨特的識別標(biāo)志,以反映我們想要表達的——安全、活力和值得信賴。為了給標(biāo)志增加一種舒服的觸感,我們添加了圓角,讓它看起來更加有人情味,更加流暢。



    文字排版

    在設(shè)計標(biāo)識的同時,我們也在研究字體。我們當(dāng)前字體主要的問題是感覺太過奇特,但是并不能代表你對自己的收入充滿信任。盡管它設(shè)計得很好,圓潤的無襯線字體能表示我們早期的的狀態(tài),但是它缺乏成熟感——一種我們新聲音需要體現(xiàn)的品質(zhì)感。

741157e9311e0000018c1bdcaf56.jpg

    我們決定基于“FF Mark”字體設(shè)計,最近的設(shè)計是在2013年,我們基于當(dāng)時一些最成功的無襯線字體設(shè)計了這個構(gòu)型,但在潮流設(shè)計中感覺是現(xiàn)代的、居家的。

    每個字母都很仔細地被繪制,賦予了一個有力、簡單和粗壯的邊緣,它的曲線構(gòu)型又給人一種安心而友好的感覺。這有助于在新的Monese logo標(biāo)志上用圓的形式。


f8c057e9348a0000012e7e59b9f3.jpg

    很大一部分我們的受眾,他們的母語并不是英語,這意味著可讀性對我們的決策是很關(guān)鍵的。Mark的大號x-height讓用戶界面元素在很小的字號下都可以看得清晰,它的多個字重在很多不同平臺上都可以靈活使用。

    總之,我們認為Mark是最適合的字體,因為它提升了我們品牌要表達的價值——一個強大和值得信賴的品牌。


b9dd57e931450000018c1bd92e23.jpg

    色彩模式

    我們希望我們的色彩看起來是新鮮充滿活力的,同時也能使用這些色彩向母語非英語的人清晰地傳達我們的銀行服務(wù)元素。所以我們的設(shè)計方案必須是兼具美學(xué)和功能性的。我們查閱了很多需要通過app傳達給用戶的信息狀態(tài),選擇了一個靈活的顏色方案來幫助提高可用性。


b04657e934970000018c1b0d6c06.jpg

    定義簽名交互

    因為我們是數(shù)位產(chǎn)品,我們相信一套有力的品牌系統(tǒng)比起作為一個識別標(biāo)志要承擔(dān)得更多,也應(yīng)該決定產(chǎn)品的行為。作為一個銀行服務(wù),我們的用戶和產(chǎn)品進行的一個最重要的交互就是支付能力。我們決定專注在這個交互操作上,使它成為我們品牌的核心特征。

65be57e931a20000018c1b4d8fa9.jpg

    我們看了很多的處理方法,看了他們是如何使用交互運作的。

    研究了這些動畫之后,我們開始使用javas cript生成原型,完成了一些測試,動畫不干擾行為本身這是很重要的。

b7b357e931b70000018c1b6872b3.jpg

支付交互的原型和測試

    讓交互行為保持簡單是關(guān)鍵,保證它的可用性,避免形式大于內(nèi)容。我們引入了流動的牽引式線條力學(xué),這個允許用戶向下滑動就進行支付。這個有彈性的流動動畫的插入給界面注入了更多的個性和一種愉快的感覺。


fc4e57e931c90000012e7e45a1fc.jpg

    開發(fā)整個系統(tǒng)

    往更長遠看,我們探索了如何讓支付線可以擴展為一個整體的視覺系統(tǒng)。我們設(shè)計了圖形紋理,通過形成一個動態(tài)的大的互聯(lián)網(wǎng)軌跡線去討論多種支付方式。把網(wǎng)絡(luò)進行裁剪創(chuàng)造一系列的印象,從克制到準(zhǔn)確,到充滿活力和富有表現(xiàn)力。

    我們從舊的銀行卡上收集到的用戶反饋顯示,有些客戶認為之前的卡不像是一個合法的產(chǎn)品。基于這個反饋,我們決定設(shè)計一個更加有吸引力的深色卡,上面會顯示網(wǎng)絡(luò)軌跡線;ヂ(lián)模式傳達了通過Monese平臺不斷改進的支付方式。


我們新的借記卡包裝設(shè)計

    因為Monese是一個主要針對流動人群的產(chǎn)品,我們認為更適合給我們的身份一種真正意義上的動感。我們想這個系統(tǒng)是動態(tài)的,仿佛是展示了運動軌跡的快照。通過這種方法,我們才能真正傳達我們不斷進取的價值。


34ba57e932150000012e7e036024.jpg

280f57e932040000012e7e6f10de.jpg

    這個令人印象深刻的圖形給人一種流動的、充滿人情味的感覺,在標(biāo)志和app界面元素上都是一致的。

af6257e9324b0000018c1bebfcc5.jpg

    重新設(shè)計app

    隨著這個品牌的更新,我們重新設(shè)計了安卓和iOS客戶端。我們想讓界面變得明快而新穎,很容易瀏覽。和UX團隊合作,我們仔細考慮了每個元素,為了確保每個決策對用戶都有一個清晰的目標(biāo)。

    通過使用矢量圖形,我們給用戶帶來了讓他們驚喜的元素,也通過logo類似的線條樣式引入了一些交互圖形,所有被重新設(shè)計的圖標(biāo)都有了一個更加友好更圓潤的形式,我們引入了一個時間軸的樣式來展示主屏幕切換。

087157e932860000012e7ee53f47.jpg

我們新設(shè)計的界面

    插圖和角色

    我們引入了一個新的插圖風(fēng)格,以及一系列的角色來幫助探索app部分,這也增添了app的趣味性。這些角色能幫助打消用戶的疑慮,關(guān)于我們作為一個公司是如何被接近的,我們時刻在這為用戶提供援助之手。

7dd157e932940000012e7eea5252.jpg

    例子,當(dāng)給一個有Monese的賬號的用戶注冊時,不得不等他們的ID文件被審核。我們引入了一個掃描儀在讀他們文件的動畫。短時間后,一個角色跳進掃描儀,帶著一個眼睛出現(xiàn)了。我們希望這個能給在等待中的用戶一個小小的回饋,可能會讓他們更想等動畫循環(huán)去看到這個角色。


3fd857e932bd0000012e7ec6f65d.jpg

    總結(jié)

    回頭看我們修改視覺識別形象的初衷——先前我們覺得老的Monese品牌太過于簡單,缺乏信任感。不僅僅是因為一個過于柔軟的logo和多變圖形、混合的插圖不匹配,說到底也是因為它不夠獨特,,不能準(zhǔn)確表達我們自己。

    因為我們已經(jīng)解決了所有這些問題——從一個更有力更值得信賴的logo到友好的顏色模式——我們對新的標(biāo)識充滿信心,這將會為Monese長遠保持增長打下基礎(chǔ)。它已經(jīng)在我們公司所有團隊被熱情接受。我們希望我們的客戶也會歡迎這樣的改變。

聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關(guān)推薦