Teenie Memories

Discovery

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. 

Look & Feel 

Color

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. 

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. 

Typography

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.

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

‍

‍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.

Conclusion

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.