WING.
PRMIS Administration System.
Responsibility
User Research / UXUI Design / Prototyping
Design Tools
Figma / Figjam
Target User
(External User) Operators / Suppliers / Designated Return Point
(Internal User) Admin / Officers of Hong Kong Environmental Protection Department
Purpose
To provide a secure and user-friendly online portal for the user to submit applications and submissions, change of information during/after registration, endorsement of producer responsibility plan, etc. The System shall internal processing of the applications and submissions received by EPD users in a systematic, secure, reliable, efficient and convenient manner.
Design Period
May 2024 - Sep 2024
Information Architecture.
System Structure
Public-Facing Pages (For External User)
・Login or Sign up
・Application guideline
Applicant Dashboard (For External User)
・Dashboard overview
・Start New application
・Application status
Admin Panel (For Internal User)
・Dashboard overview
・Application management
・Review & approval workflow
・User management
User Roles & Primary Actions
Applications
・Submit New applications
・Upload required documents
・Track application status
・Manage profile settings
・Receive notifications and updates
Administrations
・Review submitted applications
・Approve, reject, or request revisions
・Manage applicant accounts
・Generate reports and analytics
・System settings
Reviewers
・Assess applications
・Provide comments and feedback
Application Submission Flow
New Application
・Select registration type and application type
Fill in Details & Upload Attachements
・Complete required fields
・Upload required documents
Review & Confirm
・Check for errors before submitting
Submit & Track
・Receive confirmation & monitor status
System Setting
User & Permission
・User management
・Role management
・Security Group
・Acting Post
System Code
・Metadata
・System Parameter
Email Settings
Navigation & Labeling
Navigations
・System Type
・Dashboard
・Notifications
・System Settings
・Reports
・Inspection
・Languages
Toast & Pop-up Notifications
・Guides users through multi-step processes
Accessibility & Mobile Considerations
Responsive Design
・Optimized for mobile & desktop
Error Handling
・User-friendly validation messages
Application Review & Approval Workflow.
The system supports both online submissions and offline processing. Depending on the registration type, user roles, and specific scenarios, different workflows are implemented to ensure a seamless and efficient application process.
↓ Approval Workflow Diagram
Ideation & Prototyping.
Overview - Transitioning from paper-based processes to a seamless online experience in just a few clicks.
Hong Kong government systems prioritize clarity and efficiency. This project challenged me to design a comprehensive, user-friendly platform that simplifies complex litigation procedures. The system enhances efficiency by allowing users to submit and track applications effortlessly, while empowering government officers to manage complex submissions and cases effectively. The design emphasizes usability, streamlined workflows, and accessibility to ensure a smooth experience for all users.
Dashboard
The dashboard is divided into two distinct sections: External User Side and Internal User Side.
• External User Side:
This section provides users with a comprehensive overview of their submissions, allowing them to track and submit applications with ease.
• Internal User Side:
Designed for government officers, this section offers a complete view of all applications and their approval statuses. I focused on optimising table design and advanced filtering capabilities to ensure that offices can quickly locate the information they need.
↓ External User Side
↓ Internal User Side
Application Form
To transform the paper application form into an online application, I first analyzed the details of each form to ensure accuracy and completeness. The design focuses on clarity and usability, transforming complex paper-based processes into an intuitive and user-friendly online format.
System Settings
System settings include User and Permission Management, as well as System Code and Email Settings. After analyzing the structure of user permissions and system codes, my goal was to provide an intuitive, easy-to-use interface for organizational admins. The User Management interface offers detailed control over user roles and permissions, ensuring clear and efficient management.
For System Code, I was tasked with restructuring and clarifying metadata and system parameters. Given the complexity of layers and large data sets, I designed a chronological card view and a customizable table format that allows users to efficiently view and edit metadata, streamlining the process of managing system parameters.
↓ Diagram of System Settings
Design System.
To develop a comprehensive design system, I created a detailed web style guide that covers a wide range of elements, including buttons, forms, modules, and sections. Each component was carefully defined to ensure consistency across the platform, and I included all necessary states (such as default, hover, active, and disabled) for a seamless user experience. This approach ensures that all design elements are cohesive, adaptable, and easy to implement across the entire system.
Challenges.
This project was my first experience designing a completely new system, including an Admin panel. To create a clear and user-friendly online application system, I conducted research, user interviews, and usability testing to ensure the design was secure, reliable, and easy to navigate.
Another key challenge involved restructuring the system settings. By collaborating closely with developers, I gained a deep understanding of how metadata and parameters function. I explored multiple design options and, after thorough evaluation, implemented the most effective solution.
PRMIS Administration System.
Responsibility
User Research / UXUI Design / Prototyping
Design Tools
Figma / Figjam
Target User
(External User) Operators / Suppliers / Designated Return Point
(Internal User) Admin / Officers of Hong Kong Environmental Protection Department
Purpose
To provide a secure and user-friendly online portal for the user to submit applications and submissions, change of information during/after registration, endorsement of producer responsibility plan, etc. The System shall internal processing of the applications and submissions received by EPD users in a systematic, secure, reliable, efficient and convenient manner.
Design Period
May 2024 - Sep 2024
Information Architecture.
-
System Structure
Public-Facing Pages (For External User)
・Login or Sign up
・Application guideline
Applicant Dashboard (For External User)
・Dashboard overview
・Start New application
・Application status
Admin Panel (For Internal User)
・Dashboard overview
・Application management
・Review & approval workflow
・User management
User Roles & Primary Actions
Applications
・Submit New applications
・Upload required documents
・Track application status
・Manage profile settings
・Receive notifications and updates
Administrations
・Review submitted applications
・Approve, reject, or request revisions
・Manage applicant accounts
・Generate reports and analytics
・System settings
Reviewers
・Assess applications
・Provide comments and feedback
Application Submission Flow
New Application
・Select registration type and application type
Fill in Details & Upload Attachements
・Complete required fields
・Upload required documents
Review & Confirm
・Check for errors before submitting
Submit & Track
・Receive confirmation & monitor status
System Setting
User & Permission
・User management
・Role management
・Security Group
・Acting Post
System Code
・Metadata
・System Parameter
Email Settings
Navigation & Labeling
Navigations
・System Type
・Dashboard
・Notifications
・System Settings
・Reports
・Inspection
・Languages
Toast & Pop-up Notifications
・Guides users through multi-step processes
Accessibility & Mobile Considerations
Responsive Design
・Optimized for mobile & desktop
Error Handling
・User-friendly validation messages
Information Architecture.
-
System Structure
Public-Facing Pages (For External User)
・Login or Sign up
・Application guideline
Applicant Dashboard (For External User)
・Dashboard overview
・Start New application
・Application status
Admin Panel (For Internal User)
・Dashboard overview
・Application management
・Review & approval workflow
・User management
User Roles & Primary Actions
Applications
・Submit New applications
・Upload required documents
・Track application status
・Manage profile settings
・Receive notifications and updates
Administrations
・Review submitted applications
・Approve, reject, or request revisions
・Manage applicant accounts
・Generate reports and analytics
・System settings
Reviewers
・Assess applications
・Provide comments and feedback
Application Submission Flow
New Application
・Select registration type and application type
Fill in Details & Upload Attachements
・Complete required fields
・Upload required documents
Review & Confirm
・Check for errors before submitting
Submit & Track
・Receive confirmation & monitor status
System Setting
User & Permission
・User management
・Role management
・Security Group
・Acting Post
System Code
・Metadata
・System Parameter
Email Settings
Navigation & Labeling
Navigations
・System Type
・Dashboard
・Notifications
・System Settings
・Reports
・Inspection
・Languages
Toast & Pop-up Notifications
・Guides users through multi-step processes
Accessibility & Mobile Considerations
Responsive Design
・Optimized for mobile & desktop
Error Handling
・User-friendly validation messages
Application Review & Approval Workflow.
-
The system supports both online submissions and offline processing. Depending on the registration type, user roles, and specific scenarios, different workflows are implemented to ensure a seamless and efficient application process.
↓ Approval Workflow Diagram
Application Review & Approval Workflow.
-
The system supports both online submissions and offline processing. Depending on the registration type, user roles, and specific scenarios, different workflows are implemented to ensure a seamless and efficient application process.
↓ Approval Workflow Diagram
Ideation & Prototyping.
-
Overview
Transitioning from paper-based processes to a seamless online experience in just a few clicks.
Hong Kong government systems prioritize clarity and efficiency. This project challenged me to design a comprehensive, user-friendly platform that simplifies complex litigation procedures. The system enhances efficiency by allowing users to submit and track applications effortlessly, while empowering government officers to manage complex submissions and cases effectively. The design emphasizes usability, streamlined workflows, and accessibility to ensure a smooth experience for all users.
Dashboard
The dashboard is divided into two distinct sections: External User Side and Internal User Side.
• External User Side:
This section provides users with a comprehensive overview of their submissions, allowing them to track and submit applications with ease.
• Internal User Side:
Designed for government officers, this section offers a complete view of all applications and their approval statuses. I focused on optimising table design and advanced filtering capabilities to ensure that offices can quickly locate the information they need.
↓ External User Side
↓ Internal User Side
Application Form
To transform the paper application form into an online application, I first analyzed the details of each form to ensure accuracy and completeness. The design focuses on clarity and usability, transforming complex paper-based processes into an intuitive and user-friendly online format.
System Settings
System settings include User and Permission Management, as well as System Code and Email Settings. After analyzing the structure of user permissions and system codes, my goal was to provide an intuitive, easy-to-use interface for organizational admins. The User Management interface offers detailed control over user roles and permissions, ensuring clear and efficient management.
For System Code, I was tasked with restructuring and clarifying metadata and system parameters. Given the complexity of layers and large data sets, I designed a chronological card view and a customizable table format that allows users to efficiently view and edit metadata, streamlining the process of managing system parameters.
↓ Diagram of System Settings
Ideation & Prototyping.
-
Overview
Transitioning from paper-based processes to a seamless online experience in just a few clicks.
Hong Kong government systems prioritize clarity and efficiency. This project challenged me to design a comprehensive, user-friendly platform that simplifies complex litigation procedures. The system enhances efficiency by allowing users to submit and track applications effortlessly, while empowering government officers to manage complex submissions and cases effectively. The design emphasizes usability, streamlined workflows, and accessibility to ensure a smooth experience for all users.
Dashboard
The dashboard is divided into two distinct sections: External User Side and Internal User Side.
• External User Side:
This section provides users with a comprehensive overview of their submissions, allowing them to track and submit applications with ease.
• Internal User Side:
Designed for government officers, this section offers a complete view of all applications and their approval statuses. I focused on optimising table design and advanced filtering capabilities to ensure that offices can quickly locate the information they need.
↓ External User Side
↓ Internal User Side
Application Form
To transform the paper application form into an online application, I first analyzed the details of each form to ensure accuracy and completeness. The design focuses on clarity and usability, transforming complex paper-based processes into an intuitive and user-friendly online format.
System Settings
System settings include User and Permission Management, as well as System Code and Email Settings. After analyzing the structure of user permissions and system codes, my goal was to provide an intuitive, easy-to-use interface for organizational admins. The User Management interface offers detailed control over user roles and permissions, ensuring clear and efficient management.
For System Code, I was tasked with restructuring and clarifying metadata and system parameters. Given the complexity of layers and large data sets, I designed a chronological card view and a customizable table format that allows users to efficiently view and edit metadata, streamlining the process of managing system parameters.
↓ Diagram of System Settings
Design System.
-
To develop a comprehensive design system, I created a detailed web style guide that covers a wide range of elements, including buttons, forms, modules, and sections. Each component was carefully defined to ensure consistency across the platform, and I included all necessary states (such as default, hover, active, and disabled) for a seamless user experience. This approach ensures that all design elements are cohesive, adaptable, and easy to implement across the entire system.
Design System.
-
To develop a comprehensive design system, I created a detailed web style guide that covers a wide range of elements, including buttons, forms, modules, and sections. Each component was carefully defined to ensure consistency across the platform, and I included all necessary states (such as default, hover, active, and disabled) for a seamless user experience. This approach ensures that all design elements are cohesive, adaptable, and easy to implement across the entire system.
Challenges.
-
This project was my first experience designing a completely new system, including an Admin panel. To create a clear and user-friendly online application system, I conducted research, user interviews, and usability testing to ensure the design was secure, reliable, and easy to navigate.
Another key challenge involved restructuring the system settings. By collaborating closely with developers, I gained a deep understanding of how metadata and parameters function. I explored multiple design options and, after thorough evaluation, implemented the most effective solution.
Challenges.
-
This project was my first experience designing a completely new system, including an Admin panel. To create a clear and user-friendly online application system, I conducted research, user interviews, and usability testing to ensure the design was secure, reliable, and easy to navigate.
Another key challenge involved restructuring the system settings. By collaborating closely with developers, I gained a deep understanding of how metadata and parameters function. I explored multiple design options and, after thorough evaluation, implemented the most effective solution.