header_v0.7.0

【译】重塑银行APP品牌形象背后的故事

298天前发布

原创文章 / 平面 / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

本人介绍了Monese这款产品品牌重塑的全过程,有很多好的设计方法和观点值得借鉴。

a0a457e9345f0000018c1b1b7c86.jpg


Monese是一个无网点银行业务服务商,即使客户没有立即提供住址或有不良贷款记录,也允许欧盟经济区的居民在120秒钟开一个当地的银行账号。我们开发Monese是为了帮助横跨欧洲大陆的9千万人们——那些被财政排除的人,因为银行很难确定他们的身份或他们的信用评分。

作为一款金融产品,获得用户的信任是很有必要的,因此有一个一致可识别的特性对Monese的成功是极为重要的。


为什么我们决定重塑形象?


在安卓发布后,我们看到用户快速增长,在iOS发布显然是我们下一步计划,感觉是时候重新审视和修改我们的设计了。

同时我们有一个已经存在的特征,我们最终觉得品牌需要更好地表达我们从自己初次使用产品到给真实用户使用过程中学到了什么——我们更深入地理解了他们的需求。

这是一些我们发现的问题:

这个logo不是一个值得拥有的标志——感觉有点孩子气,线条太过于友好了。

用"Brandon"字体并没有给我们一个强有力的声音,它被很多创业公司过度使用,意味着它不能只被我们独有。

有各种各样的图形和圆形样式,品牌元素不统一,不协调。

我们大量使用红色,也在要显示错误状态时制造了挑战。


Monese正在成长,我们的品牌识别需要表现出这个,同时在多个触控平台上要能更灵活地被运用。

d8fd57e934740000018c1b9be639.jpg

旧版Monese品牌应用元素


我们最初是想修复我们现有的品牌。我们越深入的去梳理时,对现有品牌的缺陷理解得就越深入,这些缺陷让我们又回过头来思考:我们需要有一套更清晰的价值和一个新的品牌识别,能更好地表达我们服务的意义。

作为一个精益团队,我们知道重塑品牌形象将是一场拉锯战,但是如果我们打算这么做,现在就是最好的时候。我们的目的是为了让公司有一个通用的品牌故事,和我们的用户形成更强的连接,也为将来公司的成长打下坚实的基础。


2f9957e930550000018c1b8afc9e.jpg


品牌故事板


我们开始了大量的调研,把自己沉浸在我们已经达到的和我们将要达到的事情上。我们和英国伦敦、爱沙尼亚塔林工作室跨团队合作,联合了公司每个人去收集意见,关于我们怎么描述我们自己的价值。

在与用户体验分析人员和管理 团队密切合作中,我们开始定义品牌故事板。我们讨论出我们的品牌服务是帮助人们提升他们的生活,转而我们去定义品牌价值。我们非常重视这个,因为这将会形成我们品牌特性的核心,并且是我们所有品牌决策的起源。

我们创造的列表是一个很有帮助的开端,但是离我们需要记住的还很远。通过整个公司同事的输出,我们深入地提取了3个更精简的核心价值。


c5a257e9303a0000018c1b8df02e.jpg


进步的

在Monese我们总能看到未来——保持领先一步,使用新技术来帮助我们客户。


有人情味的

我们看到了人性化的价值,无论是独自的还是团队的。我们不会对我们的用户动辄评头论足,这也让我们和其他的传统银行有所不同。


可靠的

我们为您的金钱提供了一个安全场所,对客户我们都是公开透明的。我们始终保持亲切的态度,时刻准备回答您的任何问题。


过程


面临着有限的时间,我们快速执行,开始了概念设计。因为我们刚成立,我们经常需要花时间远离在app功能上和其他业务方面的事情。这段时间为了保证事情是可行的,我们要确保我们核心的专注力要放在品牌工作上,然后再花时间去做其他的事情。

每次冲刺通常是4天左右。我们制定每日目标保持注意力和专注,检验我们的价值并为更远的发展探索思路。我们在每次的冲刺结束都会开会回顾;最初不是为了做任何大的决策,只是能分享我们各自的想法,看看每个人的思维过程。


079257e930800000018c1b07a232.jpg


设计我们的标志

在Monese,通过提供很容易加入、操作简单、安全的银行服务,我们帮助客户让他们的生活变得更加自由。我们想设计一个标志,一方面能表达我们的服务理念,也能传达我们的价值观——进步、有人情味和值得信赖。我们开始了草图...


9eb257e9309a0000018c1b58a9e7.jpg


做了好些不同的方案后,我们最终做了决定,开始起草我们比较倾向的方案。为了确保最终的logo能创达我们品牌价值的每个特征,我们做了很多次迭代。

我们决定采用一种流动互联线条的组合来构成我们独特的识别标志,以反映我们想要表达的——安全、活力和值得信赖。为了给标志增加一种舒服的触感,我们添加了圆角,让它看起来更加有人情味,更加流畅。


365157e930e00000012e7ec13584.jpg465357e930ea0000018c1bc94958.jpg


文字排版

在设计标识的同时,我们也在研究字体。我们当前字体主要的问题是感觉太过奇特,但是并不能代表你对自己的收入充满信任。尽管它设计得很好,圆润的无衬线字体能表示我们早期的的状态,但是它缺乏成熟感——一种我们新声音需要体现的品质感。


741157e9311e0000018c1bdcaf56.jpg


我们决定基于“FF Mark”字体设计,最近的设计是在2013年,我们基于当时一些最成功的无衬线字体设计了这个构型,但在潮流设计中感觉是现代的、居家的。

每个字母都很仔细地被绘制,赋予了一个有力、简单和粗壮的边缘,它的曲线构型又给人一种安心而友好的感觉。这有助于在新的Monese logo标志上用圆的形式。


f8c057e9348a0000012e7e59b9f3.jpg


很大一部分我们的受众,他们的母语并不是英语,这意味着可读性对我们的决策是很关键的。Mark的大号x-height让用户界面元素在很小的字号下都可以看得清晰,它的多个字重在很多不同平台上都可以灵活使用。

总之,我们认为Mark是最适合的字体,因为它提升了我们品牌要表达的价值——一个强大和值得信赖的品牌。


b9dd57e931450000018c1bd92e23.jpg


色彩模式

我们希望我们的色彩看起来是新鲜充满活力的,同时也能使用这些色彩向母语非英语的人清晰地传达我们的银行服务元素。所以我们的设计方案必须是兼具美学和功能性的。我们查阅了很多需要通过app传达给用户的信息状态,选择了一个灵活的颜色方案来帮助提高可用性。


b04657e934970000018c1b0d6c06.jpg


定义签名交互

因为我们是数位产品,我们相信一套有力的品牌系统比起作为一个识别标志要承担得更多,也应该决定产品的行为。作为一个银行服务,我们的用户和产品进行的一个最重要的交互就是支付能力。我们决定专注在这个交互操作上,使它成为我们品牌的核心特征。

65be57e931a20000018c1b4d8fa9.jpg

我们看了很多的处理方法,看了他们是如何使用交互运作的。

研究了这些动画之后,我们开始使用javas cript生成原型,完成了一些测试,动画不干扰行为本身这是很重要的。


b7b357e931b70000018c1b6872b3.jpg

支付交互的原型和测试


让交互行为保持简单是关键,保证它的可用性,避免形式大于内容。我们引入了流动的牵引式线条力学,这个允许用户向下滑动就进行支付。这个有弹性的流动动画的插入给界面注入了更多的个性和一种愉快的感觉。


fc4e57e931c90000012e7e45a1fc.jpg

开发整个系统


往更长远看,我们探索了如何让支付线可以扩展为一个整体的视觉系统。我们设计了图形纹理,通过形成一个动态的大的互联网轨迹线去讨论多种支付方式。把网络进行裁剪创造一系列的印象,从克制到准确,到充满活力和富有表现力。

我们从旧的银行卡上收集到的用户反馈显示,有些客户认为之前的卡不像是一个合法的产品。基于这个反馈,我们决定设计一个更加有吸引力的深色卡,上面会显示网络轨迹线。互联模式传达了通过Monese平台不断改进的支付方式。

4c0157e931df0000012e7ebc5d7b.jpg


6c2057e931e60000012e7ef02cfd.jpg

我们新的借记卡包装设计


因为Monese是一个主要针对流动人群的产品,我们认为更适合给我们的身份一种真正意义上的动感。我们想这个系统是动态的,仿佛是展示了运动轨迹的快照。通过这种方法,我们才能真正传达我们不断进取的价值。


34ba57e932150000012e7e036024.jpg

280f57e932040000012e7e6f10de.jpg


这个令人印象深刻的图形给人一种流动的、充满人情味的感觉,在标志和app界面元素上都是一致的。


af6257e9324b0000018c1bebfcc5.jpg


重新设计app

随着这个品牌的更新,我们重新设计了安卓和iOS客户端。我们想让界面变得明快而新颖,很容易浏览。和UX团队合作,我们仔细考虑了每个元素,为了确保每个决策对用户都有一个清晰的目标。

通过使用矢量图形,我们给用户带来了让他们惊喜的元素,也通过logo类似的线条样式引入了一些交互图形,所有被重新设计的图标都有了一个更加友好更圆润的形式,我们引入了一个时间轴的样式来展示主屏幕切换。


087157e932860000012e7ee53f47.jpg

我们新设计的界面


插图和角色

我们引入了一个新的插图风格,以及一系列的角色来帮助探索app部分,这也增添了app的趣味性。这些角色能帮助打消用户的疑虑,关于我们作为一个公司是如何被接近的,我们时刻在这为用户提供援助之手。


7dd157e932940000012e7eea5252.jpg

例子,当给一个有Monese的账号的用户注册时,不得不等他们的ID文件被审核。我们引入了一个扫描仪在读他们文件的动画。短时间后,一个角色跳进扫描仪,带着一个眼睛出现了。我们希望这个能给在等待中的用户一个小小的回馈,可能会让他们更想等动画循环去看到这个角色。


3fd857e932bd0000012e7ec6f65d.jpg

总结


回头看我们修改视觉识别形象的初衷——先前我们觉得老的Monese品牌太过于简单,缺乏信任感。不仅仅是因为一个过于柔软的logo和多变图形、混合的插图不匹配,说到底也是因为它不够独特,,不能准确表达我们自己。

因为我们已经解决了所有这些问题——从一个更有力更值得信赖的logo到友好的颜色模式——我们对新的标识充满信心,这将会为Monese长远保持增长打下基础。它已经在我们公司所有团队被热情接受。我们希望我们的客户也会欢迎这样的改变。


声明:如需转载,请申请本人授权并保留译者全部个人信息,严禁私自用于任何商业用途,请尊重译者权益。


46

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功