AIA Brand Hub

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.

Role

Lead designer

involvements

Information Architecture, Wireframe, Mock-up, Prototype, Testing, Video production

Tools

Adobe XD, Webflow, Adobe Illustrator, Adobe After Effects

The problem

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.

Organizing information

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.

All items were being categorized and distributed into different layers of the website.

After a rough categorization, a more detailed IA was create. Since the content didn't come in its completion at the beginning, the IA is being updated from time to time.

Wireframe explorations

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.

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.

The final design

This website was launched with 15 pages initially, later expanded to 18 pages. Example pages will be shown below to dive deeper into the thoughts behind the user interface.

The final product was delivered in a highly functional prototype using Webflow—an online website building tool. The advantage of a highly functional prototype is giving the client the closest version to the finishing product to review and gather feedback. Feedback can be more accurate.

Main page

Titles—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.

Supporting sections—Scrolling down, next in line is the core brand value explained by higher-ups. This content is important to educate and introduce users about the brand value. This section will not be the primary reason of why users visit this page, but it's still important information.

Content at the bottom is past events achieve, which is reference material for future events. These are put at the bottom since they are mostly past and inactive content.

Resources page

Accessing content—Since this length of this page is extensive, it is necessary that the users can get to their target in the shortest amount of time. I added the quick selection buttons to fulfill that purpose.

The content is place in the order of their importance.

Grid system—The layout of the page is broken down into 2-5 column grids. 2-column grids are for items with less item, or need bigger emphasis. 4-5-columns are for contents with a high number of items. This system gives sections with more content a clearer overview.

Back to top—A button is always presented in the view to go back top for the quick selection bar to find the next item. A decision was made in the wireframe stage that the quick selection bar will not always stay at the top of the screen to not add clutter to the view.

Other involvement

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.

Reflect and move 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.

website

AIA Online Brand Hub