/ Meet the Designer

Meet the Designer #1 | Ozgu Ozden x Crumby

Meet the Designerは毎回Artefactに所属するUIデザイナーが登場し、デザインした一つのプロダクトを通してそれぞれのデザインプロセスや考え方、テクニックに迫るシリーズです。

Ozgu Ozden

https://dribbble.com/ozgu

602A3629-2

国内外の企業にて、アートディレクション、UI/UXデザインの分野で活躍したのち、Artefactにてデザイン分野全般を統括。
ユーザーの動作を計算し、緻密に設計したUIで高い評価を得ている。

Crumby

https://crumby.io

work1-2_2x-2

デザイナー向けのプロジェクトマネージメントツール。
InVisionやAdobe XDなど、デザイナーとクライアント間のコミュニケーションツールが多々あるなか、機能を最低限に絞り、シンプルなUXにこだわってデザインされている。

"自己紹介をお願いします。"

Ozgu Ozdenといいます。
アプリケーションのデザインをメインとして、
UI/UXデザイナーの仕事をしています。

Crumbyには企画段階からプロジェクトに参加して、UIデザインやプロトタイプのユーザーテストを通した改善などを行なっています。

"Crumbyをデザインすることになったきっかけについて教えてください"

Crumbyは普段のデザイン業務で感じていた問題点を解決する為にArtefactでの社内プロジェクトとして始まりました。

顧客との仕様の調整、デザイン案の共有、フィードバックのやりとりなどを今まではSlackでのExcelのやりとり、Dropboxでのファイル共有など様々なツールを横断して行なっていました。

しかし、様々なプラットフォームに情報が分散すると、

  • 「最新のデザインファイルはどれだったか」
  • 「修正完了しているフィードバックはどれか」
  • 「どの修正要望に今対応する必要があるか」

などがチーム内で不明確になってしまいます。

プロジェクトが進むにつれて、これらのやりとりはさらに煩雑になり、顧客とのスムーズなコミュニケーションに支障をきたしていました。

Crumbyの開発が始まったきっかけは、このようなコミュニケーションをシンプルに1箇所でまとめられたらというデザイナーとしてのニーズからでした。

"Crumbyをデザインする際に担当した領域、ワークフローについて教えてください"

プロジェクトの企画とUIデザインを担当し、
企画段階から簡単なプロトタイプを作成することで、アプリケーションの有用性について何度も確認を行いました。

プロトタイプを早めの段階で作成しはじめた理由は、
メイン画面に表示するべき情報について、ユーザーテストにて検証を行なった上で決定したかったからです。

  • カンバンUI(= プロジェクトの進捗が一目で確認できる)
  • タスクリストUI(= 現在のタスクリストが一目で確認できる)
  • チャット型UI(= 顧客とのやりとりにフォーカスして、デザイン案件に特化した機能を付けたチャット)

など複数のUIを試しましたが、
どれもデザイナーや顧客が直感的に必要な情報にアクセスできるものにはなりませんでした。

New-Mockup-1

初期プロトタイプのメインUI(上図)
プロジェクトのフローを固定化してしまい、柔軟に様々なケースに対応することができなかった。

そこで、デザイナーと顧客とのコミュニケーションを分析することにしました。

今までの顧客とのSlack上でのやりとり等を分析した結果、
デザイナーの作成した画面やコンポーネントを元にコミュニケーションが展開されていることがわかりました。

例えば、

  • ホーム画面修正第3版フィードバック3対応しました。」

  • コンタクトリスト修正第4版色味調整して下さい。

  • プロフィール画面ファイルアップロードしました。"」

などです。

この、

画面一覧 → 画面詳細 → 画面のバージョンリスト → フィードバック

という階層をUI上で忠実に表現すると、必要な情報に直線的にアクセスできるようになることがわかり、最終的にCrumbyのメインの画面は、画面やコンポーネントなどのデザインのリストを表示するシンプルなものに落ち着きました。

project-details@2x-1

profile-screen

現在のメインUI(上図)
デザインされた画面をリスト化し、画面に関するやりとりやフィードバックなどを画面詳細ページから行うようにした。

"CrumbyのUIデザインのためにこだわった点、インスピレーションの元として参考にしたものなどはありますか?"

見た目としてのデザイン面では、近年のトレンドを取り入れるようにしました。

例えば、

  • 明るいグラデーション
  • 深めのシャドウ
  • 広めの余白(ホワイトスペース)

などです。

グラデーションの使い方では、AsanaのチームのDribbbleがとても参考になります。
https://dribbble.com/asana

Asanaは機能が多くUX面で個人的に使いにくにと感じる部分はありますが、色や線の使い方など、トレンドのデザインでとても参考になります。

他にも、デザインの参考としていつも以下のデザイナーやチームをフォローしています。

ウクライナのデザイン会社Tubik、
https://dribbble.com/Tubik

アメリカのデザイン会社Fantasy、
https://dribbble.com/Fantasy

InVisionのデザインチーム、
https://dribbble.com/InVisionApp

Johny Vino (アメリカ)
https://dribbble.com/johnyvino

"UX面で気をつけたことなどあれば教えてください。"

新規事業の初期デザインであったため、
MVP(Minimum Viable Product)として検証したい機能だけに機能を絞りました。

ベータ版での検証では、
「ExcelやSlack上でのフィードバック・修正のやりとりを代替できるか」
の1点の検証を目指しています。

ユーザーテストを始めてみたところ、基本機能としては必要最低限で十分であり、
むしろ今まで使っていたツールとの連携をできるようにして徐々にCrumby1本でプロジェクトを管理することにユーザーを慣らす必要があることがわかってきました。

例えば、

  • 今までSlack上で通知を受けることに慣れてきているので、
    Slack APIと統合してCrumby上での通知をSlackに流す。

  • 顧客とのやりとりをドキュメントとして残す必要があるようなケースの為に、
    Excelにフィードバックや、やりとりの記録を出力できるようにする。

などの機能が必要になってきそうです。

UX面の改善には、まず簡易的なプロダクトをリリースし、
実際のユーザーとのやりとりを通して仮説を検証するという方法が1番効果的だと思います。

"デザイナーとしてデザイン以外の部分でプロジェクトに貢献できる部分は何ですか?"

UIデザイナー全般として、どのようなプロジェクトに参加する場合でも企画段階からチームに入ってUI/UX面からプロジェクトに貢献する必要があると思います。

プロダクトデザインを行う際に、

  • 企画担当者がワイヤーフレームを描いてデザイナーに渡す
  • 社内で企画、ワイヤーフレームを作り、デザインのみデザイン会社に外注

というようなフローを取っている場合もあると思いますが、
UIデザインに関して言えば、情報の整理、ワイヤーフレームの設計、アニメーションの設計などはとても専門的な分野であり、UXに関して知見を持った人がプロジェクトの初期から参画して担当する必要があると思います。

信頼できるUXデザイナーがプロジェクトにいる場合は、UIとUXの担当を分けることもできるかと思いますが、近年のアプリの傾向として、様々なユーザーインタラクションによってデザインが動的なものになってきているため、UIとUXを同時に考えることができるとプロジェクトにより貢献できると思います。

"制作に使用したツール、環境等について教えてください。"

デザインには主にSketch(https://www.sketchapp.com/)を使用しています。

今回は、ワイヤーフレームにはPencil(http://pencil.evolus.vn/)を使いました。
ワイヤーフレーム作成に参加していたエンジニアがLinuxを使用していた為、
マルチプラットフォームで動作するソフトウェアが必要だったためです。
あまりメジャーなツールではなさそうですが、必要な機能は揃っていたと思います。

普段はBalsamiq(https://balsamiq.com/)やSketch(https://www.sketchapp.com/)も使用します。

アニメーションにはPrinciple(http://principleformac.com/)を使用しています。
Principleはアプリ上で表現できるアニメーションに適しており、
エンジニアがコードを書く際にも無理なく実装できる範囲での表現になると思います。

Adobe After Effectsなどで自由にアニメーションを作った場合、
アプリで無理なく実装できる範囲をデザイナーが理解していないと、OpenGLなどでの実装が必要となり、アプリケーションのアニメーションには適さないようなことになってしまう場合があります。

"納品の際に工夫していることはありますか?"

顧客側でクラウドアプリの利用制限がない場合には、
Zeplin(https://zeplin.io/)を使用しています。

ZeplinではSketchから出力するだけで開発ガイドラインが作成されるのでとても便利です。
このようなアプリケーションが使えない場合にはPDFとして開発ガイドラインを作成して納品しています。

"今後挑戦していきたい領域・プロジェクトなどはありますか?"

UIデザインとしては現在ブラウザやモバイルアプリといったプラットフォームがメインですが、今後VRやARといった分野の発展によりUIデザイナーに求められるデザインも大きく変わってくると思います。
このようなテクノロジーの進化を最前線で感じることのできるようなプロジェクトに挑戦していきたいです。