こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。
2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった新ジャンルのサービス「家計簿プリカ」を運営しているのですが、チームメンバー全員でサービスをデザインできるように、デザインを透明化し目線を揃えた上で有意義な議論ができるようにしています。
第6回ではプロトタイピングや詳細設計を行う際、Figma上で行っている工夫をご紹介します。
良いフィードバックを引き出すために
SmartBankには「フィードバックを集める」というデザイン原則があります。
「フィードバックを集める」
スマートバンクでは、ユーザーや多くの社内メンバーから多様なフィードバックを受けながらデザインすることを大切にします。
そのためにリサーチ・要件定義・プロトタイピング・詳細設計のドキュメントを公開しデザインプロセス全体をオープンに保ちましょう。
よいフィードバックを得るために、先行サービスの事例を調べ、できる限り体験し、理解した上で体験のコア部分から優先的に試作します。またフィードバックをいつ、誰から、どのように受け取るかをあらかじめ考えましょう。
私たちは多くのユーザーや社内メンバーから質の高いフィードバックを集めることでより良いサービスをデザインできると考えています。SmartBankのプロダクトデザインプロセスにおいて、リサーチと要件定義の工程では「文章」でデザインを透明化し、さまざまなフィードバックを集めやすくしています。この工程はおもに、UXリサーチャーやプロダクトマネージャーが担当します。
そして、デザイナーは次の工程であるプロトタイピングや詳細設計のプロセスで、リサーチや要件定義で明らかになった課題や要件をもとに「ビジュアル」でデザインを透明化し、実装するものを明確にしていきます。
SmartBankではこの「ビジュアル」による透明化をFigmaで行っているのですが、日々業務を進める上でもっと改善できる余地がありそうということがわかってきました。
これまでのB/43のモックアップ
以前は、画面ごとにそれぞれの状態を作成し、並べて整理していました。
また、条件分岐の表現方法は人によってさまざまで、フレームのタイトルで表現する場合もあれば、付箋のような見た目のコンポーネントで表現する場合もありました。
本来UIは動的なものであり、「良いフィードバック」を引き出して有意義な議論をするためには、静止画であっても、ある程度見る人がどのように動作するのか想像しやすくする必要があります。そのため、モックアップを見る人がより動的にイメージしやすい形で構築できないか模索しました。
