「ToDoサービス（WEB版）」UIを４DAYsでまるっと作る

「複数画面にまたがるUIデザイン」のWEBバージョンです。BONOでは毎月デザインイベントがオンライン上であり、TodoサービスのWEB版の主要機能を４DAYsで作るというお題をやってみました。

「ToDoサービス（WEB版）」４DAYs
DAY１　ToDoサービスのホーム画面
DAY２　ToDo追加のUI
DAY３　ToDo編集/削除
DAY４　共有メンバーの追加

ユーザーフロー

４DAYsに分かれていますが、今回一気に作成しました。
まず考えたのはToDoサービスを使う人のユーザーフローです。

ToDoサービス_ユーザーフロー

気がついたこと

• ユーザーフロー大きく分けてタスク作成、プロジェクト作成、作業中の３つの分けることができそう

• タスクを作成するフロートプロジェクトを作成するフローは順序が入れ替わることもありそう

• そもそものタスクとは、プロジェクトとはなどを定義した方が良さそう

オブジェクトの構成（情報設計）

次に言葉の定義やオブジェクトの構造がどうなってるのかを考えたほうがよさそうと思い図にしてみました。

ToDoサービス_オブジェクト構成

考えたこと

• 会社/チームに人が所属している

• 会社ではいくつかのプロジェクトが走っている

• プロジェクトに人やタスクがアサインされている

• タスクには期日を守る担当がいる

• タスクには実際の作業者がアサインされる

メインオブジェクト

次にメインオブジェクトについて考えました。

ToDoサービス_メインオブジェクト

ここまで出たところで手書きでどんな画面がいるかな？と書き出して考えていきました。
また実際figmaで画面作成したときに参考にしたのはasana とTrelloでした。

ToDoサービス_画面の手書き

プロトタイプ

出来上がったプロトタイプ がこちらです

BONOのデザインイベントでこういうお題をいただくことにより複数画面のUIを作成する良い機会に恵まれました！感謝

BONO(ボノ) | プロと学べるUI/UXデザインオンラインコースサービス