6gram

みんなで楽しく使える、新しい決済サービス

新規事業の立ち上げには不確実性がつきものです。不確実性をつぶしながら6gramという事業の種を見つけるべく、Goodpatchは企画フェーズから全てのプロセスに並走。
プロジェクト開始後の3ヶ月間で事業創出を目指し、ユーザー調査・市場調査、アイデア発想・アイデア特定、プロトタイピング、ビジネス要件の定義に取り組みました。

スピード感を持って事業の実現可能性を検証するため、毎週ワークショップ形式でのディスカッションを実施しました。プロダクトオーナーからエンジニアまで参加する場で議論を重ね、アイデアを作っては壊し、決済サービス市場で6gramがどのように独自性を築いていくべきなのかを探っていきました。

サービスアイデアの深掘りにはストーリーボードやカスタマージャーニーマップを使い、初期ペルソナと定義した方に複数テストを実施。

サービスに共感できるか、特徴を理解し受け入れられるか、自分が使いたいと思えるかなどを聞いていく中で、決済サービスの利用者は「誰かと一緒に支払う」という行動において多くの課題を抱えていることがわかりました。

身近な人とのお金のわずらわしさという課題を解消するため生まれたのが、同じクレジットカードを作りシェアするというアイデア。6gramが少し、形になった瞬間でした。

プロジェクト初期の目的は事業創出だったため、ビジュアルデザインを作り込む前に、時間をかけずユーザーテストを繰り返すことが必要でした。そこで、iOS Human Interface Guidelinesに準拠した標準的なUIパーツを使ってすばやくUIを組み上げ、最小限の構成でも成り立つ形を検討しました。また、一部にはインタラクティブな動きをつけてみて、それがきちんと機能するのかどうかを探りました。

事業創出フェーズを終えて本開発に入ってからは、ユーザー体験を軸に俯瞰できるようサービスブループリントを作成。ペルソナや関係機関の全ての行動を洗い出し、不確実な状態を一つずつなくしていきました。このサービスブループリントは、ビジネス視点、論理性、ブランドなどの要素を同時進行で磨き込み、サービスとしての骨子をつくるために活用しました。

情報設計フェーズのUIデザインにおいては、OOUI—Object-Oriented User Interfaceの発想を取り入れ、まずはUIで扱うオブジェクトの姿を捉えることとしました。

• UX主要コンセプト、ペルソナモデル、カスタマージャーニーマップ等からUIに現れる要素（オブジェクト）を抽出
• 概念モデルを描いて、UIの要素（オブジェクト）と関連性を論理的に表現
• 明らかになったオブジェクトと概念モデル上の関連から、画面のパターンを検討
• 画面レイアウトに対し、オブジェクトを照合
• オブジェクトを起点に、画面レイアウトや操作方法をさらに精緻化

このようにデザインを磨いていくことで、論理的な正しさを保ちながら目当てとするイメージに近づいていけると考えたのです。作業をする上でも前後の工程が密接に繋がっていることをイメージしやすかったため、手戻りを減らすことができました。

オブジェクト抽出と概念モデルの設計段階では、UMLのクラス図の記法を参考にしながらオブジェクトの様子を図式化していきました。UMLはエンジニアリングの世界ではよく使われる言語ですが、UIデザインの情報設計段階でもこれを導入することで、UIに現れる概念の姿を捉えながらその論理構造を正確に表そうとしました。

特に多重度の検討はその後のUIにおける拡張性の論拠になったので、リスト構造なのか単体表示なのか、モデルを描くだけでUIの形をある程度はイメージすることができました。

また、UMLはエンジニアであれば誰もが読むことができるので、デザインとエンジニアリングの結節点にもなりました。これが作業の手戻りを減らすことのできた理由の一つです。

この時点でサービスブループリントを作り上げていたので、こんどはOOUIの視点からサービスブループリントに対しオブジェクトをマッピングしてゆく作業を行いました。ユーザーはどの段階でどのような「オブジェクト」に触れることになるのか。それをサービスの全体像を見ながら明らかにしようとしたのです。

このようにして、デザイナーがオブジェクト指向の発想でUIデザインと向き合うことで、デザインとエンジニアリングの間に共通の言葉が交わされるようになりました。お互い同じ認識を持つことができるようになっため、デザイナーとエンジニアが同じ目当て、同じ言葉を用いて議論を展開しやすくなりました。

OOUIデザインの考え方については以下の記事もご覧ください。

OOUI・オブジェクトベースなUIデザインに取り組むための心構え

6gramというサービスを人格として捉えたときに出たキーワードからトンマナを決定。
親しみ、軽やか、堅実、安心などが6gramのブランド思想の根底にはあります。

これらのブランド思想をベースに、アイコン、サービスロゴ、アプリ内で表示されるカード、実際に手元に届くカードなどのビジュアルデザインに展開していきました。

6gramには「作成したグループにみんなで入金する」「複数のカードを作り支払先を自由に変更」など、まだユーザーが経験したことのない、世の中にない体験が多くあります。そのため、UIデザインにおいてはチームメンバーとの納得感をお互いに作り上げながら、デザインパターンの発散と収束を繰り返しました。

アイコンデザインも、ブランド思想から6gramらしさを言語化し、モチーフやディテールに落とし込んでいます。
ラフスケッチでは、同じモチーフでも複数のパターンを出し、検討を重ねました。6gramのブランド定義における「親しみやすさ」や「心地よさ」をアプリを通してよりユーザーに伝えやすくするためです。

UIにおけるアイコンの役割や重要性、制作時のポイントはこちらをご覧ください。

UIデザインにおけるアイコンの重要性

6gramでは、個人カードやグループで使えるカードを作成し、それぞれを識別するため、カードのデザインに任意の画像を設定することができます。ユーザーと6gramの接点となるカードにも、ブランド思想が宿っています。サービスロゴや幾何学パターン、グラデーションなど、6gramらしいグラフィックデザインを意識しました。

普通のクレジットカードの重さ5グラムに、1グラムを足して、6gram。追加された+1グラムには新しさ、遊び心など、「ちょっといい価値」が込められています。
そんなサービス名が力強く印象に残るよう、象徴的な数字の「6」と、コミュニケーションを表す吹き出しを組み合わせたロゴを作成しました。

+1グラムの「ちょっといい価値」はレベルアップをモチーフにしたアニメーションとしても作成しており、プロダクトのオンボーディングで再生されます。

不確実性が高い新規事業の立ち上げだからこそ、私たちはクライアントに出来上がったものを見せるコミュニケーションをするのではなく、デザインパートナーとして一緒に議論したり、議論のきっかけを持ち込むことを大切にしました。

クライアントという垣根を超えて、一つのスタートアップのようなチームとなり事業を作り上げていくこと。それがGoodpatchのデザインパートナーとしてのスタンスです。