WING.
Hong Kong Building Condition
Online Application System
役割
ユーザーリサーチ / UXUIデザイン / プロトタイピング
使用ツール
Figma
ターゲット
(外部ユーザー) 物件所有者 / 建設専門家 / 建設請負業者など。
(内部ユーザー) 香港建築部門の管理者 / 職員 / エンジニアなど。
目的
紙の使用を最小限に抑え、手作業のワークフローを効率化するため、対象ユーザー向けに オンライン申請システム を設計することが求められました。ユーザーは申請書の提出、提出状況の確認、関連プロセスの管理を行うことができます。
制作期間
2024年6月 - 2024年8月
user experience enhancement.
開発者と連携し、システムは申請処理の効率化、ユーザー情報の管理、ワークフローの簡略化を実現するよう設計されました。私は、コンテンツの構造化に注力し、明確さの向上、スムーズなナビゲーション、直感的なユーザー体験を提供しました。
公開向けページからユーザーダッシュボードまで、システムは各ステップをユーザーが迷わず進めるよう整理されています。直感的なナビゲーション、明確なラベル付け、モバイル対応 により、ユーザーフレンドリーな体験を提供しつつ、申請処理の最適化を実現しています。
UI Design & Accessibility.
香港建築署に合わせて、青系のカラースキーム を主体に使用し、信頼性、専門性、権威性を表現しました。視認性と強調を高めるため、明るいオレンジ を補色として取り入れ、ボタンや重要情報が際立つようにしました。
美しさとアクセシビリティのバランスを取ることが課題でした。カラーバランス、代替テキスト、エラーハンドリングを慎重に調整し、WCAG準拠 を満たしつつ、視覚的に統一感のあるデザインを維持しました。
↓ ムードボード
↓ 色とフォントのガイドライン（オプション１）
↓ 色とフォントのガイドライン（オプション2）
Challenges.
このプロジェクトを始める前、私は香港の建築業界についての知識が限られていました。オンライン申請システムの設計経験はありましたが、申請書の複雑さ、提出手続き、法的用語の多さにより、要件を完全に理解することは容易ではありませんでした。
さらに、対象ユーザーである専門のエンジニアやコンサルタントは高度に専門的なニーズを持っていました。業界を深く理解していなければ、正確なユーザーペルソナを作成することは特に困難でした。
Hong Kong Building Condition
Online Application System
役割
ユーザーリサーチ / UXUIデザイン / プロトタイピング
使用ツール
Figma
ターゲット
(外部ユーザー) 物件所有者 / 建設専門家 / 建設請負業者など。
(内部ユーザー) 香港建築部門の管理者 / 職員 / エンジニアなど。
目的
紙の使用を最小限に抑え、手作業のワークフローを効率化するため、対象ユーザー向けに オンライン申請システム を設計することが求められました。ユーザーは申請書の提出、提出状況の確認、関連プロセスの管理を行うことができます。
制作期間
2024年6月 - 2024年8月
user experience enhancement.
-
開発者と連携し、システムは申請処理の効率化、ユーザー情報の管理、ワークフローの簡略化を実現するよう設計されました。私は、コンテンツの構造化に注力し、明確さの向上、スムーズなナビゲーション、直感的なユーザー体験を提供しました。
公開向けページからユーザーダッシュボードまで、システムは各ステップをユーザーが迷わず進めるよう整理されています。直感的なナビゲーション、明確なラベル付け、モバイル対応 により、ユーザーフレンドリーな体験を提供しつつ、申請処理の最適化を実現しています。
user experience enhancement.
-
開発者と連携し、システムは申請処理の効率化、ユーザー情報の管理、ワークフローの簡略化を実現するよう設計されました。私は、コンテンツの構造化に注力し、明確さの向上、スムーズなナビゲーション、直感的なユーザー体験を提供しました。
公開向けページからユーザーダッシュボードまで、システムは各ステップをユーザーが迷わず進めるよう整理されています。直感的なナビゲーション、明確なラベル付け、モバイル対応 により、ユーザーフレンドリーな体験を提供しつつ、申請処理の最適化を実現しています。
UI Design & Accessibility.
-
香港建築署に合わせて、青系のカラースキーム を主体に使用し、信頼性、専門性、権威性を表現しました。視認性と強調を高めるため、明るいオレンジ を補色として取り入れ、ボタンや重要情報が際立つようにしました。
美しさとアクセシビリティのバランスを取ることが課題でした。カラーバランス、代替テキスト、エラーハンドリングを慎重に調整し、WCAG準拠 を満たしつつ、視覚的に統一感のあるデザインを維持しました。
↓ ムードボード
↓ 色とフォントのガイドライン（オプション１）
↓ 色とフォントのガイドライン（オプション2）
UI Design & Accessibility.
-
香港建築署に合わせて、青系のカラースキーム を主体に使用し、信頼性、専門性、権威性を表現しました。視認性と強調を高めるため、明るいオレンジ を補色として取り入れ、ボタンや重要情報が際立つようにしました。
美しさとアクセシビリティのバランスを取ることが課題でした。カラーバランス、代替テキスト、エラーハンドリングを慎重に調整し、WCAG準拠 を満たしつつ、視覚的に統一感のあるデザインを維持しました。
↓ ムードボード
↓ 色とフォントのガイドライン（オプション１）
↓ 色とフォントのガイドライン（オプション2）
Challenges.
-
このプロジェクトを始める前、私は香港の建築業界についての知識が限られていました。オンライン申請システムの設計経験はありましたが、申請書の複雑さ、提出手続き、法的用語の多さにより、要件を完全に理解することは容易ではありませんでした。
さらに、対象ユーザーである専門のエンジニアやコンサルタントは高度に専門的なニーズを持っていました。業界を深く理解していなければ、正確なユーザーペルソナを作成することは特に困難でした。
Challenges.
-
このプロジェクトを始める前、私は香港の建築業界についての知識が限られていました。オンライン申請システムの設計経験はありましたが、申請書の複雑さ、提出手続き、法的用語の多さにより、要件を完全に理解することは容易ではありませんでした。
さらに、対象ユーザーである専門のエンジニアやコンサルタントは高度に専門的なニーズを持っていました。業界を深く理解していなければ、正確なユーザーペルソナを作成することは特に困難でした。