case study

Teenie Memories

Web Design
Designing a website for a multimedia project originally published by the Pittsburgh Post-Gazette in 2011
Contemporary photography by Rebecca Droke & Bill Wade
Hi-Fi Mockups
Information Architecture
Color & Typography
Photo Editing

Project Overview

“Teenie Memories” is a multimedia project I co-created with my Pittsburgh Post-Gazette colleague Bill Wade in 2011. To coincide with a large retrospective of Charles “Teenie” Harris’ photography at the Carnegie Museum of Art in Pittsburgh, we photographed and conducted audio and video interviews with 20 people Harris had photographed throughout his 40-year career at the Pittsburgh Courier. Our project was published as an interactive multimedia presentation on the Post-Gazette’s website and in the print edition. Additionally, we held a live community event to culminate a gallery show of our contemporary photographs at the August Wilson African American Cultural Center in Pittsburgh. 

The challenge 

Since this project launched originally, the website code broke and wasn’t viewable for a number of years. About five years ago it was redeveloped with minimal changes to the UI/UX design. As a personal project, I decided to update the project’s UI/UX design.


  • Feature the contemporary photographs prominently
  • Create a look and feel that unified the contemporary and Teenie Harris photos
  • Add audio transcripts to ensure accessibility
  • Improve navigation
  • Update content, as needed

Hi-fi mockups of website with lots of photographs


I started the project by reviewing the existing website to understand its structure and content. Then, I reviewed, organized and determined what assets would be used in the redesign. Additionally, I looked for design inspiration on other websites that were photo- or video-driven. Finally, I decided what content I wanted to update to meet the project goals. This included: 

  • Transcribing and editing the audio/video interviews and identifying pull quotes from
  • Revamping some of the titles (e.x. changing “The Pastor’s Daughter” to “Archivist”
  • Noting who was deceased

Structure & Layout

I knew I wanted to simplify the design so that the contemporary photograph of each individual and the corresponding Teenie Harris photos were all on the same page. I considered two concepts for structuring the project. Initially, I began designing the project as a one-page website and, after prototyping, decided the navigation would be more streamlined by having individual pages for each person. 

Site structure diagrams
Clockwise from left: The existing website has the contemporary photographs of each person and the Teenie Harris photos on separate pages. I explored two options for improving the site’s IA, both of which combined all contemporary, Teenie Harris photos and the interview for each individual on one page. 
Hand-drawn sketches of potential layouts
Sketches to generate ideas for the layout of the header, about, people index and main content sections.

Look & Feel 


I started with a black and white color palette but, after adding the photographs to the mock-up, it felt too stark. I started experimenting with additional colors that would add a splash of vibrancy to the design without competing with the color photographs. 

Color palette boxes with hex code information
The final color palette.

As I developed the palette, I considered how to implement each color. I started by creating multi-color navigation buttons, which were fun but too distracting. I decided to simplify the color scheme

  • Light blue: main color accent color
  • Purple: to credit work by Bill Wade 
  • Orange: to credit work by me 

In determining the final color palette, I made sure the colors were WCAG AAA accessible. This led me to switch from using dark blue to light blue as the primary accent color. Also, I defined other lower opacity versions of black, purple and orange to use with black text on a white background. 

The hover state for links to individual pages are color-coded by photographer.


Knowing that I wanted to display all twenty names with a big, elegant font face, I looked for a serif font face. Identifying “Source Serif Pro,” I then explored contrasting sans serif font faces that would be clean and bold — and chose “Libre Franklin.” 

Originally, I had a lot of different sizes and weights of text throughout the mock-up. I received feedback that reminded me to keep things simple, so I created more consistency with the font size/weight from section to section.

The credits and footer section, with a rough example of the image animation that will be developed on the live site.

Final Design

Header Design

I envisioned an animated header that combined both contemporary and Teenie Harris photos that evokes the feeling of floating memories. In Premiere Pro, I built a prototype that will assist in creating the animation during development.

About Section 

In addition to introducing Teenie Harris’ biography and the premise for our 2011 project in the About section, I expanded this section to include pull quotes and some “Best oOf” Teenie Harris photos to further emphasize the concept of revisiting memories and the past. 

Main Content Section

The main content section was the most challenging as I worked to meet my goal of featuring the contemporary photographs prominently, adding the audio transcript and updating the content.

My main considerations were: 

  • Maintaining the flow of the content — headings, subheads, photo, audio and audio transcript — so the user knows to keep scrolling down
  • Using the photo as big as possible while keeping both vertical and horizontal photos constrained to the viewport height 
  • Allowing enough space below the photo to include caption and slideshow triggers
The original, left, and final version of the main content section.

After prototyping the main content section on the homepage, it was apparent the navigation between that section and the index wasn’t a good user experience. Initially, I wanted each person’s content to be a tab that would be viewable after clicking on a person’s name in the index. However, this meant scrolling up and down on the page to navigate from one person to the next and it proved cumbersome. 

When I created separate pages for each person, I added a menu beneath the main content that would allow users to browse and navigate to each person’s page without returning to the homepage.

Animation with thumbnail photos, page titles and arrows
Navigation that allows the user to browse and jump to other pages without returning to the homepage.


I really enjoyed revisiting this project and designing an improved user experience and user interface with a retro look and modern interactions. It is important that the design reflected the photo-driven emphasis of the “Teenie Memories” project and I designed the following solutions to accomplish this:

  • Created a header and about section that played on the concept of bringing together past and present
  • Used Teenie Harris photos on the homepage
  • Made the contemporary photos prominent on the individual people pages
  • Removed low-quality headshots used in the original project and instead incorporating thumbnails versions of the contemporary photographs

The Takeaway

This project challenged me to consider the best way to navigate between a variety of different sections and pages so that the main content is easily accessible. Earlier testing would have demonstrated that my original concept of keeping all the content to one page wasn’t the best solution for users, and would have allowed me to implement changes faster. However, because I had a clearly defined style guide and components built in Adobe XD, I was able to add the “view more” menu to pages quickly and consistently.

More Case Studies

view raw