HAD Department Hong Kong

Home Affairs Department -
Hong Kong Gov

HAD / 2021

Public Service

WCAG2.0

Revamp

UI/UX Design

The Home Affairs Department is an executive agency in the government of Hong Kong responsible for internal affairs of the territory. It reports to the Home and Youth Affairs Bureau, headed by the Secretary for Home Affairs.

Role

Product Designer
Research, Design, Prototype

Tools

Design Tool - Adobe XD
Research Tool - Google

Company

Home Affairs Department - Hong Kong Goverment

Problem

1) Not Mobile Friendly

2) Bulk Structure

3) Inconsistent UI Element

Goals, Achievement and Impact

Interaction In the Website

Number of transection increased by 30% by season

Number of transection increased by 30% by season

According to Google analysis, the number of events is in a increased trend.

The total number of transection after the launch of the revamp have reached 100,000 USTD by month.

The total number of transection after the launch of the revamp have reached 100,000 USTD by month.

Mobile Friendly
Test improved

Start of the revamp project on SaaS platform

Start of the revamp project on SaaS platform

According to Page Speed Insights, the revamp design has success scan in it.

Accessibility Test Score Improved

Page Visit

Increasing Trend


According to WCGA2.0, we improved the website from not accessible to AA standard.

Sitemap Restructure

Sitemap reform by Miro

User Flow
Chart

By revamping the site map to reduce the total number of pages and integrating or consolidating similar content into single pages, we have effectively reduced the size of our website by about two-thirds. This optimization not only streamlines the user experience but also significantly enhances loading speed, SEO and overall performance.

Design Outcomes

1) 


Integrated design element

By creating renaming the resources, most of the materials can be form as a group and available for google search server can scan through the website and build up better SEO result.By creating hexagon and parallelogram element, most of the HAD website use it as symbol to represent it is one of the website below HAD.

2)


Data presentation

By using color layer and chart, the data or information show in the list can clarify

3)


Mobile Responsive Design

By building the mobile responsive mode, User may easy access to projects by using on the Hamburger Menu.

Starting a new project?
Feel free to

Reach Me Now

Home

About

Work

Resume

Copyright © Jim Chim

Starting a new project?
Feel free to

Reach Me Now

Home

About

Work

Resume

Copyright © Jim Chim

Starting a new project?
Feel free to

Reach Me Now

Home

About

Work

Resume

Copyright © Jim Chim