An Eye-Catching Marketing Website to Empower Individuals to Make Informed Health Decisions

Evolving Web worked closely with Planned Parenthood Direct (PPD) to design and build a mobile-first marketing site in Drupal 10 to drive people to download the Planned Parenthood Direct app. The website lets users know about which reproductive health services are offered in each different state in a clear, visual way. Thus users are not driven to download the app if the service they need is not available in their state. 

Our goals included: 

• Building a secure bilingual site in Drupal 10 that drives users to download the PPD app,
• Applying a mobile first approach, with all design deliverables created first for mobile and then for desktop,
• Creating a style guide from branded assets - colours, typography, images, language tone, design elements to provide an overall visual aesthetic of a brand - following best practices related to accessibility WCAG 2.1 AA.

Planned Parenthood Direct, a 501(c)3 non-profit ancillary of Planned Parenthood Federation of America, offers reproductive and sexual health care on the go. Services vary by state and include birth control, urinary tract infection treatment, emergency contraception, and the abortion pill. With a mission of providing Trusted Planned Parenthood Care from Anywhere, PPDirect works to create and foster connections between patients and clinicians both virtually and within Planned Parenthood’s network of health centres.

The main objective of the project was to build a captivating yet approachable website to compel people to download the Planned Parenthood Direct app. 

Secondary objectives included: 

Ensuring users are able to select the state they’re located in and see the services offered, to prevent them from downloading the app then finding out the service isn’t offered and getting frustrated. 

Creating a new visual brand identity for Planned Parenthood Direct that resonates with the target audience and while still staying true to the Planned Parenthood brand. 

Our work included: 

Design: 

• Art Direction: We crafted a compelling visualization of the brand’s essence, values and attributes as a stylescape. This provided a clear design direction that can be applied across all relevant touchpoints, including the logo, typography, colour palette, imagery and UI elements.
• Wireframes (High-Fidelity Mockups): Using a mobile-first approach, we build high-fidelity mockups that showcased not only the target audience journeys, the layout of elements and overall flow.
• A style guide with reusable components following WCAG 2.0 accessibility guidelines, which could be reused in the future, allowing the website to grow as needed. 

Development: 

• Drupal 10 to leverage the latest Drupal features and robust security
• Decoupled architecture using a Next.js framework for the front-end
• Cloud hosting on Pantheon

Different states have different services and users need to be able to easily see exactly which services are available in their state. It also needs to be easy for the client to modify the services available within each state since these can change. 

Security was an important consideration since the client’s work has become very politicized due to the current political climate in relation to abortion and family planning and they could become susceptible to attacks. 

In order to provide service to a large, diverse demographic, there was a need to be able to easily translate the website to Spanish and easily add other languages at a later time. There was also a need to be fully accessible up to WCAG 2.1 standards. 

It was essential to find a way to respect the brand identity of the Planned Parenthood parent brand while creating a distinct Planned Parenthood Direct sub-brand with its own visual identity within the parent brand that resonated better with the target audience.

To help Planned Parenthood Direct achieve their goals, we used a mobile-first approach, where we prioritized mobile designs and layouts and then adapted them to desktop. 

Our work included: 

• Call to action (CTA) buttons in multiple places throughout the pages, positioned in key places to act as thumb stoppers to prevent scrolling, along with graphics to support those CTAs all continuously drive users to download the app.
• Progressive disclosure to ensure a clean site coupled with uncomplicated functional pages, presented on a clear layout helps users easily find the information they need. 
• A designated page for each state which allows clients to clearly see which services are offered in their state. Additionally, these state-specific pages optimize search engine results, making it easier for individuals to find the services they need when searching online. 
• A state-service relationship that allows content editors to easily remove or add a service to a state. 
• A fully accessible website up to WCAG 2.1 standards, including a style guide that ensures the content editor produces accessible content. 
• A library of reusable components that can be used by the client to create new pages, in order to grow their website. 
• In order to address security concerns, the website was built using a decoupled architecture featuring a static front-end page using a Next.js framework and a Drupal powered backend.
• The Drupal CMS is used to store content that will be used to generate the static HTML pages. This means that the content is added to the front end when the static HTML files are built. In this way, there is no dynamic code running on a server that can be exploited.
• Hosting on Pantheon also provided multiple layers of security protection, including fully managed HTTPS certificates, and DDoS protection to prevent denial of service attacks, along with container-based cloud architecture that allow for partitioning of the operating system into dedicated spaces. 

One of the main goals was to create a distinct sub-brand for PPD within the Planned Parenthood brand. Advocacy is a large part of Planned Parenthood and the branding reflects that, with a serious tone and dark blue colour as their main brand colour. However, for the PPD website, the client sought a different sub-brand which resonated more with the younger audience and provided a reassuring tone. 

Our design work included: 

• Design principles that look like social media - visually driven with bold graphics and bright colours to branch out from the main Planned Parenthood site while still keeping some aspects of the parent company branding, including the dark blue colour. 
• A sticker set to add a youthful component while also helping to visually orient users and promote advocacy and supportive messaging. 
• Clear visuals to distinguish the different services, including a different background colour and graphic for each service. 
• A set of bold patterns to represent the products in a de-complexed, non-stigmatising, light hearted way, in square patterns suited for mobile-first design and using the colour white for all the patterns as a unifier. 
• A concept for the homepage that features a photo of a user pulling contraceptives out of their pocket, coupled alongside a visual of the app, to signify that the app is always with you in your pocket. 
• A blog page which evoques Planned Parenthood’s activist side, featuring dynamic image sizes to add interest and advocacy messaging such as “Be Strong” and “Be Heard” to maintain an element of the parent brand’s activist roots.

The new website is a robust, secure decoupled Drupal 10 site that is strategically designed to drive users to download the PPD app while also providing the information users need in a clear format. To ensure it resonates well with the target audience, it leverages mobile-first design and the creation of a distinct sub-brand that features bold colours and supportive, destigmatized messaging. The new Planned Parenthood Direct website is instrumental in continuing to support reproductive rights and ensuring access to reproductive and sexual healthcare, which is now needed more than ever.