City Resilience Website

City Resilience Website Redesign for AECOM





Nov. 2021- Jan, 2022
Mobile Website
Individual Work
Web Design, Prototyping


AECOM is an American engineering firm headquartered in Los Angeles, California, United States, with clients in more than 150 countries. Now AECOM Greater China is creating their new website about a new business service – city resilience design and consulting service. As an important part of their marketing strategies, the City Resilience website will provide the latest in-house research and insights on building resilient cities.

AECOM’s business goals are a) broadcasting the concept and business service of city resilience to relevant practitioners. b) Demonstrating city resilience projects in order to gain more project opportunities and contacts in the future. c) Spreading their brand value with this City Resilience website.

The user's goals are a) Getting to know what city resilience is and what they can do on real estate development projects.  b) Finding successful city resilience projects. c) Seeing the latest research in resilient urban design. d)  Connecting with AECOM for further cooperation

Based on these needs from various stakeholders, I optimized users' mobile experience of browsing and searching projects on the City Resilience website.

Design Goal

The current website fails to lead users to find the information that is concerned about most. Without assortment and navigations in the projects screen, users can't find the projects with the character they want. Besides, each projects' information card doesn’t show essential information that users care about most.

Current City Resilience Website

Jump to the solution
Problem finding

How does the current website work?

Usibility Test

Since AECOM already had a prototype of the website, the research process started with conducting a usability test in which we invited 5 users, including an architect, two developers, a landscape architect, and a governor to accomplish specific tasks on our website.

After the useability test, we found several problems on the current website:

1. The name of the project browsing page doesn't indicate its content.

2. Photos on the project browsing page are unsharp and can not be downloaded. It is hard to find high-quality photos on both the browsing page and narrative pages

3. When browsing the project page, it is hard to find all projects that have same features.

User Research

Who are users and what do they care most?

Design Decision

Look what I did for AECOM

Project filters and recommendations

The project filter field at the top allows users to filtrate only one design category among the large scope of AECOM's business.

The trending section shows the most popular projects that can demonstrate city resilience design philosophy for users who have no intention during browsing.

Reorganizing project pages

I added a share button on the project page and made projects shareable.

Besides, I added a photo gallery that includes high-quality photos of projects at the beginning of articles, in order to let users get access to photos easily and directly.


Tagged each project with hashtags of projects' keywords. Users can find all similar projects by tapping the hashtag.