City Resilience

Empower resilient urban future web app

AECOM is the world’s trusted infrastructure consulting firm. They promote their brand by publishing their ideas and practices. City Resilience and ESG were their focus in 2021, so they delivered a new web app called 'City Resilience'. I led the UX / UI design process, especially in the creation of the site's visual design system and contributed to its development and launch. The website gained significant attention upon its launch, accumulating over 3.7k views within its 1st month.

Project

Web design

Design system

No-coding development

Team

Marketing manager

UX/UI Designer (me)

UX/UI Consultant

My role

UX/UI Design

Timeline

June 2021 - Oct 2021

Design Process

Research + Design + Deliver, I wore multiple hats during the design process.

Design process

Design challenge

Challenge 1 - Complex stakeholders

What is “city resilience”to people?

To better convey the concept of resilient city, we interviewed 25 users, including 8 citizens, 2 government clients and 15 architects to deeply understand the user's cognitive level.

What are the needs of the stakeholders?

Through the research, we realized that the importance of this platform is not only to showcase AECOM's projects, but also to provide a channel for people with different roles in society to get to know each other by conveying the theme of ‘city resilience’, to promote us to build our cities better.

Design Solution

Solution - Progressive structure to accommodate different needs

Deliver the concept and values
Tell stories through real projects
Roundtable discussion of different perspectives
Future-oriented practice

Design challenge

Challenge 2 - Missing visual guide

How might we build the identity of the website based on the brand's visual system?

Firstly, from our research, China's PC penetration rate is 53.4 units per 100 households (2018), while cell phone users reach 1.39 billion (2015). Based on this current situation, we prioritized the design of the mobile version.

Secondly, guided by the company's brand standards, I immersed myself in the brand's essence, values, and translated these into a visual language. After analyzing the brand guidelines, focusing on color palettes, layout, and graphic elements, I meticulously selected every component—from color schemes to fonts—to ensure a consistent and harmonious user experience that accentuates the new site's features.

Design solution

Solution - Define visual system

Solution - Mobile-based navigation bar design

Due to the many and complicated information, we decided to keep the nav bar at the top of the mobile side, instead of receiving the hamburger menu inside, in order to display the information more clearly and not let users get lost in the reading process.

Theme color setting

AECOM's global visual guideline kind of restricts the use of color, we selected the theme color of each panel based on the characteristics of the different panels, with the half-ring as the main visual element.

Information layout grid system

To clearly display the text information, I developed a visual guide for the text information levels based on the principle of 8pt grid, including the spacing between headings and paragraphs, and the use of fonts at each level.

Use cards as entrances

Since cards can display key information in the most concise and clear way, and synergistic images can attract users' attention, we choose the visual language of cards as the entrance to different categories of information.

Narrative article entry card

Next article entry card

Voice round table/expert opinions entry card

Home page news entry card

User testing

Iterated through hallway testings

Due to the limited conditions, we mostly conducted hallway tests. In addition to the designers among our colleagues, we also looked for other user types: managers and the citizens to participate in the tests.

Before

After

Substitution categories are not distinct and users find it difficult to notice.
The classification of information is not clear enough.

Add rotation effect to distinguish page changes.
Further visual division of page hierarchy.

Before version 1

Before version 2

Location information is not obvious.
Information interpretation is not clear.

Too much information, hard to focus.
Visually cluttered and unattractive.

After

Information Simplification.
Optimize information hierarchy.
Related items are moved to the end of the viewpoint section after the big picture ends.

Before version 1

Before version 2

After

Divide the adjustment maintenance to transformation and upgrade into two pages, and use the visual language Sangsheng circle used in the previous pages to help explain the concept and change of the before and after state.

Graphically express the key words from adjustment maintenance to transformation and upgrading with a strong academic sense.

After

Strong overall sense of the main content of the story.
Appropriate visual unity.

Before

Title and project information, main content to distinguish.
Use more colors, not beautiful enough.

After

Before

Impact

We caught attention after launch.

After the website was launched, we got attention and received comments from users from all types. Including colleagues who were enthusiastic about participating in user testing before, the assistant marketing and communication manager from Shanghai AECOM , Vice President Stone, and even our cleaning aunt, all expressed their approval of our website. I am very grateful for this opportunity and proud of our work.

"Very nice site, I would love to keep updating news of this site on the official sites."

Olivia,
Assistant marketing and communication manager, AECOM

"In the latest version, it's easier to see the projects, and I'm very interested in submitting new projects to this web app."

Katie,
User testing participant

"This is a leading site in China, it has a huge impact in Asian Pacific."

S
Vice President, Greater China Region,
AECOM

"I got to know a lot of fun stories, and it's good to know the design of the parks and buildings, they are interesting."

Aunt Lucy,
User testing participant

Reflection

My problem solving skills are enhanced in constraints.

Effective design is not just about working within constraints; it's about turning these constraints into opportunities for creative solutions. Even though I encountered different kinds of constraints within this project, there were ways to solve the problems. This experience taught me that the ability to adapt to changing circumstances or feedback is a valuable resource in itself, and that's something that I will keep trying in the future.