フレーム作成

先方からいただいたベースの資料をもとに、ワイヤーを作成をしました。また、その中でも先方の要望をもとにデザインを調整しております。

色味の提案

先方のWEBサイトのカラーに調和するよう、アクアグリーンを基調とした配色でデザインを進めていく方針としました。デザインは先方と相談しながら進めており、その中で使用した色味をカラーパターンとして整理・可視化しています。

UIデザイン

カスタマージャーニーマップ作成

デザインに入る前に、まず受講者とスタッフが最初の新規登録からコース完了、その後の求人とのマッチングまでの流れをカスタマージャーニーマップにまとめました。

今回のシステムではスタッフ側が受講者の学習状況を把握、管理をしていくので、どんなフェーズで誰が関わってくるのか、ユーザーの心理などをマップにすることで、ユーザーが課題と感じている時に裏ではどんな行動をしているか、ストレスになる課題は何かを明確にすることができました。

ユーザー調査

カスタマージャーニーの観点から、今回のポイントは「学習状況の進捗・ステータスがひと目でわかること」が重要であると判断しました。そこでさまざまな表現方法について調査しました。

タスク管理アプリ、ECサイトの管理画面から、視点を変えて、カラオケの採点の分析画面や歩数計のような画面など、進捗情報やステータスに関わるUIを調査しました。

デザインのご提案

カスタマージャーニーを参考にデザインの骨子となるワイヤーフレームを作成していきます。ログイン画面からダッシュボード、ユーザー管理画面などさまざまなフェーズでどんな画面が必要かをまとめたものです。

このワイヤーフレームをベースにデザインを作っていきます。
ここで「学習状況の進捗・ステータスがひと目でわかること」という今回の１番のポイントについて。
クライアント様へのヒアリングや調査の結果、「進捗度を数字と歩数メーターのようなグラフィックで表現」「全体のステータスについてはグラフで表現」することにしました。

↑のようなワイヤーフレームをご提案させていただきました。

この他にもスタッフ側の管理画面は受講者の進捗が一覧で見えることに加え、講座の完了具合も数値化し、比較しやすくなっているのがポイントです。

実際にデザインしていく

ブランドのメインカラーであるオレンジをベースにどんなイメージを持たせたいかを参考デザインをもとに言語化していきました。

今回manaby様の「一人ひとりが自分らしく働ける社会をつくる」という企業ミッションから個性を大切にすること、また困っている方に寄り添う優しさの印象から、シンプルかつ優しいオレンジ、ベージュ系、丸みのあるシェイプを使用していくことに決定しました。

デザイン完成

そして完成したUIデザインがこちら。

進捗状況を数値やグラフにすることで、自分がどれくらい頑張ってきたのかが見える化され、講座を進めるのが楽しくなるようなデザインになりました。

お客様からも、グラフ化された部分が非常にわかりやすく、社内の方にも好評という声をいただいております。

現状アプリケーションの調査

エンジニア主導で開発が進められており、既存のワイヤーフレーム等はない状況だったため、まずは現状を整理し、最新のワイヤーフレームを一から作成するところから着手しました。

現状のワイヤーフレームに対して、要望やご意見を付箋のように整理・可視化し、現状の課題を明確にしました。また、今後のご要望についてもリストアップを行い、項目ごとに必要な要素をすべて洗い出した上で、現在の状況を踏まえた検討を進めました。

カスタマージャーニーマップの作成

アプリのユースケースを整理しながら、ユーザーがどのような体験の流れをたどるのかを明確化し、UX全体の構造を再整理しました。

ユーザーの行動フローを洗い出し、それに連動する感情の動きも可視化しました。あわせて、各フェーズにおいて必要となる機能のアイデア出しも行いました。

上段のフレームでは、ユーザー体験の各フェーズにおいて、どこが感情を高めているのかを分析しています。下段では、その分析に基づき、ユーザーの感情に連動した機能や、それを反映したワイヤーフレームの提案を行っています。

類似サービスであるメモアプリやコミュニケーションツールのUIについても調査を行い、それぞれの特徴的な要素を洗い出しました。

ワイヤーフレームの提案

↑最終的に提案させていただいた新しいアプリのワイヤーフレーム

ユーザー体験の流れを第一に考え、課題に対する解決策が直感的に伝わる構造になるよう設計しております。また、関係者全員が共通認識を持てるよう、視覚的にもわかりやすいアウトプットを心がけています。

↑同じようにWEB版のワイヤーフレームも合わせて提案させていただきました。

現状と提案の比較

↑左が依頼いただいたときの状況、右が提案後のイメージ
具体的な提案内容としては、チャット機能をSlackのように現場の状況を詳細にやり取りできる形式に変更しました。また、現場写真や関連資料のまとめ、案件内容の閲覧も、より見やすく直感的に把握できるよう改善しています。さらに、現地調査時に使用する「調査モード」への切り替えボタンも、よりわかりやすい位置とデザインに見直しました。

現行の画面では、案件を作成してプロジェクトを立ち上げた後にメモを入力するフローとなっていました。これに対し、今回の提案では、まず「調査モード」に切り替えて一時的に写真やメモをまとめて記録し、その後にプロジェクトごとに整理・分類する流れを設計。これにより、現場での入力作業の効率化を図る提案を行いました。

一連のプロセスを通じて、サービスの現状を可視化し、ユーザー視点での体験価値の向上と、それに伴う機能設計の方向性を明確化しました。今後のスケールや資金調達を見据えた、より実現性の高いプロダクト開発に向けた土台づくりを支援させていただきました。