Home

WHATSAPP >>

CHARLIZE YANG DESIGN

Home

WHATAPPS >

CHARLIZE YANG DESIGN

HK Tramways 120th Anniversary

ROLE

UIUX design | Responsive web design Dynamic effects

Comapny

HKT 120 ➜

YEAR

2024

Overview.

This website is designed to celebrate the 120th anniversary of Hong Kong Tramways. The overall design style is full of vitality and fun, very eye-catching. The main visual uses a bright yellow background, paired with rainbow tracks and cartoon-style Hong Kong landmark buildings, highlighting the important position and friendliness of trams in the city. The design incorporates many local elements, such as the McDull cartoon character, reflecting a strong Hong Kong flavor.

Goal.

Craft an energetic, Hong Kong-centric web interface that radiates a festive spirit
Condense 120 years of tram heritage into a visually streamlined single-page experience
Harmonize nostalgic elements with contemporary design to engage diverse age groups
Develop an interface that balances celebratory aesthetics with functional user information

Goal.

Craft an energetic, Hong Kong-centric web interface that radiates a festive spirit
Condense 120 years of tram heritage into a visually streamlined single-page experience
Harmonize nostalgic elements with contemporary design to engage diverse age groups
Develop an interface that balances celebratory aesthetics with functional user information

Process.

Research & Planning

Develop user personas that represent young tourists, local residents, and seniors.
Investigate public transportation memorial websites from various cities.
Examine successful examples of single-page designs.
Gather historical materials, photos, and stories related to the 120-year history of Hong Kong trams.
Organize significant timelines and milestone events in tram history.
Assess potential web technologies such as WebGL and SVG animations.
Address performance and compatibility considerations for the website.

Design & Prototyping

Create a diagram to outline the site structure.
Design a clear hierarchy and organization for the website content.
Produce low-fidelity wireframes for both desktop and mobile platforms.
Identify key interaction points and user flows for the website.
Utilize Adobe XD to develop interactive prototypes.
Perform internal testing and make iterative improvements.

Process.

Research & Planning

Develop user personas that represent young tourists, local residents, and seniors.
Investigate public transportation memorial websites from various cities.
Examine successful examples of single-page designs.
Gather historical materials, photos, and stories related to the 120-year history of Hong Kong trams.
Organize significant timelines and milestone events in tram history.
Assess potential web technologies such as WebGL and SVG animations.
Address performance and compatibility considerations for the website.

Design & Prototyping

Create a diagram to outline the site structure.
Design a clear hierarchy and organization for the website content.
Produce low-fidelity wireframes for both desktop and mobile platforms.
Identify key interaction points and user flows for the website.
Utilize Adobe XD to develop interactive prototypes.
Perform internal testing and make iterative improvements.

PREVIEW LINK

Home

WHATAPPS >

CHARLIZE YANG DESIGN

HK Tramways 120th Anniversary

Overview.

Goal.

Goal.

Process.

Research & Planning

Develop user personas that represent young tourists, local residents, and seniors.

Investigate public transportation memorial websites from various cities.

Examine successful examples of single-page designs.

Gather historical materials, photos, and stories related to the 120-year history of Hong Kong trams.

Organize significant timelines and milestone events in tram history.

Assess potential web technologies such as WebGL and SVG animations.

Address performance and compatibility considerations for the website.

Design & Prototyping

Create a diagram to outline the site structure.

Design a clear hierarchy and organization for the website content.

Produce low-fidelity wireframes for both desktop and mobile platforms.

Identify key interaction points and user flows for the website.

Utilize Adobe XD to develop interactive prototypes.

Perform internal testing and make iterative improvements.

Process.

Research & Planning

Develop user personas that represent young tourists, local residents, and seniors.

Investigate public transportation memorial websites from various cities.

Examine successful examples of single-page designs.

Gather historical materials, photos, and stories related to the 120-year history of Hong Kong trams.

Organize significant timelines and milestone events in tram history.

Assess potential web technologies such as WebGL and SVG animations.

Address performance and compatibility considerations for the website.

Design & Prototyping

Create a diagram to outline the site structure.

Design a clear hierarchy and organization for the website content.

Produce low-fidelity wireframes for both desktop and mobile platforms.

Identify key interaction points and user flows for the website.

Utilize Adobe XD to develop interactive prototypes.

Perform internal testing and make iterative improvements.

You may also be interested ...

Wewa Jack-Plot-challenge

Arts in the city

Visa Content Hub

You may also be interested ...

Wewa Jack-Plot-challenge

Arts in the city

VISA Content Hub

You may also be interested ...

You may also be interested ...