photo rotationphoto rotationphoto rotationphoto rotationphoto rotationphoto rotationphoto rotation

The Pittsburgh Foundation Website Redesign

Role //

Interaction designer


Duration //

June 2023


Tools //

Figma, HTML5, CSS3

The Pittsburgh Foundation wanted to refresh of their website. I worked with a team to update the styling and layout of the website, focusing on interactions to the people and events pages.

cover image

Project Description

For this project, the team was tasked to update and freshen the look and feel of The Pittsburgh Foundation (TPF) website, adding new layouts and functionality. Additionally,the website retained the basic global structure (menus, headers, footers). I was tasked with designing the staff page, the individual member pages, the events pages, and prototyping some of the designs from Figma.

Design System

Typography and color palette

Contextual Interview

Buttons and Components

A part of the redesign was to create components that gave the Pittsburgh Foundation website a new and fresh look. This provided for an opportunity to explore different interactions that could trigger when users interacted with components.

Card and Event components

Contextual Interview

Final Pages

People Page

Contextual Interview

Individual Member Page

Contextual Interview

Calendar Page

Contextual Interview

Event Page

Contextual Interview

Development

To test the design of the card component prototype, I developed 3 different interactions when the user hover overs the cards using HTML5 and CSS3. The team ultimately agreed that the colored border was too much because of resizing issues, and decided to go with the direction of the image scaling.

Card Prototypes