このアプリは、ユーザーの日常生活やキャリアをサポートすることを目的とした、iOS向けのスーパーアプリです。気分記録やメンタルヘルス管理を行う「ウェルビーイング」モジュール、AIエージェントによる求人提案を通じて転職活動を支援する「転職支援」モジュールなど、多機能を統合して提供しています。主なターゲットはベトナムを含む東南アジア圏で、将来的にはグローバル展開も想定されています。また転職支援は、IT業界のエンジニア職に絞っています。
※スーパーアプリ:複数の機能やサービス(モジュール)をひとつのモバイルアプリ内に統合したアプリ。
担当
PO:1名、
PM:1名、
PMO:1名、
UX/UIデザイナー:2名(本人含む)、
エンジニア:3名
使用ツール
Figma、Figjam、Nota、Slack
期間
2023/07 - 2024/07(1年1ヶ月)
タグ
b2c 、iOSアプリ
株式会社アトラエより受託し、フルリモートで「Minglo」のUIデザインを担当しました。プロジェクトメンバーの多くはベトナム人で、業務上の共通言語は英語でした。
すでにプロダクトコンセプトや機能要件が定められた状態から参画し、既存のコンポーネントやトーン&マナーに沿って、ウェルビーイングおよび転職支援機能のUIをFigmaで設計しました。英語UIをベースにデザインし、承認後はボタンの挙動や画面遷移などの仕様を英語で整理し、エンジニア向けの画面仕様書(Nota)として提供しました。
アプリは英語とベトナム語に対応しており、英語版のデザイン完成後、別担当者がベトナム語への翻訳を行う体制でした。
担当機能の要件をもとに、ワイヤーフレームおよびUIモックアップを作成
既存のUIコンポーネントとデザインガイドラインに沿って、各画面のUIを設計
画面遷移やボタン挙動などのUI仕様を英語でNotaにまとめ、エンジニアへ共有
※一部の画面を抜粋して掲載しています。
概要:
ウェルビーイングモジュールにログインすると、毎日の感情を記録するためのチェックイン画面が表示されます。ユーザーが自分の感情を直感的に選べるよう、色やアイコンなどの視覚的要素を活用し、プルチックの感情の輪(Plutchik’s Wheel of Emotions)や関連研究を参考に設計しました。
工夫した点:
毎日無理なく記録を続けられるよう、操作をシンプルなフローにまとめました。また、記録を習慣化しやすい親しみのある体験を意識しながら、既存のブランドトーンを維持し、視覚的な楽しさと使いやすさのバランスを図りました。
概要:
日々の感情記録が蓄積されると、その履歴をもとにスコアの推移やセンチメントの傾向を可視化し、ユーザーが自身の感情の変化を振り返ることができます。
工夫した点:
情報量が多くなりすぎないよう、グラフ、チャート、アイコンなどの視覚的要素を活用し、スコアや傾向の変化を直感的に把握できる構成としました。また、主要な指標が一目で確認できるよう、情報の優先順位と視覚的な階層を整理しました。Emotion Mappingの表現には、プルチックの感情の輪から着想を得ています。
概要:
ウェルビーイングモジュールの初回利用時に表示される、機能の使い方を案内するオンボーディング画面です。既存画面のデザインはすでに作成されていたため、私はチュートリアル部分のUI設計を担当しました。
工夫した点:
当初は複数のステップで構成されていましたが、開発工数の削減とユーザーの離脱防止を考慮し、必要な情報に絞ってステップ数を削減しました。短く分かりやすい文章とスムーズな画面遷移を意識し、ユーザーが負担なく機能を理解できるオンボーディング体験を目指しました。
概要:
転職支援モジュールで、ユーザーが希望する職種、勤務地、給与などの希望条件を登録するフローを設計しました。
工夫した点:
多国籍のユーザーを想定し、国や地域による価値観や雇用条件の違いに対応できるよう、項目内容や入力形式を検討しました。特に価値観に関わる項目については、リサーチを行うとともに、多国籍のチームメンバーから意見を集め、内容を調整しました。
概要:
ユーザーが自身の希望に合わせてAIキャリアアドバイザーのプロフィールを設定するフローと、設定内容を反映したアドバイザーのプロフィール画面を設計しました。設定後は、作成したAIキャリアアドバイザーにチャット形式でキャリアについて相談できます。
工夫した点:
設定項目が多いため、入力負荷を軽減できるよう、選択式のUIを中心に設計しました。また、大まかに示された要件から具体的な設定項目へ落とし込む際には、キャリア・アンカーやMBTIなどの既存のフレームワークを参考にリサーチを行い、項目や選択肢を検討しました。
パーソナリティ設定では、Extrovert / Introvertなどを単純な二択にせず、両者の間で度合いを設定できるスライダー形式を採用しました。
要件がテキストベースで伝えられる中、POやPMの頭の中にあるイメージを正しく汲み取る難しさを実感しました。そのため、なるべく早い段階で方向性をすり合わせることを意識し、複数パターンのローファイワイヤーフレームを作成して共有することで、認識のズレを減らし、スムーズなコミュニケーションを図りました。
また、要件ではセクションの大枠のみが示され、具体的な項目やインタラクションをデザイン側で検討する場面もありました。既存の理論やサービスをリサーチしながら情報を具体化し、要件をそのまま画面にするのではなく、ユーザーにとってどのような選択方法が分かりやすいかを考えてUIに落とし込むことの重要性を学びました。