Adobe XDとデザインシステムLiteを採用して2週間で公開されたビジネスサイト | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

Baron Figは、クリエイティブな人のための、美しいノートやペン、その他のアクセサリーを生産しています。彼らの製品はもともと個人向けにデザインされたものですが、最近、企業によって大量に購入されるようになってきていることが判明しました。

「ペン、ノート、メモ帳、付箋など、私たちのの製品すべてをチームとして揃えていました」とCEO兼共同設立者のジョーイ・コフォーネは説明します。「結局、こうした買い方への対応を正式に提供し、それを発見しやすくする必要性が明らかになりました。データを検証し、社内でアイデアを議論して、企業向けのBaron Fig for Business公開にたどり着いたのです」

新しいBaron Fig for Businessページのモバイル版とデスクトップ版

新しいUXワークフローへの移行

Baron Fig for Businessの構想から公開までにかかった期間はわずか2週間で、ジョーイは最初のバージョンを数時間でデザインしました。これはBaron FigにとってAdobe XDを全面的に採用した最初のプロジェクトでした。つい最近まで、チームはInDesignを使ってWebページをデザインしていたのです。

「デスクトップやモバイル向けのプロトタイプの仕事はひどいものでした」とジョーイは認めています。「InDesignに慣れている人なら、膨大な数のページに書かれた大量の寸法を想像できるでしょう。さらに悪いことに、われわれのモバイル版はホワイトスペースの真ん中に置かれていました。私が何を言っているのかわからないのであれば、その方が幸せです」

今のBaron Figは、XDが提供するプリセットのデスクトップ用とモバイル用の画面サイズを使い、より正確にページをデザインしています。Webサイト上にあるかのようにプレビューができて、クリック可能なページのプロトタイプは、多くの時間の節約に貢献し、ワークフローに大きな違いをもたらしました。

「私たちはプロジェクト全体をひとつのファイルにまとています。デスクトップ向けも、モバイル向けのページもです」とジョーイは説明します。「コンポーネントを使用すると、ナビのような繰り返し使われるアイテムを一つひとつ編集しなくてもまとめて調整できます。また、開発者に作業用のリンクを送ることができて、アセットの書き出しは、時間のかかる仕事から5分間の仕事へと変わりました」

Adobe XDで作成したプロトタイプの舞台裏

”デザインシステムLite”の作成

チームは現在XDだけで作業しており、それを簡易なデザインシステムにも使用しています。それにより、Baron Fig for Businessのすべての体験を追跡できるようになっています。

「デザインと開発はどちらもシステマチックな作業です。優れたデザインは限られた数の要素を使用しているものです。例えば、2種類の書体とシンプルなカラーパレットを使って、強力なメッセージを伝えたり」とジョーイは指摘します。「私たちは、Baron Fig for Businessの体験に必要なすべての要素を作成し、それらをひとつのデザインファイルに収めました。そこには、色、書体、アセット、コピーなどが含まれています。必要になったらすぐに使える状態になっているため、準備のために作業を中断して何か別の作業をする必要はありません」

これは、デザインの見直しとその繰り返しにも役立ちます。A/Bテストは、何が機能し、何が機能しないかを判断する上で大きな役割を果たしていて、チームは常に決められた時間に複数のテストを実行します。ボタンの効率のような詳細の確認が目的の場合もあれば、ページ全体が対象の場合もあります。公開されているページは “マスター” シリーズと名付けられていて、テストの際には “コントロール” と呼ばれます。”コントロール” のバージョンはアートボード複製して素早くデザインすることで作成され、それが繰り返されたのち、ある時点で開発用のリンクとして共有されます。

Baron Fig for Businessの非常にシンプルな手書きスケッチ

ユーザー体験の改善

実際のところ、新しいBaron Fig for Businessを立ち上げる上での主要な課題は技術的なものではありませんでした。彼らが注力していたのはユーザー体験で、具体的には、ユーザーが3種類の提案の意味するところを簡単に理解できるようにすることです。「サプライ」はチーム向けのバルク製品、「ブランド」は中小企業向けにカスタマイズされた製品、「テーラード」は大企業向けのオリジナルデザインの製品です。

「複雑そうですよね」とジョーイは笑いました。「この目標の達成や、それに続く課題の克服には、多くの試行錯誤が必要とされます。私たちの目標は、ユーザーがどのカテゴリーに当てはまるかを素早く理解して、私たちに連絡を取るようにすることです」

Baron Fig for Businessはまだ始めて間もない段階で、それでも顧客からの問い合わせが目立って増えてきています。ユーザー体験のあらゆる部分が常に洗練され、また、機能も拡張されています。

「この記事が公開されている頃は、Baron Fig for Businessポータルは数カ月に及ぶ3回目の見直しを行っていることでしょう」とジョーイは締めくくりました。「数週間ごとにサイトを訪れていただければ、リアルタイムで進捗状況を確認することができるでしょう」

この記事はHow Notebook Maker Baron Fig Transformed Its Workflow to Improve UX for a Shifting Customer Base（著者:Oliver Lindberg）の抄訳です