Savills North America

Promoting sustainability goals through design and content

UX Design
UX Research
UX Strategy

Background

Savills is a commercial real estate advisory firm with more than 700 offices across the globe. Their American branch, Savills North America, operates in a variety of diverse industries and sectors including energy, government, and technology. 

The company released their annual report for their environmental, social, and governance (ESG) initiatives, detailing their efforts to address climate change, give back to their communities, and promote a positive company culture. As part of their agency retainer agreement, Savills North America tasked Brooklyn Digital Foundry with adapting this report to add to their website for outside audiences interested in collaborating with Savills. I took a lead role in making recommendations and drafting mockups that would become the final product.

Details

Client - Savills North America

Role - UX Strategist

Team - Brooklyn Digital Foundry

  • 1 Project Manager
  • 2 UX Strategists

Timeline - August to November 2022 (4 months)

Objectives

  • Research how to best communicate company messaging through page format
  • Make recommendations for how the webpage can best communicate the company's commitment to an environmental and sustainable future
  • Mockup final ESG pages

Discovery

Research

To kickoff the project, we held a meeting with the client to understand the target audience for the new pages. While the original ESG report was written for people within the company, the new ESG pages would be aimed at representatives from outside companies interested in reaching out to Savills for sustainability-related partnerships. We conducted a brief research phase that consisted of the following:

  • Reviewed the 30 page annual ESG report to determine what major narrative points were necessary to include
  • Analyzed the website's current state to understand their system and brand
  • Explored the web pages of other companies to understand how they use messaging on ESG pages to improve perception of their company’s actions

Opportunities:

Based on our research, we concluded that the ESG pages needed to achieve the following goals:

  • Summarize the main points of the client’s ESG report in an easily digestible web format
  • Communicate their commitment to sustainability and responsible business practices to outside audiences
  • Highlight the client’s achievements and their progress towards future goals.
  • Promote their own ESG consultancy services to outside companies interested in partnering with Savills.

Constraints - Working within the system

A major challenge of this project was the lack of development phase. Since the client outsourced their website upkeep to another team, our mockups could only incorporate existing components already built on the site. Due to this limitation, we had to be economical with the type of information we presented and how we could include it. In the final mockups, we ended up placing more of a focus on structured storytelling over novel design.

Strategy

From outline to mockup

I first outlined the narrative structure of the page to get an idea of how to organize content on the site. The first draft consolidated the information down to four pages: an index page and three body pages. Two of these pages, titled Social and Workplace, detailed the impact of the client’s ESG campaigns on their community and employees, while the Future steps page collected their current efforts.

Upon further discussion with the team, we concluded the Workplace page was ineffective at showcasing their commitment to affecting the world on a larger scale. We replaced that page with ones dedicated to Environmental and Governance, so that the body pages instead detailed the initiatives that the client took toward each ESG topic respectively. This caused a major shift in the overall narrative, shifting the focus to emphasizing the client’s leadership through their actions.

In the following drafts, I reached out to other team members to gather feedback on the overall readability and page flow.

The high-fidelity mockups used components from the existing website database, and went through three rounds of feedback and iteration with our point of contact at Savills. Many of their comments focused on ensuring that their leadership and current initiatives were highlighted. We addressed these concerns by:

  • Using custom infographics to call attention to employee resources groups and external partnered organizations
  • Including a video embed showcasing company leaders
  • Adding a midpage callout to Savills’s professional ESG strategy network on relevant pages

Content

A large part of this project was the focus on content strategy. Instead of designing the content around a static layout, we used unique approaches on each body page to showcase the different initiatives in each area. The Environmental page used a case study to Social page showcased internal employee resource groups and partnered DEI (diversity, equity, and inclusion) organizations to promote their status as an inclusive working environment. 

At the end of the index and future steps pages, two components are highlighted: an explanation of the client’s professional ESG network (Savills Earth), and a call to action to connect with a company representative. These two components anchor the visitor to the goal of the page, which is to prompt the user to reach out based on the strength of the client’s current and past initiatives.

Streamlining the narrative

A major element from the report that we were forced to cut was a collection of principles referred to as ESG Pillars. For readers of the original 30 page document, they were an effective way at communicating Savills’s direction within their sustainable and ethical operations. However, when it came to the audience of the web pages, the ESG Pillars did not fit the narrative, as representatives visiting the webpage would be more interested in what the client had done for sustainability, as opposed to an emphasis on theoretical values. Removing the pillars made the overall narrative stronger, as it placed a heavier focus on their past and current actions that had a positive effect on their communities, raising their profile as a leader in the space.

Final mockups

The final deliverables consisted of mockups of the ESG index page with four corresponding body pages: Environmental, Social, Governance, and Future Steps. Each body page detailed the past and current strides that Savills has made in respect to initiatives in each of the distinct areas. The claims in these pages were supported by optional links to full reports which explained each of the points in further detail. 

Reflections

This project was a valuable exercise in the strategy of building a site. Since the scale was a lot smaller than building a site from the ground up, I was able to be more intentional with the initial discovery phase and exploring the subject. Through iterating wireframes and mockups, I strengthened my ability to communicate a brand new story within the limitations of an existing framework.

Savills has yet to add the updated ESG pages to their live site, but they continue to partner with Brooklyn Digital Foundry to improve their site and continue being a global leader in sustainability and responsible business practices.

Star GreyStar GreyStar Grey

Other Work

Shelter

Streamlining the design sprint for efficient collaboration

95 Percent Group

A research-driven website redesign from insights to impact

Dorell Fabrics

Designing a corporate communications site to generate new leads