All projects
A centrlized platfrom for brand guidelines and assets
This is a central hub for internal and external users to study and learn about the AIA brand and its associated brands. A library that holds all its brand standards, assets, templates, etc.. Interactive page, learning page, external resources, and more elements that strengthen the core brand. For everyone who will be working on projects for AIA.
Company
AIA
Industry
Insurance
Deliverables
Website Design
Toolstack
Webflow, Adobe XD
Team
Sole Designer
My Role
UI/UX Designer
Involvement
IA, Wireframe, Mock-up, Prototype, Testing, Video Post-production
A platform to educate employees and vendors about different brand standards and detailed guidelines of how to use them.
All projects
A centrlized platfrom for brand guidelines and assets
This is a central hub for internal and external users to study and learn about the AIA brand and its associated brands. A library that holds all its brand standards, assets, templates, etc.. Interactive page, learning page, external resources, and more elements that strengthen the core brand. For everyone who will be working on projects for AIA.
Company
AIA
Industry
Insurance
Deliverables
Website Design
Toolstack
Webflow, Adobe XD
Team
Sole Designer
My Role
UI/UX Designer
Involvement
IA, Wireframe, Mock-up, Prototype, Testing, Video Post-production
A platform to educate employees and vendors about different brand standards and detailed guidelines of how to use them.
All projects
A centrlized platfrom for brand guidelines and assets
This is a central hub for internal and external users to study and learn about the AIA brand and its associated brands. A library that holds all its brand standards, assets, templates, etc.. Interactive page, learning page, external resources, and more elements that strengthen the core brand. For everyone who will be working on projects for AIA.
Company
AIA
Industry
Insurance
Deliverables
Website Design
Toolstack
Webflow, Adobe XD
Team
Sole Designer
My Role
UI/UX Designer
Involvement
IA, Wireframe, Mock-up, Prototype, Testing, Video Post-production
A platform to educate employees and vendors about different brand standards and detailed guidelines of how to use them.
Project Goal
There are many employees and external vendors designing materials for the company, however there hasn't been a platform for them to get assets and learn to use them correctly. This resulted in wrong using of brand assets due to the lack of understanding of the brand. AIA asked our team to create a centralized platform to educate employees and vendors about different brand standards and detailed guidelines of how to use them, as well as strengthen their knowledge of the AIA brand.
Project Goal
There are many employees and external vendors designing materials for the company, however there hasn't been a platform for them to get assets and learn to use them correctly. This resulted in wrong using of brand assets due to the lack of understanding of the brand. AIA asked our team to create a centralized platform to educate employees and vendors about different brand standards and detailed guidelines of how to use them, as well as strengthen their knowledge of the AIA brand.
Information Architecture
Given the sheer amount of information that required to be stored in Brand Hub, to make sure I have a clear vision of how all the content are being organized, I distributed them into a top-to-bottom tree, keeping all the information accessible within 2 layers, only go into the 3rd layer when necessary. The 2-layer system is to make sure all the content are 2 clicks away from accessing.
Information Architecture
Given the sheer amount of information that required to be stored in Brand Hub, to make sure I have a clear vision of how all the content are being organized, I distributed them into a top-to-bottom tree, keeping all the information accessible within 2 layers, only go into the 3rd layer when necessary. The 2-layer system is to make sure all the content are 2 clicks away from accessing.
Information Architecture
Given the sheer amount of information that required to be stored in Brand Hub, to make sure I have a clear vision of how all the content are being organized, I distributed them into a top-to-bottom tree, keeping all the information accessible within 2 layers, only go into the 3rd layer when necessary. The 2-layer system is to make sure all the content are 2 clicks away from accessing.
Wireframe
The main purpose of brand hub is for users to find information about the AIA brand and how to use them. I want the pages to introduce what the it has in store quickly, and for them to easily find what they need. I use eye-catching imagery and big text to grab the users attention and make it easy to read, without it being boring.
Wireframe
The main purpose of brand hub is for users to find information about the AIA brand and how to use them. I want the pages to introduce what the it has in store quickly, and for them to easily find what they need. I use eye-catching imagery and big text to grab the users attention and make it easy to read, without it being boring.
Wireframe
The main purpose of brand hub is for users to find information about the AIA brand and how to use them. I want the pages to introduce what the it has in store quickly, and for them to easily find what they need. I use eye-catching imagery and big text to grab the users attention and make it easy to read, without it being boring.
Users first landing on the website can easily find every piece of resource this website includes. Landing page uses tiles to display the most used items. The design utilizes different shapes and sizes of tiles to set hierarchy.
Users first landing on the website can easily find every piece of resource this website includes. Landing page uses tiles to display the most used items. The design utilizes different shapes and sizes of tiles to set hierarchy.
Users first landing on the website can easily find every piece of resource this website includes. Landing page uses tiles to display the most used items. The design utilizes different shapes and sizes of tiles to set hierarchy.
The most important page—brand standards uses a one-long-page design, with quick buttons at the top, because I want all the assets stored in the one place. Users can scroll down to see all the content, or quickly jump to a section.
The most important page—brand standards uses a one-long-page design, with quick buttons at the top, because I want all the assets stored in the one place. Users can scroll down to see all the content, or quickly jump to a section.
The most important page—brand standards uses a one-long-page design, with quick buttons at the top, because I want all the assets stored in the one place. Users can scroll down to see all the content, or quickly jump to a section.
Other than resources, other brand supporting pages also adapts the big imagery and big text approach, A few of the supporting brands have alternate version of the AIA brand style, will feature unique design elements.
Other than resources, other brand supporting pages also adapts the big imagery and big text approach, A few of the supporting brands have alternate version of the AIA brand style, will feature unique design elements.
Other than resources, other brand supporting pages also adapts the big imagery and big text approach, A few of the supporting brands have alternate version of the AIA brand style, will feature unique design elements.
Home Page
According to the information given by the client, Brand Standards will be the most used page of the website. Putting it on top so it's the first thing user sees. The lower sections are reference information, which are supplemental material to the brand.
Home Page
According to the information given by the client, Brand Standards will be the most used page of the website. Putting it on top so it's the first thing user sees. The lower sections are reference information, which are supplemental material to the brand.
Home Page
According to the information given by the client, Brand Standards will be the most used page of the website. Putting it on top so it's the first thing user sees. The lower sections are reference information, which are supplemental material to the brand.
Brand Resources
For improved user experience on this content-rich page, quick selection buttons enable rapid navigation. Content is prioritized by importance. A dynamic grid system, using 2 or 4-5 columns, organizes content: 2-column grids emphasize key items, while 4-5 column grids offer clarity for sections with many items. A "back to top" button facilitates easy access to the quick selection bar. The quick selection bar's on-demand appearance, chosen during wireframing, reduces visual clutter.
Brand Resources
For improved user experience on this content-rich page, quick selection buttons enable rapid navigation. Content is prioritized by importance. A dynamic grid system, using 2 or 4-5 columns, organizes content: 2-column grids emphasize key items, while 4-5 column grids offer clarity for sections with many items. A "back to top" button facilitates easy access to the quick selection bar. The quick selection bar's on-demand appearance, chosen during wireframing, reduces visual clutter.
Brand Resources
For improved user experience on this content-rich page, quick selection buttons enable rapid navigation. Content is prioritized by importance. A dynamic grid system, using 2 or 4-5 columns, organizes content: 2-column grids emphasize key items, while 4-5 column grids offer clarity for sections with many items. A "back to top" button facilitates easy access to the quick selection bar. The quick selection bar's on-demand appearance, chosen during wireframing, reduces visual clutter.
Brand Supporting pages
Supporting pages like the brand ambassador page are part of the brand hub website. They are put in a simple layout to quickly convey essential information and maintain brand consistency. These pages prioritize clarity and ease of navigation, ensuring users can efficiently access key details about brand representatives and related resources.
Brand Supporting pages
Supporting pages like the brand ambassador page are part of the brand hub website. They are put in a simple layout to quickly convey essential information and maintain brand consistency. These pages prioritize clarity and ease of navigation, ensuring users can efficiently access key details about brand representatives and related resources.
Brand Supporting pages
Supporting pages like the brand ambassador page are part of the brand hub website. They are put in a simple layout to quickly convey essential information and maintain brand consistency. These pages prioritize clarity and ease of navigation, ensuring users can efficiently access key details about brand representatives and related resources.
Video Post-production
After the website has been finished, I was asked to do a video post production for one of the interviews. I was responsible of editing the video and add extra motion graphics to the video.
Video Post-production
After the website has been finished, I was asked to do a video post production for one of the interviews. I was responsible of editing the video and add extra motion graphics to the video.
Video Post-production
After the website has been finished, I was asked to do a video post production for one of the interviews. I was responsible of editing the video and add extra motion graphics to the video.
Reflection and moving forward
Takeaways: With the sheer amount of information, it is crucial to have it all planned out before moving on to visual elements. It was a good reminder of how important categorizing and IA are. It is the first website I built for AIA, and I was given a certain degree of freedom to capture the spirit of the AIA design language, but not follow it too strictly.
Encountered issues: A lot of issues come from technical back end problem. Since it was the first time working with AIA’s web collaborative platform, a lot of technical limitations were not known to us. I spent a lot of time communicating with our IT programmer for troubleshooting. It was a lot of trial and error, and we had to learn as we go. It was a very fruitful learning experience working within and around technical limitations.
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
© 2025 Dennis Lam
Created by me in Framer
© 2025 Dennis Lam
Created by me in Framer
© 2025 Dennis Lam
Created by me in Framer