思想家のためにデザインされた Baronfig の新しい Web サイト | アドビ UX 道場 #UXDojo

Baronfig は、思想家のためのツールを提供する企業です。クラウドファンディングプラットフォーム Kickstarter のプロジェクトとして 2013 年にたった 1 冊の手帳から始まった当社は、現在では 30 以上の異なるツールを提供するまでになりました。最初の製品である「Confidant」で起業したとき、私たちは Web サイトの構築をたった 1 つの製品を中心に行わなければならないことに気づきました。そこで、手帳に関わるストーリーをつくり出し、製品に重みを与えることで、サイトが充実していると感じられるようにしました。その後、製品の種類が増えるにつれて、より多くの人々が自分に合った製品を見つけられなくなっていることに気が付きました。サイトでは、すべての製品が等しく紹介されていたのです。私たちが「階層がない」ことを理解したのはその時です。

顧客が製品をよりよく理解できるようにするために、サイトとユーザー体験を刷新することが必要でした。新しいサイトには、既存製品の場所を確保しつつ、新製品に対応できる拡張性も必要でした。もちろん、デザインは私たちが掲げる高い基準を満たさければなりません。つまり、それは壮大な作業だったのです。

新しいサイトの方向性は、製品デザインと同じ原理、「シンプル」「便利」「コミュニティ」に従うことにしました。私たちの顧客はデザイン心を持つ人々です。最終的には、彼らに受け入れられるデザインでなければなりません。それと、サイトにアクセスしたときに、ワンクリックで必要なものが見つかることを重視しました。ビジョンが固まったら、プロセスのあらゆる段階にデザイン思考を適用しました。以下がその様子です。

デザイナーの視点

シンプルなデザインの物理的な製品をオンラインで販売することは、非常に大きな挑戦です。顧客が手に取って試すことができないため、顧客の感情に訴えるように製品を提示しなければなりません。例えば、手帳であれば、布、しおり、紙の質感が分かるように拡大した写真を載せ、パソコン、電話、両手の上など、大きさを感じられるものの横で使用している様子を紹介しています。

私たちは、最適な表現方法を判断するため、デザイン見直しの作業を、チームとして高く評価している 10 余りの e コマースサイトの調査から始めました。すべてのページを精査してスケッチし、サイト全体のワイヤーフレームを作成し、膨大なメモをとりました。走り書きや図解が隈なく書き込まれたノートが何冊もできました。スケッチはとても判読できるものではなく、普通の人には象形文字にでも見えたでしょうが、とにかくこれらの落書きが最初のフレームワークとなりました。

手書きのスケッチを元に、チームは Adobe XD を使って新しいサイトのインタラクティブなプロトタイプを作成しました。そこから開発は急速に進みました。XD は、CPU に比較的優しくて、多くの要素を管理できます。アートボードを繰り返し複製して修正できることが、デザインプロセスを完全に変えました。複数のアートボードを接続して、機能するプロトタイプをつくることもできました（以前使用していたツールでは、ページ間の関係を確認する方法はありませんでした）。XD では、サイト全体を 1 つのファイルとして作成しました。それにより、ファイルを開いたらパレット全体を活用し、テキストや画像をページからページへと追加するといった作業が自然にできます。こんな単純なことが、ワークフローを変革してしまったことは驚きです。

数多くのアイデアを出して試行錯誤した後、「ツール」「ワークスペース」「トラベル」の 3 つのカテゴリーを中心にサイトを構成することを決定しました。また、それぞれのカテゴリーページには主要な製品をひとつトップに配置することにしました。他の 27 のアイテムは、メインの製品の下に配置する、その他の製品やアクセサリーという位置づけです。明確な階層関係ができたわけですが、実際これが大きな違いとなりました。

全員をまとめるひとつのツール

XD には、プロトタイプをクリックして操作しやすくする手段がいくつも提供されています。そのため、プロトタイプを日常的に使用していない人にも気軽に提供できます。XD を使い始める前は、作業中のデザインを見せようと思ったら、静的な PDF として書き出すか、相手に画面を見せながらフローを説明する必要がありました。今では、デザイナーではない人であっても、サイトのプロトタイプに触れて、コメントし、インターフェイスが実際にどう機能するようデザインされているかを理解できます。多くの人がサイトデザインに簡単にアクセスできて操作できれば、成果物の質は飛躍的に向上します。

例えば、チームとして設定した成功指標に「デザインの変更には誰も気づかないが、注文は増える」というものがありました。新しい体験で顧客を驚かせたり混乱させたくなかったため、トップページはあまり変更せず、アバブ・ザ・フォールドの特定の要素は、以前のサイトと同じになるよう残しました。ほとんどのサイトの主要なエントリーポイントには手を付けず、内部構造をゆっくり進化させました。このアプローチは、デザイン、ビジネス、体験を、ひとつの Baronfig ブランドとして考えていたことから発生したものです。

目的実現のためのデザイン思考

Baronfig はデザイン主導の会社であり、外部の出資者はいません（出資を申し出るメールによる要望は絶えませんが）。この会社は、収益や利益よりも、ブランドの品質、つまり見た目の美しさやメッセージの伝え方を重視しています。その目的に向けて前進できているのは、小さなことにも気を配り、それらを高め、顧客に的確に伝えるスキルを身につけているからです。

サイトデザインの修正においても同じアプローチで臨みましたが、その成功は売り上げに反映されています。パンデミックにもかかわらず、製品の販売ペースは以前より高くなりました。しかし、それ以上に、製品に頼ることなく、思想家のための道具をつくるというブランドを確立することができました。私たちは、優れたデザインの製品は、人々の思考を高め、より生産的にできると信じています。

新しいサイトの実現には、多機能なソフトウェア、堅実なデザイン、確実なプログラミング、効率的な制作、素晴らしい文章など、Baronfig チーム全員の途方もない努力を要しました。私たちの新しいサイトは、私たちのミッションをさらに洗練させる新たな成功のステップであると誇りを持って宣言できます。

この記事は Baronfig’s new website: A thinker’s journey（著者:Joey Cofone）の抄訳です