ウィングのデザインワークス

WING.

Select Language

日本語

PRMIS Administration System.

役割

ユーザーリサーチ / UXUIデザイン / プロトタイピング

使用ツール

Figma / Figjam

ターゲット

(外部ユーザー) オペレーター / サプライヤー / 指定返品ポイント

(内部ユーザー) 香港環境保護署の管理者 / 職員

目的

ユーザーが申請や提出物を提出し、登録中または登録後の情報を変更し、製造者責任計画の承認などを行うための、安全でユーザーフレンドリーなオンラインポータルを提供します。システムは、EPDユーザーから受け取った申請や提出物の内部処理を、体系的で安全、信頼性が高く、効率的かつ便利に行えるよう設計されています。

制作期間

2024年5月 - 2024年9月

Information Architecture.

システム構造

公開ページ（外部ユーザー向け）

・ログイン / 新規登録

・申請ガイドライン

申請者ダッシュボード（外部ユーザー向け）

・ダッシュボード概要

・新規申請の開始

・申請状況

管理者パネル（内部ユーザー向け）

・ダッシュボード概要

・申請管理

・審査・承認ワークフロー

・ユーザー管理

ユーザー役割と主なアクション

申請者向け機能

・新規申請の提出

・必要書類のアップロード

・申請状況の確認

・プロフィール設定の管理

・通知や更新情報の受信

管理者向け機能

・提出された申請の確認

・承認、却下、修正依頼

・申請者アカウントの管理

・レポートや分析の生成

・システム設定

審査者向け機能

・申請内容の評価

・コメントやフィードバックの提供

アプリケーション提出フロー

新規申請

・登録タイプと申請タイプを選択

詳細入力・書類アップロード

・必須項目を入力

・必要書類をアップロード

確認・承認

・提出前に入力内容を確認

提出・追跡

・確認通知を受け取り、申請状況を確認

システム設定

ユーザーと権限

・ユーザー管理

・役割管理

・セキュリティグループ

・代理ポスト

システムコード

・メタデータ

・システムパラメータ

メール設定

ナビゲーション & ラベリング

ナビゲーション

・システムタイプ

・ダッシュボード

・通知

・システム設定

・レポート

・点検

・言語

トースト & ポップアップ通知

・複数ステップの操作をユーザーに案内

アクセシビリティ・モバイル対応

レスポンシブデザイン

・モバイル・デスクトップ向けに最適化

エラーハンドリング

・ユーザーにわかりやすいバリデーションメッセージ

Application Review & Approval Workflow.

システムはオンライン提出とオフライン処理の両方に対応しています。登録タイプ、ユーザーの役割、特定の状況に応じて異なるワークフローを実装し、スムーズで効率的な申請プロセスを実現しています。

↓ フロー図

Ideation & Prototyping.

概要 - 数回のクリックで、紙ベースのプロセスからシームレスなオンライン体験への移行。

香港政府のシステムは明確さと効率性が重視されています。本プロジェクトでは、複雑な訴訟手続きを簡素化する、包括的で使いやすいプラットフォームの設計に取り組みました。本システムにより、ユーザーは申請を簡単に提出・追跡でき、政府職員は複雑な提出物や案件を効率的に管理できます。デザインは、使いやすさ、効率的なワークフロー、アクセシビリティを重視し、すべてのユーザーにスムーズな体験を提供します。

ダッシュボード

ダッシュボードは、外部ユーザー向けと内部ユーザー向けの2つのセクションに分かれています。

外部ユーザー向け

このセクションでは、ユーザーが自身の提出状況を包括的に確認でき、申請の提出や追跡がスムーズに行えます。

内部ユーザー向け

政府職員向けに設計されたこのセクションでは、すべての申請と承認状況を一目で確認できます。テーブルデザインや高度なフィルタリング機能の最適化に注力し、必要な情報を迅速に見つけられるようにしています。

↓ 外部ユーザーサイド

↓ 内部ユーザーサイド

申請フォーム

紙の申請書をオンライン化するにあたり、まず各申請書を詳細に分析し、正確性と完全性を確認しました。デザインは明確さと使いやすさを重視し、複雑な紙ベースのプロセスを直感的でユーザーフレンドリーなオンライン体験へと変換しています。

システム設定

システム設定には、ユーザーと権限管理、システムコード、メール設定が含まれます。ユーザー権限やシステムコードの構造を分析したうえで、組織管理者向けに直感的で使いやすいインターフェースを提供することを目指しました。ユーザー管理画面では、ユーザーの役割や権限を詳細に制御でき、明確かつ効率的な管理を可能にしています。

システムコードに関しては、メタデータやシステムパラメータの再構築と明確化が求められました。レイヤーの複雑さや大量のデータを考慮し、時系列カードビューとカスタマイズ可能なテーブル形式を設計。ユーザーが効率的にメタデータを確認・編集できるようにし、システムパラメータの管理プロセスを簡略化しました。

↓ システム設定図

Design System.

包括的なデザインシステムを構築するために、ボタン、フォーム、モジュール、セクションなど幅広い要素を網羅した詳細なウェブスタイルガイドを作成しました。各コンポーネントは、プラットフォーム全体で一貫性を保つよう慎重に定義され、デフォルト、ホバー、アクティブ、無効など、必要なすべての状態を考慮してスムーズなユーザー体験を実現しています。このアプローチにより、すべてのデザイン要素が統一され、柔軟性があり、システム全体で容易に実装できるようになっています。

Challenges.

このプロジェクトは、管理者パネルを含む新しいシステムをゼロから設計した初めての経験でした。明確で使いやすいオンライン申請システムを構築するために、リサーチ、ユーザーインタビュー、ユーザビリティテストを実施し、デザインが安全で信頼性が高く、操作しやすいものになるよう努めました。

もうひとつの重要な課題は、システム設定の再構築でした。開発者と密に連携することで、メタデータやパラメータの仕組みを深く理解しました。複数のデザイン案を検討した上で、最も効果的なソリューションを実装しました。

→ 他の作品を見る

↑

WING.

Select Language

WING.

Select Language

PRMIS Administration System.

役割

ユーザーリサーチ / UXUIデザイン / プロトタイピング

使用ツール

Figma / Figjam

ターゲット

(外部ユーザー) オペレーター / サプライヤー / 指定返品ポイント

(内部ユーザー) 管理者 / 香港環境保護署の職員

目的

制作期間

2024年5月 - 2024年9月

Information Architecture.

-

システム構造

公開ページ（外部ユーザー向け）

・ログイン / 新規登録

・申請ガイドライン

申請者ダッシュボード（外部ユーザー向け）

・ダッシュボード概要

・新規申請の開始

・申請状況

管理者パネル（内部ユーザー向け）

・ダッシュボード概要

・申請管理

・審査・承認ワークフロー

・ユーザー管理

ユーザー役割と主なアクション

申請者向け機能

・新規申請の提出

・必要書類のアップロード

・申請状況の確認

・プロフィール設定の管理

・通知や更新情報の受信

管理者向け機能

・提出された申請の確認

・承認、却下、修正依頼

・申請者アカウントの管理

・レポートや分析の生成

・システム設定

審査者向け機能

・申請内容の評価

・コメントやフィードバックの提供

アプリケーション提出フロー

新規申請

・登録タイプと申請タイプを選択

詳細入力・書類アップロード

・必須項目を入力

・必要書類をアップロード

確認・承認

・提出前に入力内容を確認

提出・追跡

・確認通知を受け取り、申請状況を確認

システム設定

ユーザーと権限

・ユーザー管理

・役割管理

・セキュリティグループ

・代理ポスト

システムコード

・メタデータ

・システムパラメータ

メール設定

ナビゲーション & ラベリング

ナビゲーション

・システムタイプ

・ダッシュボード

・通知

・システム設定

・レポート

・点検

・言語

トースト & ポップアップ通知

・複数ステップの操作をユーザーに案内

アクセシビリティ・モバイル対応

レスポンシブデザイン

・モバイル・デスクトップ向けに最適化

エラーハンドリング

・ユーザーにわかりやすいバリデーションメッセージ

Information Architecture.

-

システム構造

公開ページ（外部ユーザー向け）

・ログイン / 新規登録

・申請ガイドライン

申請者ダッシュボード（外部ユーザー向け）

・ダッシュボード概要

・新規申請の開始

・申請状況

管理者パネル（内部ユーザー向け）

・ダッシュボード概要

・申請管理

・審査・承認ワークフロー

・ユーザー管理

ユーザー役割と主なアクション

申請者向け機能

・新規申請の提出

・必要書類のアップロード

・申請状況の確認

・プロフィール設定の管理

・通知や更新情報の受信

管理者向け機能

・提出された申請の確認

・承認、却下、修正依頼

・申請者アカウントの管理

・レポートや分析の生成

・システム設定

審査者向け機能

・申請内容の評価

・コメントやフィードバックの提供

アプリケーション提出フロー

新規申請

・登録タイプと申請タイプを選択

詳細入力・書類アップロード

・必須項目を入力

・必要書類をアップロード

確認・承認

・提出前に入力内容を確認

提出・追跡

・確認通知を受け取り、申請状況を確認

システム設定

ユーザーと権限

・ユーザー管理

・役割管理

・セキュリティグループ

・代理ポスト

システムコード

・メタデータ

・システムパラメータ

メール設定

ナビゲーション & ラベリング

ナビゲーション

・システムタイプ

・ダッシュボード

・通知

・システム設定

・レポート

・点検

・言語

トースト & ポップアップ通知

・複数ステップの操作をユーザーに案内

アクセシビリティ・モバイル対応

レスポンシブデザイン

・モバイル・デスクトップ向けに最適化

エラーハンドリング

・ユーザーにわかりやすいバリデーションメッセージ

Application Review & Approval Workflow.

-

↓ フロー図

Application Review & Approval Workflow.

-

↓ フロー図

Ideation & Prototyping.

-

概要

数回のクリックで、紙ベースのプロセスからシームレスなオンライン体験への移行。

ダッシュボード

ダッシュボードは、外部ユーザー向けと内部ユーザー向けの2つのセクションに分かれています。

外部ユーザー向け

このセクションでは、ユーザーが自身の提出状況を包括的に確認でき、申請の提出や追跡がスムーズに行えます。

内部ユーザー向け

↓ 外部ユーザーサイド

↓ 内部ユーザーサイド

申請フォーム

システム設定

システム設定には、ユーザーと権限管理、システムコード、メール設定が含まれます。ユーザー権限やシステムコードの構造を分析したうえで、組織管理者向けに直感的で使いやすいインターフェースを提供することを目指しました。ユーザー管理画面では、ユーザーの役割や権限を詳細に制御でき、明確かつ効率的な管理を可能にしています。