公益社団法人日本看護協会 資格取得者向け管理システムリニューアル(2020)

情報設計からUIデザインまで対応した管理システムデザイン

2020

担当:情報設計/アートディレクション/デザイン 工数:1人月

看護師や保健師など、看護職の資格を持つ方が加入されている日本看護協会。 当時の私は機能的なデザイン力も社内で評価されているものの、大規模サイトデザインの実績ばかりという状態でした。そのころ指名案件と部門マネジメントが中心であったものの、時間を作ってデザインを担当させてもらい、その協会が実施している資格認定の審査・更新などができるシステムのUIデザインを担当しました。

情報設計からUIデザインまで対応した管理システムデザイン

アプローチ

所属会社では、各画面の情報設計にIAが関わりワイヤーフレームを作成するのが通常でした。しかし、設計フェーズでの検証回数が少なく、デザインフェーズで設計まで遡って修正することが度々あることに課題を感じていました。そこで今回はIAの方に相談し、上流部分である「ターゲットユーザー可視化とペルソナ作成」に特化してもらい、その内容を拠り所に「画面設計から最終デザイン」まで一気通貫で対応する役割分担にさせてもらいました。

どのような装飾にするかある程度考慮しながら、プロトタイプの検証回数を増やすことを意識して作成しました。ユーザーテストは予算の都合で実施できなかったため、ペルソナを基に社内メンバーに試してもらい、検証を重ねました。一気通貫でデザイン側が可視化することで最終形に近い状態で検証を重ねることができ、不要な後戻りがないことで結果的に工数を圧縮することができました。

設計からデザインまでの一気通貫で、最終形に近い状態で検証を重ねたデザイン

システム側をゼロから改修するわけではなく、現行システムをある程度踏襲しなければならない状況を踏まえながら、ボタンの押しやすさや情報の判別のしやすさなどをプロトタイプで検証していきました。

ログイン画面

ログイン画面

ログイン後のメニュー画面

ログイン後のメニュー画面

申請メニュー画面

申請メニュー画面

申請状況確認画面

申請状況確認画面
ログイン後のメニュー画面(モバイル)申請メニュー画面(モバイル)申請状況確認画面(モバイル)

個人情報編集画面 1/3(入力フォーム画面)

個人情報編集画面 1/3

個人情報編集画面 2/3(入力情報確認画面)

個人情報編集画面 2/3

個人情報編集画面 3/3(入力完了画面)

個人情報編集画面 3/3

システムを踏まえ体系化したデザインルールとモジュールデザイン

日本看護協会の世界観を定義することは今までのデザインコンセプト策定の経験が活きました。「理念」などのインプットから仮説ベースで一気に定義し、最小限の工数で固めました。また、システム化を踏まえ、挙動に対するルールや各デバイスの展開がどのようになるのか全体像が見える形でデザインを制作。実装時の後戻りが最小限になるよう、先手の意識で対応していきました。

デザインの方向性資料

デザインの方向性資料 1デザインの方向性資料 2デザインの方向性資料 3デザインの方向性資料 4

デザインルール

デザインルール

各デバイス幅に対する展開パターン(入力フォーム)

入力フォーム 1入力フォーム 2入力フォーム 3入力フォーム 4入力フォーム 5

各デバイス幅に対する展開パターン(表組み)

表組み 1表組み 2表組み 3表組み 4