Eightリニューアルのデザインについて少しだけ...

Eight事業部デザインマネジャーの友近です。
少し前の話ですが、Eightは2018年12月にメジャーアップデートversion9（以下V9）をリリースしました。
今回は、このV9を開発するにあたりデザイナー達の観点でこだわった部分をいくつか紹介したいと思います。

素早く修正できるモックアップの作成

それまでEightは、名刺でつながるビジネスSNSの側面を強めていました。そこからさらに、名刺交換の先にある「人脈形成・管理・活用」に必要不可欠なサービスに進化させるため、アプリ全体をこのタイミングで整理する必要がありました。

まずは全体の構造を見直し、アプリのモックアップを作成していきました。初期のモックアップは、最初に構成や遷移をじっくり検証するために、簡易的なものから作成して何回も作りなおすことが多いと思います。

しかしこの時は、リリース日に対して潤沢な時間もなく、スピード感を持って進行したかったため、はじめからUIパーツの位置やトンマナもイメージしやすいモックアップを作成していきました。ただ、作り込んでしまうと修正が難しくなるので、60〜70%程度の完成度を意識してモックアップをつくりました。修正しやすく完成イメージも持ちやすいモックアップにより、慌ただしいスケジュールでもPMやエンジニアと大きくな認識ズレがないまま、素早く改善を繰り返し、最後まで進行することができました。

f:id:tomoreya:20191106132719p:plain — モックアップ例

デザインで大切にした2つのこと

V9のデザイン面では意識したことが大きく2つあります。

1つは「UX制作ルールの設定」です。
全体を整理して画面や遷移を作り変える際、シンプルな設計になるようにいくつかの基本ルールを設けました。

例えば「基本の目的達成に必要なタップ数を４回までに抑える」といったものです。これは、ユーザーが行いたいであろう目的に対して必ず4タップでたどり着けるようにするというルールです。それにより、機能が多くありながらもユーザーが操作中に迷子にならないような設計に仕上げることができました。
また、「ユーザーがよく使用する基本動作の入り口に、プレミアム会員案内の導線を配置する」というルールも設定しました。モックアップの制作前にデザイナー間でルールを設定しておくことで、分担作業が発生してもうまく協力しあって設計できました。

もう1つは「ビジュアルデザインのコンセプト整理」です。
ビジネスSNSの要素を強めていた時期は、フィードをプロダクト戦略の中心としていました。フィードはコンテンツファーストであるべきと捉え、コンテンツの文章や写真が目立つようにプロダクトはモノトーンベースでスタイリッシュな印象のUIでした。しかし、V9ではプロダクト自体のコンセプトが変わったため、UIも同じくコンセプトにあったものに変える必要がありました。

そこで初めに、Eight事業部長やCPOにV9以降にEightが向かうべき方向やどういった印象を抱いてもらいたいかをヒアリングして、デザインコンセプトの言語化を行っていきました。最終的に「シンプル・フレンドリー・ボールド」という言葉に絞り込み、カラースキームやアイコンやイラストを作成していきました。以前と比べて明るいブルーを全体的に使用したり、アイコンのエッジを丸く調整するなど細部にもこだわって設計したため、全体的に調和のとれたデザインに落とし込むことができたと思っています。