UI/UX

Home Affairs Department

Government Website Revamp

Introduction

The Home Affairs Department is an executive agency in the government of Hong Kong responsible for internal affairs of the territory.

My Role

UX/UI Designer
Research,
Design,
Prototype

Team

2 UX/UI Designer,
3 Developer,
1 Project Manager

Duration

6 Months

Link

https://www.had.gov.hk/tc/
https://www.had.gov.hk/rru/tc_chi/
https://www.had.gov.hk/rre/chi/
https://www.hadla.gov.hk/en/index.php

Problem Discovery

The outdated website design leads to the information or resources cannot publish to the user effectively

Empathy Map

User are looking for a new website that are mobile friendly and concern about user experience.

Identified Pain Point

The presentation of projects and ideas cannot satisfy the potential client to relay on the agencyThe website design is outdated and cannot fit into the device that usually use

01

Data not updated and clear

There is no email/ phone number or any social media link(button) that can direct contact to Sekgamdong

02

Too complicated structure

By direct to information, user request many steps and not sure the accurate result

03

Not mobile Friendly

The website was build with no break-even point, people cannot watch their information in phone

User Flow

A international school website that presenting their spirit and their way of education and syllabus.

Sitemap

By revamp the site map to integrate similar information and check all the link valid or not, below is 2 example site.

Design highlight

The Home Affairs Department

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.

Data presentation improvement

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

Mobile Responsive Design

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

Impact

Interaction In the Website Increased

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

Mobile Friendly

Test improved

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

Page Accessibility Test
(WCGA) Improved

According to WCGA, we improve the website from 0 score to AA standard.