这款国外金融产品,靠形象升级跻身“网红”行列,还顺势拿下千万级A轮融资!

说起国内的金融类产品,它们在视觉系统上大都选择了较沉稳、不出挑的风格,大家普遍认为,这样的设计能让用户对产品有较高的信任度

screen-shot-2017-03-15-at-10-22-53-am

国内的金融产品,当属阿里系最具代表性

然而,一款来自英国的银行服务应用Monese 却不走寻常路。去年,Monese 的设计团队对其从头到脚进行了包装,大胆使用了鲜明的色彩活泼的动效,一时间在twitter、Medium 等社交网站上大受好评,圈粉无数!本来是一个名不见经传的产品,Monese 靠形象升级一跃成为互联网金融圈“网红”,更在几个月后收获千万美元A 轮融资

关于它的故事,你一定很想知道吧?

0

 为什么我们决定重塑品牌? 

我们的总部位于伦敦,为欧洲地区的海外居民、移民等存在“居住限制”的人提供即时按需的银行账户服务。

Android 版本发布之后,我们用户基数迅速增长;发布iOS 版本是我们的下一步,而这,正是回顾并改进我们形象的大好时机。尽管已有一套识别系统,但我们希望新的品牌形象能更好地体现我们对客户需求的深层理解

screen-shot-2017-03-16-at-6-54-48-pm

原有Monese品牌中的各个元素

 

以下是我们发现的几个亟待解决的问题:

1.Logo不具有专属性——过于圆润的曲线显得有点孩子气;

2.“Brandon”这一字体在初创公司中使用过于频繁,不够独特

3.尖角和圆角的混用也使视觉缺乏连贯而不和谐

4.由于大量使用红色,当App中显示错误提示时,会使用户视觉感到混乱。

最初我们只是对现有品牌形象进行小修小补,但修补得越多,我们越清楚地了解到原有形象的薄弱点。我们需要清晰的价值体系和全新的识别系统,才能更好地传达我们所提供服务的重要性。

 

作为一个精干的小团队,我们知道全面重塑品牌将是一次历练,但如果要做,现在就要动手。我们的使命是把公司统一在一个共同的品牌故事里,与我们的品牌受众形成更强的连接,并为未来的成长打下坚实的基础。

 

screen-shot-2017-03-16-at-6-55-49-pm

品牌故事

在全面展开工作之前,我们穿梭于英国伦敦和爱沙尼亚首都塔林的工作室,并与公司的每一个人建立联系,收集各方意见。

 

与用户体验分析师和管理团队充分交流后,我们开始定义品牌故事。我们对此非常认真,因为这将形成我们的品牌性格。通过收集公司各方的意见,我们提炼出三套核心价值体系:

 

screen-shot-2017-03-16-at-6-56-33-pm

追求进步

在Monese,我们一贯着眼未来,采用最新技术而领先一步。

以人为本

我们看到人作为个体和群体的价值。因此,我们对所有用户一视同仁,与其它更为传统的银行截然不同。

值得信赖

我们为您的资金提供最安全的服务,并保持开放及透明。我们平易近人且随时待命。

 

 品牌重塑的过程 

时间紧迫,我们快速推进,并开始概念的“设计冲刺(Design Sprint)”

每次“冲刺”通常耗时4天。我们会设定每天的目标以确保重点和进度,检视我们的价值观并为未来发展探索新想法。各个冲刺阶段的最后,我们会开会进行回顾——不是要在初期做重大决定,而是分享我们的想法并回顾每个人想法形成的过程

接下来,我们开始绘制草图了……

screen-shot-2017-03-16-at-6-57-12-pm

在探索了几个不同方案之后,我们做出了决定,并开始打磨更中意的方案。我们进行了多次迭代,以确保最终的logo 能够传达出品牌的每一个内在品质。

screen-shot-2017-03-16-at-6-57-18-pm

我们决定用流动的、相互连接的线条组合成一个独特标识,并体现出它应该给人带来的印象——安全,动感,以人为本。我们加入了圆角以柔化标识,这样感觉更人性化且更有流动性

wechatimg44

screen-shot-2017-03-16-at-7-02-00-pm

 字体排版 

进行标识设计工作的同时,我们也开始探索字体样式。目前的这个字体主要问题在于:给人太精怪的感觉,不能够博取用户的信任,更别说让他们存入血汗钱了。虽然该字体设计精良,且略带圆润的非衬线样式在这家公司的早期阶段看上去还不错,但它缺乏成熟感——而这正是全新品牌需反映出的质感

screen-shot-2017-03-16-at-7-05-12-pm

我们决定使用字体“FF Mark”。这种字体2013 年才推出,尽管它的样式来自于一些经典的无衬线字体,但让人感觉毫不过时,且恰到好处。每个字形都被精心雕琢,使它拥有简洁、有力且大胆的边缘,同时条条曲线又给人安心而友好的感觉,这些曲线有助于让字体与Monese 全新logo 的圆润形式很好地结合在一起。

我们的用户有很大一部分是非英语母语者,这意味着易读性是我们所要考虑的重中之重。这款字体较大的“x-height使它在用户界面上使用小尺寸也能够被清晰呈现。由于多种粗细属性,在多个系统中它都能运用自如。

screen-shot-2017-03-16-at-7-05-25-pm

总之,我们认为Mark 字体是正确的选择,它使品牌信息更“掷地有声”,语气强而有力,值得信赖。

*x-height就是小写x的高度。在英文字体的设计中(主要指小写),一个字体的高度体包含三部份,以基准线 (baseline) 为中央,以上称之为上部 (ascender area),基准线内称之为x的高度,基准线以下称之为下部 (descender area)。所有小写字母中的核心部件都位于这一黄金地带,正是x-height成为了英文排版中贯通的核心,很容易引导视线的流动。

 

配色 

我们希望采用的配色充满清新活力,同时要能够清楚地向非英语母语者传达银行服务的内容,所以,我们的选择需要兼顾功能与审美。考虑到需要在App 中传递多样的信息状态,我们选择了一组灵活的颜色,这有助于提高可用性。

我们选择将明亮的蓝色、绿色和黄色作为新的主色。相对于老版黯淡无光的配色而言,它们表现出更强的生命力。一个早期试用者说:“它并不像其他银行应用一样让人觉得沉闷。

screen-shot-2017-03-16-at-7-05-45-pm

定义品牌专属的交互系统

这是一款数字产品,我们认为一套强大的品牌系统应该不仅仅是一个识别标志,更应该决定产品的功能。作为银行服务应用,用户与产品最重要的交互行为之一即是支付。我们决定专注于这种交互,并使其成为品牌的核心特征。

0

我们考虑了几种处理方式,并研究了它们该如何通过动画来运作。

在审查了这些动画之后,我们则继续用javascript 对它们进行原型化,并进行一些用户测试,确保动画不会干扰功能本身。

screen-shot-2017-03-16-at-7-05-59-pm

原型制作与测试支付交互

为确保其可用性,避免形式大于内容,保持交互的简洁是关键。我们引入了一个流动尾随线机制,当用户向下滑动时显示付款。这一有弹性的、有流动感的动作向界面注入了更多个性化的体验。

0

 开发系统 

更进一步,我们探讨了如何将支付动作的线条拓展为一个连贯的视觉系统。我们做出一个大型的尾随线(trailing lines)网络来生成图形纹理,传达了多个动态支付行为的意思。将这个尾随线网络裁剪后,可形成一系列表达,从沉着、精确,到充满活力与表现力

我们收集的关于旧借记卡用户反馈表明,一些客户认为旧卡没有让人感觉是合规的银行产品。基于这种反馈,我们决定将其设计成一张暗色卡片,背景突显醒目的线条网络,使它变得更加吸引人。

screen-shot-2017-03-16-at-7-13-08-pm

screen-shot-2017-03-16-at-7-13-21-pm
全新借记卡包装

Monese 是一个主要针对流动人口的产品,所以我们想赋予其运动感。我们希望整个系统看起来是运动的,这样就能真正地传达我们追求进步的价值理念。


screen-shot-2017-03-16-at-7-13-35-pm

screen-shot-2017-03-16-at-7-13-46-pm

表现力十足的形状给人带来流畅感同时也很人性化,且与logo标志及App 交互界面元素融为一体。

screen-shot-2017-03-16-at-7-13-57-pm

重新设计应用程序

 

随着品牌的更新,我们对Android 版本和iOS 版本的App 都进行了彻底的重新设计。我们想让界面明亮清新,且更易于浏览。与UX 团队合作时,我们仔细考虑了每个元素,以确保每个决定都能为用户带来好处。

除了让用户惊喜的插画,我们还引入了一组与logo线条类似的交互式icon。 所有icon都被重新设计成了更圆润的形式

 

 

screen-shot-2017-03-16-at-7-14-17-pm

重新设计的界面

我们还引入了一组角色形象以帮助解释应用程序的各项功能,同时增添趣味感。这些角色形象有益于向用户证明,我们是多么亲民的一家公司。

 

screen-shot-2017-03-16-at-7-14-29-pm

举个例子:在注册Monese帐户时,用户必须等待他们的身份证文件通过审核。我们采用了一个正在读取文档的扫描仪作为等待时的动画效果。我们希望这个有趣的动画能让用户在等待时不感到枯燥,甚至会循环播它们。

0

一个动画小人进入扫描仪,并在扫描仪上做“美黑”!

 

 

结果公布 

回溯到我们修改视觉识别系统的初衷——先前,我们认为Monese 的旧品牌形象过于单调,且给人不可信的感觉。不仅仅是一个logo 过度柔滑,其插图风格也混杂不一;最重要的是,它不够独特,难以自成一派。

现在我们解决了以上这些问题——从更强势也更值得信赖的logo,到更友好的配色——我们相信,全新的品牌识别系统将为Monese奠定长期发展的坚实基础。团队成员们都为新形象热情高涨,我们也希望客户能以同样的热情来迎接全新的改变。

以下是我们目前得到的一些反馈:

screen-shot-2017-03-16-at-7-14-46-pm

现在苹果应用程序商店有全新超酷品牌——必须拔草!贺电至@MyMonese!

screen-shot-2017-03-16-at-7-14-55-pm

@MyMonese的全新品牌形象和应用程序看起来超酷。正想着是不是要搬去英国,这样才能用上。

screen-shot-2017-03-16-at-7-15-06-pm @MyMonese超爱你们的新形象。

screen-shot-2017-03-16-at-7-15-15-pm

@MyMonese 小伙伴们,新logo特别棒:)

 

screen-shot-2017-03-16-at-7-15-30-pm

原文链接 |blog.prototypr.io/branding-monese-9f076baf0d79#.oeljgws21

作者|Joe Alison

翻译|Iris Sun、Zoe



特赞

发表评论

电子邮件地址不会被公开。