リデザイン｜Nobi for Team ユーザ詳細画面
［概略］
転職課題として、株式会社enstem様の自社サービス『Nobi for Team』のダッシュボードをリデザインしました。
01｜Nobi for Teamって何？
『Nobi for Team』は、スマートウォッチから取得した「カラダデータ」とアンケートによる「主観データ」から、組織やチームのパフォーマンス状態を可視化することができるツールです。
02 | 課題の内容と目的
頂いた課題※メールより一部抜粋
添付した画面のリデザインをお願いします。
提出時になぜそのようなデザインにしたのかの説明も添付してください。
このページの役割は管理者が、
1. ユーザーのパフォーマンスがどのようになっているか
2. それぞれの要素(睡眠など)がどのようになっているか
これらをすぐに把握できることです。
ユーザーは30代~40代前半くらいの管理職(マネージャー)で、
週次の1 on 1などで部下の状態を把握するために使うことを想定しています。
添付画面
03 | 成果物
04 | 私がリデザインで解決したいこと(課題・問題点)
全体について
・評価の表示がグラフ毎にわかれているが、一括で確認できると便利そう。
・タイトル—状態—グラフの形により、タイトルとグラフの紐づきがわかりにくい。
・自分が今どの画面にいるのか、現在地がわからない。
・基本情報が一番見たい情報だっけ？
カードについて
・グラフの凡例は常時表示させる必要性はなさそう。
・1on1は週次だけど、週/月/年で情報をスイッチできると便利になりそう。
・各カードによって要素がバラバラ。あったりなかったり。
・各カード内の「評価」の字が小さい。
・「影響のある要素」など、評価に影響するので大事…だけど見た目の優先度は劣後しそうなものがある。
・基本情報内の要素(メールアドレス、登録日時)も、毎週見る必要ある？
・デバイス同期履歴はこの画面で確認する必要があるものか？
グラフについて
・データなし＝0となっているグラフがある。
・「疲労度高」＝「疲れている」という言葉の意味とは反対の評価があるため、わかりにくい。
・評価の段階数がMAX3だったり5だったりまちまち。
上記の課題・問題点から以下を選定し、今回の解決課題と決めました。
必須
・評価がひと目でわかるようにする
・カードの要素や情報の粒度をあわせる
・自分がどの画面にいるのか、現在地がわかるようにする
できればやりたい
・データ取得期間をスイッチできるようにする
・【非対応】基本情報を別画面で表示するためのユーザ詳細画面を作る
・【未対応】評価と言葉の意味をあわせる
05 | 本制作 (UI設計編)
・評価がひと目でわかるようにする
→４．レーダーチャート化②を採用
・カードの要素や情報の粒度を合わせる
→２．数値とグラフをセットで表示を採用
・自分がどの画面にいるのか、現在地がわかるようにする
→１．パンくずリストの配置を採用
・データ取得期間をスイッチできるようにする
・【非対応】基本情報を別画面で表示するためのユーザ詳細画面を作る
※メールより一部抜粋
> 一覧画面があった方が、詳細画面の情報がより理解しやすくなる、というのであれば作成頂いても大丈夫です。
→現在頂いている「ユーザー詳細画面」から基本情報欄を抜き、別で作成したいと考えています。（画面の遷移フロー的には、グラフ系の情報を外出しすると言う方が正しいかも）
理由は、「管理者がユーザーのパフォーマンス状況を把握したい」という目的から外れてしまっていると考えたためです。また、ユーザー一人ひとりに紐付く＝ユーザ詳細情報としてまとめられているのかと思われますが、
①基本情報は1on1で確認したい情報としては優先度が下がる
②ユーザー情報(メールアドレスなど)を編集する際は逆にグラフ系の情報が不要となる
上記の理由から、目的別で画面を分けるべきだと判断しました。
→結論として、基本情報は抜かない。
理由
・ 上司が部下(複数人を想定)について確認するページであるため、「誰の」情報かひと目でわかる必要がある。
・今後、チーム内での役職・役割など、パフォーマンス等の情報と同じタイミングで確認したい項目が記載される可能性がある。(これに当てはまらないメールアドレス、登録日時などの項目の削除については別途考えたほうが良さそう)
・【未対応】評価と言葉の意味をあわせる
→「疲労度高」＝「疲れている」という言葉の意味とは反対の評価があるため、わかりにくい問題について解決を考えたが、これまでの蓄積データも含め見直しが必要であること等から見合わせた。
ここまでの選択で出来上がったものが以下。
05 | 本制作 (ビジュアル編)
LPやコーポレートサイト、スマホアプリなどからブランドイメージを参考にし、ビジュアル面もブラッシュアップしていく。
→ロゴやLPから青、グラデーションを参考にし、白地であったサイドバーを青のグラデーションでカラーリングした。これにより、Nobiのブランドカラーを前面に出すことができ、更に画面全体が引き締まった印象となっている。また、スマホアプリでも同様のグラデーションとなっているため、スマホアプリとの一貫性も生まれるのではないかと考えた。
06 | 成果物
07 | 振り返り
結果として今回は残念な結果となってしまいましたが、アウトプットまでのプロセスを一つずつまとめることが意外とない(良くないと思いつつ手抜きしがち)なので、とても良い機会となりました。
また、課題の公開について快く受け入れてくださった株式会社enstem様にはとても感謝しています。今後も更にスキルアップしていきますので、いつか一緒にお仕事できればと思います！
08 | クレジット
公開年月日：2021年03月
制作期間：2週間 / 約15時間
制作環境：Figma
#ポートフォリオ #UIデザイン #デザイン
この記事が気に入ったらサポートをしてみませんか？