Why these standards matter
Standards are crucial to brand integrity and user experience. We want users to have a consistent experience across Penn Medicine digital touchpoints regardless of which website or app they are accessing. A set of centralized design standards and design system ensures that every product team has access to and can easily adopt professionally designed and user tested design components. When a user lands on a Penn Medicine website or opens a Penn Medicine app, they can feel confident they are in the right place and that their expectations will be met.
The scope of these standards
The scope of these standards covers any pages on pennmedicine.org and any other public-facing Penn Medicine websites or digital products.
The standards do not apply to Perelman School of Medicine websites or internal employee-facing websites, such as the Penn Medicine intranet.
Who are the web and digital standards for?
Designers
These standards and the accompanying design system library in Figma help designers easily design websites, webpages, and digital products that adhere to the Penn Medicine brand standards. The library of design components can be combined to produce custom layouts or designers can use of webpage templates that have been built for Sitecore CMS users.
Learn more on the Resources for designers page.
Developers
As a large organization with many digital products, Penn Medicine has strict technical standards that must be followed by developers. These help us maintain consistency, optimize performance, and adhere to the legal and ethical requirements of healthcare institutions. There are also standards for accessibility that should be referenced during any project work.
Similar to designers, developers using the Penn Medicine design system will find that they do not need to recreate basic code. They are able to build more quickly, freeing up time to innovate where it really matters and allowing them to keep up with a large backlog of work more easily.
Learn more on the Resources for developers page
Content authors
Penn Medicine content authors should be aware of the differences between writing for print and writing for the web. The most important best practices and standards for web content will be outlined on this site. Additionally, having working knowledge of the variety of options for displaying content streamlines the publishing workflow.
Marketing teams
Best practices differ across mediums, and these standards can support marketing teams as they develop materials specifically for consumption on the web, mobile devices, or other digital platforms.
Agencies and vendors
These standards, the design system library in Figma, and the design system code library in Storybook are also meant to make it easier for the agencies and vendors we work with to build assets and solutions that comply with Penn Medicine visual identity and other standards.
Our approach
Flexible and adaptable
The Penn Medicine design system was built with an atomic design structure. Atomic design is a methodology for creating design systems by breaking down interfaces into smaller, reusable components. We used this structure because while it establishes the consistency necessary for an organization as large as Penn medicine, it also allows for the high degree of flexibility, modularity and scalability.
Learn more about atomic design in the Figma Kit.
User-centered
The development of the new pennmedicine.org website and these accompanying design standards are rooted in user-centered design principles. What this means is that we prioritize the experience of our target audiences, and have done extensive research to understand their needs.
We are also deeply committed to web accessibility, and have built our design system to adhere to industry best practice and compliance with WCAG 2.1 AA Accessibility Standards.
Learn more about Penn Medicine’s accessibility standards.
Related resources
Contact
For more information about this standard, email: web-standards@pennmedicine.upenn.edu