Kyashアプリ画面デザイン変更、サービスサイトリニューアルの裏側

Kyashでアプリなどのプロダクト全体のデザインをしている矢部です。

7/18日にKyashアプリの画面デザイン変更と、サービスサイトのリニューアルをしました。 これはKyashのビジョンからプロダクトの在り方を再定義する、ブランド・プロジェクトの1つのアウトプットになっています。 リニューアルとその背景となっているブランド・プロジェクトの経緯を書こうと思います。 f:id:chihiro-hara:20190731185948j:plain https://kyash.co/

ブランド・プロジェクトのキッカケ

Kyashでは「新しいお金の文化を創る」ことをビジョンに掲げて、サービス開発をしています。この新しいお金の文化とは、独自のエコシステムから実現した高還元率の提供や、アプリを使った割り勘のしやすさはもちろんですが、その先にKyashを通じて人々の感情とお金の価値が同期することで、さまざまな可能性を広げるサービスになりたいという想いが込められています。

この想いをもっとプロダクトでも表現して、実現していきたいということで立ち上がったのがブランド・プロジェクトです。

Kyashにおけるブランディングの考え方

Kyashにおけるブランディングは、市場におけるポジショニングというより、世の中がどうなるといいかという思想を中心に形作っていきました。その理由は、

  1. 日本はFintech、特に「決済・送金」の分野では、まだ発展途上であること
  2. 現在の市場は、キャッシュレスサービスにおいてお得や便利の訴求に終始していること、また、現金にまだ優位な市場であること
  3. Kyashはビジョンが強い会社で、それに共感してくれるユーザーが多いこと

などがあります。特に3つ目はビジョンをより伝わりやすく表現し、確実に実現していけば、逆説的に市場でのポジショニングも独自のものが築けると考えています。

つまり、Kyashは顕在化している課題を解決するだけでなく、潜在的な課題も解決していきたいと考えているため、現在ではなく将来を踏まえて検討を行っていきました。

マインド・アイデンティティの整理

そのような考えのもと、まずブランドの基盤となるKyashの根底思想をマインド・アイデンティティ(以下、MI)として整理するところから、ブランド・プロジェクトが始動しました。

代表の鷹取へのエグゼクティブ・インタビューで原体験や企業理念を掘り下げ、サービスの未来をイメージできる単語を導出しました。そして、単語だけでは直感的にイメージできない部分は、行間を埋めるような画像を収集し、徐々に手触り感のある形に視覚化していく作業を行いました。

f:id:chihiro-hara:20190731185953j:plain
企業理念から導出したワードクラウド

そして、最終的にKyashが目指す未来と、それによってユーザーや世の中はどのような未来を手にすることができるのかを、端的な物語でまとめる作業を行いました。

f:id:chihiro-hara:20190731190029j:plain
ブランド・ナラティブの一部

こういった根底の認識を揃える作業を、時間をかけて丁寧に地道に行うことによって、社内のメンバーの納得感を醸成させていきました。 そして、Kyashは単にお得や便利といった価値を提供するサービスに留まらず、人々の感情とお金の移動が同期する、開かれたプラットフォームのような存在を目指し、「お金=価値」の移動の障壁が取り払われた環境では、企業や個人が経済的にも感情的にも豊かになれる未来を創れる。ということが社内の共通認識として得られるようになりました。

ビジュアル・アイデンティティの定義

MIの整理を行い、その次に着手したのがビジュアル・アイデンティティ(VI)への展開です。VIはMI・企業理念を視覚的にわかりやすく伝えるために定義していきました。

ここからの作業では、当時新しくKyashにjoinしたデザイナーのManamiと、ブランディングパートナーとしてプロジェクトにjoinしてくれたMasaがリードしてくれました。 Masaは欧米を中心に展開するデザイン事務所 R/GA のクリエイティブディレクターで、グローバル企業のサービスのデザインを担当し、その実績は世界的にも認められています。 そんなMasaと縁あって、Kyashのブランディングのアドバイザーとしてサポートしてくれることになりました。

まず、MasaがMIをその後の工程で加工しやすいように、3単語で再定義してくれました。 ここで抽出された単語は「FUN」「CONNECTED」「IMPACTFUL」の3つです。

f:id:chihiro-hara:20190801103901j:plain
Kyashで定義したブランド・プリンシパル

それぞれの単語には

FUN:楽しさ、親しみやすい、マインドフル、明るい
CONNECTED:速い、信頼、繋がり、社会性、コミュニティ、同期
IMPACTFUL:エンパワメント、文化創造、先進性、革新

といった意味が込められており、Kyashが未来を切り開く姿勢と、それによって世の中が得られる未来が結晶化されています。

この結晶化された単語を元に、Manamiが、今度はMIで行った作業を遡るように、単語からイメージ画像を導出する作業を行いました。 この画像収集ではまだ抽象度が高い状態ですが、抽象度が高いがゆえに色々な解釈から想像が湧きやすく、メンバー間で単語と画像から導出されるKyashのイメージを模索しました。

f:id:chihiro-hara:20190731190315j:plain
Figmaにてメンバー間でアイディアを共有しながらのスタディ

そして、最終的にVIを構成する最小単位となるグラフィック・ランゲッジを定義しました。 グラフィック・ランゲッジとは、今後デザイナーがデザインする制作物の構成要素となるもので、全てのアウトプットに共通する「らしさ」を演出することができ、視覚からサービス価値を想起させる役割を担います。

f:id:chihiro-hara:20190731190322j:plain
割り勘をメタファーにしたビジュアル・ランゲージ

「お金=価値」共有が行われる一番象徴的な行為に「割り勘」があります。この割り勘は英語では「Split」、日本語でも英語でも「割る・割く」という意味合いがあり、一見すると価値が二分されてしまうようにも思えます。しかし、Kyashでは分け合うことで価値が二倍、三倍になる・喜びが増すという未来を創りたいという想いから、1つの円に色(喜び)が割られることで増えるというグラフィック・ランゲージを定義しました。

並行して、「FUN」や「IMPACTFUL」の意味合いを強めるためコーポレートカラーを含むカラーパレットでは明るくバイタリティのある 色味を定義しました。

f:id:chihiro-hara:20190801160807p:plain
コーポレートカラー
f:id:chihiro-hara:20190731190339j:plain
カラーパレット

ここまでの作業を終えて、MIを効果的に表現するVIの定義まで行えました。このMIをVIに置換する工程はデザイナーの力量が一番に求められる部分で、それが純度高く行えたことは、ManamiとMasaの力が大きいと感じています。(改めてこの場を借りて感謝!)

アプリ、サービスサイトへの反映

VIの定義まで終え、アプリとサービスサイトへの反映を行いました。ここで一番苦労したのが、ブランディングとUI・UXの融合です。 まずUXを考えるにあたり、MIの定義とそれまで貯めてきたユーザーからのフィードバックを交え、Kyashがこれまで提供してきた価値と、これから提供していきたい価値を機能的価値と情緒的価値という形でまとめました。 ここではまだプロダクトに反映できていませんが、ブランディングに沿った新しい体験を提供するために、新機能のコンセプト作成なども行いました。(この新機能は、ゆくゆくはユーザーテストも行い、検証してプロダクトに反映していきたいと思っています)

f:id:chihiro-hara:20190731190355j:plain
ユーザー体験シナリオ

次に、VIとUIの適合作業を行いました。VIの定義時にその後の各クリエイティブへの展開を見越し、ある程度のアプリのUIイメージを持って進めていましたが、ブランディングで規定した「FUN」「IMPACTFUL」なカラーパレットと、アプリのUIとして見易さや分かり易さを考慮したアクセシビリティの両立は想定以上に苦労したところです。この点は、Manamiがコーポレートやマーケティングで使うブランドカラーとは別に、アプリ内の操作性に関わるUIカラーを規定することで、解決してくれました。

f:id:chihiro-hara:20190731190421j:plain
UIガイドラインの一部

一方、サービスサイトのデザインはマーケティングチームと連携して、Manami中心にデザインしてくれました。「FUN」「CONNECTED」「IMPACTFUL」な印象が出せるように、VIで規定したカラーパレットやスクロールに合わせ画面がSplitする表現を加え、印象の統一を図ってくれました。また、サービスの訴求軸を足元の戦略に合わせ、クレジットカードやデビットカードをKyashに登録することで得られる利点に変更しました。

f:id:chihiro-hara:20190731190408j:plain
サイトリニューアル前後の比較

リニューアル後の主な訴求点

  1. お手持ちのカードを最大5枚までKyashに登録し管理することができる
  2. 履歴や通知がKyash上でリアルタイムに確認できるので使い過ぎの心配が無い
  3. お買い物の際には登録したカードだけでなく、Kyashでも2%の高還元が受けられお得
  4. カードによる割り勘ができる
  5. 万が一の際はロックを掛けられるので安心

また、このマーケティング戦略に沿うように、アプリのUIもクレジットカードやデビットカードを持っているユーザーを優先する操作性に変更しました。このマーケティング戦略についての詳しい内容は、こちらをご覧ください。 blog.kyash.co

f:id:chihiro-hara:20190731190434j:plain
アプリリニューアル前後の比較

以上が、アプリ、サービスサイトリニューアルの背景と、その要因となっているブランド・プロジェクトの経緯になります。 最後に、Kyashの未来について少しだけお話して締めたいと思います。

Kyashの未来

今後はKyashの描く「新しいお金の文化を創る」こと、それを成すことで、企業や個人が経済的にも感情的にも豊かになれる未来を創るという目標に対し、変化の激しい市場環境下で、最速でサービスに適用していくことが求められています。

また、ビジョンだけでなく、海外も含めた市場動向や、日本市場の課題をキャッチアップして適切な戦略に落とし込むこと、既存のユーザーのロイヤリティを高める施策、定性・定量両面から課題を抽出し、適切な解決策を生み出すことなどが求められています。

Kyashはよくグロースフェーズに入っているのではという声をいただきます。もちろんグロースは最重要ですが、それに加えまだまだ新機能開発やWhy, Whatを一緒に定義していけるフェーズで、エンジニアを筆頭にPM、データアナリストなど多くの仲間を必要としています。

Fintechの決済・送金領域では資金力で勝負を掛ける還元競争が巻き起こっていますが、Kyashは還元競争ではなく、ビジョンにもとづいてサービス開発を行う会社です。そして、それに共感する仲間が集まっています。また、先般の大型資金調達 の報道にもある通り、Kyashはいよいよ決済事業者としての枠を超えて、バンキングのレイヤーに入っていきます。 techcrunch.com

Kyashではデザイナーを募集しています。ビジョンに共感し、一緒に未来を創っていきたいという方、是非ご応募お待ちしています! サービス・プロダクトデザイナー の応募はこちらから open.talentio.com