WING.
Hong Kong Building Condition
Online Application System
Responsibility
User Research / UXUI Design / Prototyping
Design Tools
Figma
Target User
(External User) Property Owners / Building Professional / Building Contractors etc.
(Internal User) Admin / Officers / Engineers of Hong Kong Building Department etc.
Purpose
To minimise paper usage and streamline manual workflows, we are tasked with designing an online application system for related target to plan submissions, review status of submissions and related processes.
Design Period
Jun 2024 - Aug 2024
user experience enhancement.
In collaboration with developers, the system is designed to efficiently process applications, manage user information, and streamline workflows. I focused on structuring content to enhance clarity, ensure seamless navigation, and provide an intuitive user experience.
From public-facing sections to user dashboards, the system is organized to guide users effortlessly through each step. With intuitive navigation, clear labeling, and mobile accessibility, this structured approach delivers a user-friendly experience while optimizing application processing.
UI Design & Accessibility.
In alignment with the Hong Kong Building Department, I primarily use a blue-toned colour scheme to create a trustworthy, professional, and authoritative feel. To enhance visibility and emphasis, I incorporate bright orange as a complementary colour, ensuring buttons and key information stand out.
Balancing aesthetics with accessibility was a challenge, as I carefully adjusted the colour combinations, alt text and error handling to meet WCAG compliance and maintain a visually cohesive design.
↓ The Moodboard
↓ Colours & Fonts Guideline (Option 1)
↓ Colours & Fonts Guideline (Option 2)
Challenges.
Before starting this project, I had limited knowledge of the Hong Kong building industry. Although I had experience designing online application systems, the complexity of application forms, submission procedures, and legal terms made it difficult to fully grasp the requirements.
Additionally, the target users—professional engineers and consultants—had highly specialized needs. Without a deep understanding of the industry, creating accurate user personas was particularly challenging.
Hong Kong Building Condition
Online Application System
Responsibility
User Research / UXUI Design / Prototyping
Design Tools
Figma
Target User
(External User) Property Owners / Building Professional / Building Contractors etc.
(Internal User) Admin / Officers / Engineers of Hong Kong Building Department etc.
Purpose
To minimise paper usage and streamline manual workflows, we are tasked with designing an online application system for related target to plan submissions, review status of submissions and related processes.
Design Period
Jun 2024 - Aug 2024
user experience enhancement.
-
In collaboration with developers, the system is designed to efficiently process applications, manage user information, and streamline workflows. I focused on structuring content to enhance clarity, ensure seamless navigation, and provide an intuitive user experience. From public-facing sections to user dashboards, the system is organized to guide users effortlessly through each step. With intuitive navigation, clear labeling, and mobile accessibility, this structured approach delivers a user-friendly experience while optimizing application processing.
user experience enhancement.
-
In collaboration with developers, the system is designed to efficiently process applications, manage user information, and streamline workflows. I focused on structuring content to enhance clarity, ensure seamless navigation, and provide an intuitive user experience. From public-facing sections to user dashboards, the system is organized to guide users effortlessly through each step. With intuitive navigation, clear labeling, and mobile accessibility, this structured approach delivers a user-friendly experience while optimizing application processing.
UI Design & Accessibility.
-
In alignment with the Hong Kong Building Department, I primarily use a blue-toned colour scheme to create a trustworthy, professional, and authoritative feel. To enhance visibility and emphasis, I incorporate bright orange as a complementary colour, ensuring buttons and key information stand out.
Balancing aesthetics with accessibility was a challenge, as I carefully adjusted the colour combinations, alt text and error handling to meet WCAG compliance and maintain a visually cohesive design.
↓ The Moodboard
↓ Colours & Fonts Guideline (Option 1)
↓ Colours & Fonts Guideline (Option 2)
UI Design & Accessibility.
-
In alignment with the Hong Kong Building Department, I primarily use a blue-toned colour scheme to create a trustworthy, professional, and authoritative feel. To enhance visibility and emphasis, I incorporate bright orange as a complementary colour, ensuring buttons and key information stand out.
Balancing aesthetics with accessibility was a challenge, as I carefully adjusted the colour combinations, alt text and error handling to meet WCAG compliance and maintain a visually cohesive design.
↓ The Moodboard
↓ Colours & Fonts Guideline (Option 1)
↓ Colours & Fonts Guideline (Option 2)
Challenges.
-
Before starting this project, I had limited knowledge of the Hong Kong building industry. Although I had experience designing online application systems, the complexity of application forms, submission procedures, and legal terms made it difficult to fully grasp the requirements.
Additionally, the target users—professional engineers and consultants—had highly specialized needs. Without a deep understanding of the industry, creating accurate user personas was particularly challenging.
Challenges.
-
Before starting this project, I had limited knowledge of the Hong Kong building industry. Although I had experience designing online application systems, the complexity of application forms, submission procedures, and legal terms made it difficult to fully grasp the requirements.
Additionally, the target users—professional engineers and consultants—had highly specialized needs. Without a deep understanding of the industry, creating accurate user personas was particularly challenging.