Esri.com Art Direction

Creating a visual storytelling framework that meets users where they are

The Goal

Develop a visual language to meaningfully unify 5K+ web pages across Esri.com

As one of the world’s largest enterprise SaaS tech companies, Esri’s marketing website serves over 2M visitors annually, catering to a diverse audience of newcomers and GIS power users. Leveraging user research and performance data, I led a complete reimagining of the site’s art direction strategy to better meet the needs of all users.

The work behind the work

Beyond the visual design, this project included many pitch decks, philosophical conversations about the future of Esri.com, and strategic thinking that helped bring the vision to life.

I played a key role from initial research through final rollout—leading both the design strategy and the operational path to adoption. Here’s what I contributed over the course of a year:

    • Comprehensive audit of Esri.com to identify inconsistencies and pain points

    • Competitive analysis to benchmark against industry best practices

    • Conducted stakeholder interviews to identify opportunities from diverse perspectives

    • Clearly defined the problem space and surfaced areas where legacy thinking was limiting impact

    • Presented insights and recommendations to leadership, generating interest in a large-scale solution

    • Defined visual strategy based on audience needs across the user journey, from discovery to adoption

    • Created concept art that redefined our approach to visual storytelling and brand expression

    • Designed high-fidelity mockups to stress test scalability across use cases

    • Designed systems-level artifacts to demonstrate how the new strategy scales across Esri’s digital experiences

    • Led the creation of a style guide covering foundational elements like imagery, product visuals, and illustration

    • Proposed and implemented changes to project workflows that empowered better cross-functional collaboration

    • Facilitated working sessions with designers and stakeholders to iterate transparently and build alignment early

    • Delivered targeted presentations to executive leadership to build confidence in the new direction and secure alignment

      • Presentation decks and recordings available upon request

    • Led the organization-wide rollout of the new style guide, presenting to design, marketing, and product teams to ensure clarity and buy-in

    • Currently serve in an advisory role to maintain quality and consistency as adoption continues to scale across Esri.com

The Solution

Tell the right visual story at the right time

Establishing when to show what to who was key to meeting the needs of a broad audience. New users, unfamiliar with the technology, should be served visuals they can relate to. Similarly, a GIS-savvy audience needs more technical detail.

Visual Hierarchy

A flexible, but cohesive, system

This framework works for any use case across brand campaigns, industry solutions, and product marketing, and other verticals on Esri.com.

Scalable Templates

Patterns of use help designers and writers work quickly without compromising quality.

Visual Language

Showing real-world applications makes the technology relatable.

My research found that when a graphic showed GIS data in context of the real world, people just got it. I proposed we use conceptual representations of GIS to show the landscape changes over time, how a drone captures imagery data, shipping routes in a popular port, and more.

Product Visualization

Knowing what to leave out is just as important as knowing what to include.

Including too much technical detail risks losing a non-GIS-savvy audience by overwhelming them with information they can’t easily understand. I created this breakdown of the different types of visualization styles for different audiences.

Visual Language

More maps, less stock photos

Our research showed that cards with maps were getting clicked much more than cards with generic stock photos, so I pushed for the decision to prioritize using maps. The team hired multiple cartographic designers to support this effort.

The Impact

  • First site-wide style guide (ever)

    I led the development of a comprehensive guide that impacts an entire department of 30+ web designers.

  • Improved scalability and velocity

    The larger the project, the simpler the design, making large-scale efforts faster to execute.

  • A shift in design culture at Esri

    Our design team has more trust, less push back, and a wider sphere of influence than ever before.

The Esri.com Art Direction Style Guide

Design philosophy

Typography

Color

Maps

Photography

Branding elements

Graphic elements

Visual language

Icons and illustration style

Product visualization and usage

Showcase of applications

The Process

Content Audits

How did we get here?

We migrated Esri.com to Adobe Experience Manager (AEM) in 2016, but there was no real centralized design system to ensure a cohesive look and feel. By 2021, much of the migration was complete, but the site’s visual design had become fragmented.

I conducted a comprehensive audit of major page types to catalog UI patterns, art direction styles, and evaluate the effectiveness of content communication across the site.

Stakeholder Interviews

Uncovering design and culture challenges

I conducted interviews with experts across business units to gather as many perspectives as possible and to plant seeds of the change to come. It became clear that we’d need to make some big changes to the visuals we create, how we work together, and how we think about design in our organization.

The number one problem Esri’s been trying to solve is how do we get people to understand what we do? People should visit our pages and think, ‘I didn’t know that maps are works of art that give me amazing information’.

If we can change that, just that fundamental level, I think that would be success.
— Interview participant
Designers are disconnected from actually
using our software.
— Interview participant
One of our challenges is that we buy into a visual direction, but then we move on from it so quickly...We deal with the symptoms of leadership being attracted to the next shiny object.
— Interview participant
If we are using stock imagery and there’s a person next to a map, how is that end user going to connect the two right off the bat? Can they understand the message right away?
— Interview participant

Mapping the Solution

Visual strategy based on the user journey

I wanted our visual language to be based on the user’s relationship to site content. New users in the Discover path on brand-level pages should be served more conceptual content, while current users will resonate more with technical details and workflows.

Design Operations

Empowering design at scale means better communication, clear roles and responsibilities

We wanted to improve how our designers were collaborating with cross-functional teams, so I created guidelines around how we work together to stay aligned, but also avoid creative by committee. We later hired a Design Ops specialist to help with this effort.

Previous
Previous

What is GIS? Website

Next
Next

Nékter Juice Bar