ファイル送信のUIデザイン / Web, iOS, Android

7人のプロジェクトチーム

• プロダクトマネージャー
• プロジェクトマネージャー
• エンジニア 4人
• UIデザイナー

ぼくはUIデザイナーを担当しました。

課題

リリース前はファイルを選択すると即座にタイムラインに送信されていました。

そのためユーザーはファイルアップロードをした場合、アップ完了時間（タイムラインにファイルが表示されるまで）を見計らって、アップ完了と同時にファイルに関するコメントを手動送信しなければならず、作業効率が低下してしまうという課題がありました。

解決策

仕様案の検討
@プロダクトマネージャー with UIデザイナー

プロダクトマネージャーと他社サービスを使ってカスタマージャーニーを作成し、得られたインサイトから改修案の仕様を考えました。

既存仕様の把握
@UIデザイナー

機能改修プロジェクトだったので既存仕様の把握も大切でした。

ファイルアップロードや機能についてドキュメントだけでわからなかったところは画面遷移図を描いて整理し、エンジニアに動線などを確認しました。

画面遷移図

Web のプロトタイプ設計
@UIデザイナー withプロダクトマネージャー, エンジニア

社内検証前後で2回プロトタイプをつくりました。

社内検証前のプロトタイプではタイムラインのメッセージ入力欄にファイルのサムネイルが表示される形を考えていましたが、サムネイルだと画像が小さく複数ファイルで区別がつきづらいという意見や、Chatworkでは見慣れないUIなので使い方がわからないという意見がありました。

社内検証前のプロトタイプ

そのため検証後のプロトタイプではモーダルダイアログを採用し、画像を改修前と同じくらい大きく出すようにしました。

モーダルを表示することでファイルアップロード以外の操作が制限されるトレードオフはありますが、アップロードする画像を見ながらメッセージの文章を考えれるこの案でリリースすることにしました。

社内検証後のプロトタイプ

iOS, Android のプロトタイプ設計
@UIデザイナー withプロダクトマネージャー, エンジニア

ユーザー体験やできることは Web に合わせつつ、画面遷移などの考慮をおこなってからiOS, Android それぞれ以下のようなプロトタイプを設計しました。

iOS

Android