Redesigning An Architectural Company's Website

About The Project

An architectural company desires to showcase past works to potential clients and employees. A responsive website is built to shares the firm's best works and design process.

My role as the company's UX designer is to create a website that has a great UX that takes care of accessibility and is easy to use.

The process involved studying the existing website

  • Collecting ideas
  • Arranging information architecture of the website
  • Site mapping
  • Seeking solutions with the web developers

Result

Launching the website as an online portfolio.

Gathering Collective Ideas

We Asked The Office

How would you like the company's website to be?

Because the team's ideas matter!

On the choice of layout, font types, coloursand what is missing!

  • The office prefer a simple yet informative website
  • It informs the philosophy of the office works
  • Wishes to display diversity of company (different age groups,background, interests)

Asking BIGGER questions

"What makes a good online portfolio?"
"How international architectural firms do it?" 

We studied a range of architectural websites, focusing on 4 aspects.

How projects are arranged in a gallery manner.

The site's navigation.

The amount of time scrolling and searching for a particular project.

Levels of interaction. (for our case, the simpler the interfaces are, the better!).

Reviewed portfolios

#1- OLSON KUNDIG 

One of the most user-friendly websites found, the endless scrolling effort user interface wins. However the black background is too much of a contrast to the photographs. 

#2- 6A

Like an editorial website, it features images of completed buildings, articles, process, sketches, construction – evokes the sense of diverging creative design process. However, the off-grid layout of images make the website look untidy!

#3- Rogers Stirk Harbour + Partners - RSHP

This website stood out. By the choice of images which features the colours and integrity of structural elements, daringly used solid colors to highlight key buttons - professionally playful! A well-put together website. 

#4- FOSTERS AND PARTNERS 

Clean edges , clean font. Entire website doesn’t scream at your face. The animated homepage– shadows, streetscapes, change of angles  

Organized by types of projects helps the users to navigate around easily. 

#5- OFFICE Kersten Geers David Van Severen

The entire website flows harmoniously smooth and it is …so serene. It’s subtle designs allow images and drawings to speak for itself. 

Love how the main image is located next to the drawing itself.

We concluded that our website should be

Informative, supported by quality images and is easy to navigate around.

Information Architecture (IA)

The underlying principle in great website structure is Information Architecture (IA).

IA ensures that content is organized, structured, and labeled effectively and consistently.

Hence, I first gathered all available information of the projects.

Throughout the process, we had undergone multiple re-selection of the best projects to be featured on the website.

Secondly, we decided on what information to be shared on the website.

  • Project Name
  • Site Area
  • Category
  • Year Built
  • Description
  • Details (No.of Storeys/No.of Units)
  • Area (GFA)/Plot Ratio
  • Status (Completed/Constructing/Designing Phase)

Thirdly, a site map with a clear hierarchy of the pages and relationships between different pieces of content on the site.

Site Map

  • Having a web structure helps in organizing the site's content and have the team to understand how the pages relate with each other.
  • It involves the hierarchical arrangement of web pages and their relationships to one another.

Here is a visual representation of the website's IA, Information Architecture! 

User Flow and Navigating Around The Website

User Flow

Project Summary : Reflection and Next Steps

1. COMMUNICATION

This project challenged me to think as a potential client, web developer and the architects.

I also learned to communicate with the web developers through sketches and web-design terminologies.

2. PRODUCT LAUNCH

With the completed product, we launched the new website.

3. FUTURE IMPLEMENTATIONS

We visualize the website to be more interactive by having a "search" feature.

As the company grows and expands their portfolio, this allows users to search a project by the name.

Scroll to top