Eileen Ewing's Design Portfolio

PAN Foundation
/

PAN Foundation
/

Building a design system for a changing Salesforce experience

Designing a scalable microsite and the system behind it, to help historically underrepresented communities access trustworthy healthcare information.

Domain

Healthcare & Nonprofit

My Role

Visual design

Timeline

April 2024 - June 2024

Context

The PAN Foundation launched a clinical trials education initiative to help historically underrepresented communities make informed decisions about participating in clinical research.

I led visual design for the new microsite, developing its visual language and reusable UI components. Midway through the project, the scope changed significantly:

A new context: The standalone site became part of the PAN Foundation's broader digital presence, requiring changes to branding, navigation, and content structure.
A different technical approach: What began as a plan to use mostly standard Salesforce components evolved into an experience that was roughly 80% custom.
A compressed timeline: Late-arriving brand assets left approximately four weeks to develop and refine the visual system before development.

Clinical trials only improve healthcare when participants reflect the populations they’re intended to serve. The PAN Foundation launched a new initiative focused on improving clinical trial education and participation among historically underrepresented communities. As Lead Visual Designer, I was responsible for creating the visual language, design system, and scalable component library for a new Salesforce microsite supporting that mission.

Challenge

Create a cohesive, approachable experience while building a system that developers could implement and the client could maintain after launch.

Design direction

Research led by the UX team highlighted four principles that guided my visual decisions: consistency builds trust, approachable layouts reduce cognitive barriers, authentic representation matters, and clear calls to action make taking the next step easier.

I explored two visual directions:

Idea
Center people within the experience using PAN's logo as a framing device.

✔️ Pops of vibrant color with liberal white space

✔️ Extends the PAN brand naturally

✔️ Scales into a reusable design system

Tradeoff
Depends on sourcing authentic photography

Idea
Use light, space, and doorway metaphors to communicate opportunity and hope.

✔️ Bright, optimistic tone

✔️ Keeps focus on education content

✔️ Reinforces accessibility

Tradeoff
Felt more metaphorical than mission-driven

Why we chose "Part of the Picture"

Why we chose “Part of the Picture”

Ultimately, Part of the Picture created the strongest connection between the mission, the audience, and the brand.

It made inclusion visible. Rather than talking about representation, the design system physically centered people throughout the experience.

It strengthened the existing brand. The visual language evolved directly from the PAN Foundation's new logo, making the microsite feel like a natural extension of the organization instead of a disconnected campaign.

It scaled beyond a single website. The framing device became a reusable design pattern across components, layouts, and future initiatives. This was one reason why the system was later adopted for PAN Foundation's broader website redesign.

Ultimately, Part of the Picture created the strongest connection between the mission, the audience, and the brand.

It made inclusion visible. Rather than talking about representation, the design system physically centered people throughout the experience.

Ultimately, Part of the Picture created the strongest connection between the mission, the audience, and the brand.

It made inclusion visible. Rather than talking about representation, the design system physically centered people throughout the experience.

It strengthened the existing brand. The visual language evolved directly from the PAN Foundation’s new logo, making the microsite feel like a natural extension of the organization instead of a disconnected campaign.

Building the system

With the visual direction established, I translated it into a reusable design system that could support the custom Salesforce experience.

I established Figma variables for color, typography, and spacing so multiple designers could work consistently within a shared file. I also developed component variations and documented their intended use, behavior, and relationship to the broader interface.

This work helped turn the visual direction into a repeatable system rather than a collection of individually designed pages.

Connecting design to the CMS

The custom components introduced a challenge beyond visual consistency: developers needed clear implementation guidance, and the client needed to understand how to use the resulting components after launch.

I created a component authoring catalog documenting each component's purpose, variations, page usage, CMS fields, and authoring rules. Where components depended on other content being created first, I documented those relationships as well.

I mapped the Figma documentation and component catalog to the Salesforce build, worked with developers through QA, and trained the client's team to manage content independently.

The goal was to make the system useful beyond the design file: a shared reference for implementation and a practical guide for the people maintaining the site.

Impact

Enabled ongoing content management: Delivered component and authoring documentation, along with training, to help the client maintain the site independently.
Supported implementation under changing constraints: Delivered a responsive Salesforce experience despite substantial mid-project changes to scope and technical approach.

Enabled ongoing content management: Delivered component and authoring documentation, along with training, to help the client maintain the site independently.

Supported implementation under changing constraints: Delivered a responsive Salesforce experience despite substantial mid-project changes to scope and technical approach.

Created a reusable visual foundation: Established patterns that extended beyond the initial microsite.

Influenced future work: The design system was later adopted during the PAN Foundation's broader website redesign.

Learnings

A design system's value extends beyond consistency in the interface. It also depends on how clearly the system communicates its intent to the people building, using, and maintaining it.

This project reinforced the importance of designing for the full product lifecycle. Under tight constraints, component reuse, clear documentation, and shared guidance helped connect visual craft to implementation and long-term ownership.