• PAN Foundation

  • /

  • PAN Foundation

  • /

How do you design trust into every interaction?

How do you design trust into every interaction?

Designing a scalable Salesforce microsite that helps historically underrepresented communities access trustworthy clinical trial information, even after the project was redefined halfway through.

Designing a scalable Salesforce microsite that helps historically underrepresented communities access trustworthy clinical trial information, even after the project was redefined halfway through.

Designing a scalable Salesforce microsite that helps historically underrepresented communities access trustworthy clinical trial information, even after the project was redefined halfway through.

Domain

Healthcare & Nonprofit

My Role

Visual design

Timeline

April 2024 - June 2024

Context

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.

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.

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

Designing for trust under frequent project changes

Creating an experience for audiences with justified skepticism toward medical institutions was already a significant design challenge. Midway through the project, changing business requirements fundamentally reshaped the scope, timeline, and technical approach.

Project scope changed halfway through
The standalone organization became a PAN Foundation microsite, requiring a complete restructuring of navigation, branding, and content architecture.

Technical assumptions disappeared
What was planned as primarily Salesforce Lightning components became mostly custom-built experiences.

Visual execution compressed into four weeks Brand assets arrived late, leaving only a month to build and refine the entire visual system before development.

User needs & research insights

While the UX team led discovery research, I used their findings as the foundation for visual design decisions. Four experience principles consistently emerged throughout stakeholder alignment and user research.

Trust is earned through consistency.

Trust is earned through consistency.

Patients needed information presented clearly and transparently. Visual consistency became an important signal of credibility.

Representation must feel authentic.

Representation must feel authentic.

Photography should reflect real communities rather than relying on polished healthcare imagery that can feel performative.

Empathy reduces cognitive barriers.

Empathy reduces cognitive barriers.

Friendly language, generous spacing, and approachable layouts helped make difficult healthcare topics feel more accessible.

Taking action should never feel overwhelming.

Taking action should never feel overwhelming.

Calls to action needed to be obvious, simple, and immediately connected to trusted resources.

Exploration

Exploring ways to visualize inclusion

Exploring ways to visualize inclusion

We explored two visual directions, each interpreting the UX principles differently. One emphasized belonging through representation, while the other focused on hope through openness and light.

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

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.

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"

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.

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.

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.

Final design

Built for designers, developers, and content authors

Beyond the interface, I created a reusable design system and documentation that allowed the team to build, maintain, and scale the site long after launch.

Impact

  1. Enabled independent content management through a comprehensive component and authoring guide.

  2. Delivered a fully responsive Salesforce experience despite major mid-project scope changes.

  1. Enabled independent content management through a comprehensive component and authoring guide.

  1. Delivered a fully responsive Salesforce experience despite major mid-project scope changes.

  1. Established a new digital platform supporting PAN Foundation's clinical trial education initiative.

  1. Established a new digital platform supporting PAN Foundation's clinical trial education initiative.

  1. Created a reusable design system later adopted during the redesign of PAN Foundation's primary website.

Learnings

Good design earns trust before it asks for action.

Healthcare experiences succeed when credibility is communicated visually as well as verbally.

Design systems are most valuable when under pressure.

A modular system allowed the project to absorb changing requirements without sacrificing consistency.

Contraints often clarify priorities.

The compressed timeline forced the team to focus on patterns that delivered the greatest impact.

Accessibility and representation reinforce eachother.

Helping people recognize themselves in an experience can be just as important as helping them navigate it.