Cataloging the Ads, Articles, and Artwork from Yesteryear’s Magazines

information architecture   

my role

Lead UX Designer, Lead UX Researcher, Lead UI Designer
goal
keyboard_arrow_down

This project aims to create an engaging platform that allows users to explore the cultural and artistic trends of early magazine design and advertising, offering a visually rich and historically significant resource for designers, researchers, and enthusiasts alike.

solution
keyboard_arrow_down

The answer is RetroMined.com, a meticulously designed digital archive that preserves and showcases an extensive collection of mid-century magazines.

Built on a deep architecture, the platform provides structured access to advertisements, articles, illustrations, photography, cover art, and even period-specific recipes.

With a robust search and filtering system, users can explore by decade, publication, topic, or visual style.

discovery phase

Activities in this phase:
  • Competitor audit
  • Heuristic review of competitors
  • Creating the site's underlying architecture
  • Creating the site's taxonomy and tagging structure

competitor audit

Through an analysis of analogous websites, I identified the key features and functionalities that users expect from sites of this kind.
A scrolling image showing the various websites used during the competitor audit
scrollable

heuristic review

To delve deeper, I conducted a mini-heuristic review on each site to evaluate how elements of their design either supported or hindered usability.

This approach allowed me to identify effective design treatments as well as areas that should be avoided.
A scrolling image showing the heuristic review data
scrollable

outcome of competitor audit and mini-heuristic

accessibility

All but one website scored above 85% on the Lighthouse accessibility scan, demonstrating a strong commitment to inclusivity.

light & dark

None of the audited sites offered users the option to switch between light and dark modes, a feature that could further enhance accessibility and user preference.

layout

A consistent content layout was identified in 40% of the audited sites, with a 4-grid system commonly used for item listing pages.

navigation

All but three sites effectively utilized breadcrumbs on item detail pages, aiding users in understanding their location within the site's hierarchy and facilitating navigation.

aesthetics

Sites with product catalogs ranging from 1,000 to 5,000 items typically showcased visually appealing designs. Those with smaller or larger inventories prioritized functionality over aesthetics.

color palette

The majority of sites (87%) employed a predominantly light color palette.

competitor rank

The findings from the competitor review were plotted on an impact matrix to see which of the competitors were most closely related to Retromined.
"Bubble chart impact matrix showing competitor analysis for Retromined. The X-axis ranges from 'Competitively weak' to 'Competitively strong,' and the Y-axis ranges from 'Heuristically weak' to 'Heuristically strong.'

content inventory

An in-depth analysis of a subset of the collection was conducted to identify key patterns and characteristics. These insights informed a card sorting exercise, which helped shape the site's architecture and filtering criteria.
"Screenshot of a detailed spreadsheet showing an analysis of advertisements from a vintage collection. Each row represents a unique ad with columns for brand, tagline, category, sub-category, color treatment, media type, layout, and year.
scrollable

tagging content

Effective tagging structures content in a way that enhances searchability, organization, and user experience.

A well-planned tagging system balances broad categories for easy navigation with specific keywords for precise search results.

card sorting

Card sorting helped categorize the content into clear, identifiable groups, which later served as the foundation for the site's architecture and filtering system.
Card sorting diagram displaying categorized content used to develop the site’s architecture and filtering system. Categories are listed at the top in black, each with yellow subcategories beneath.

sitemap

A well-structured site architecture is essential for effective web design. Given RetroMined's extensive content spanning multiple content types, a smart and intuitive architecture is crucial to ensure seamless navigation, efficient searchability, and an engaging user experience.
Diagram of RetroMined’s site architecture showing how content flows from a central database into listing and detail pages.
Above: Several sitemaps were developed and refined before arriving at the simplest and most effective structure.
Many tags emerged during the initial content audit, though some required refinement to better align with users' mental models. In certain cases, Google Ngram was used to validate and optimize tag selection.
Google Ngram graph displaying the frequency of terms related to 'car' from 1900 to 2019.
Some terms can be quite ambiguous. In the transportation category, "car" emerged as the most widely used term compared to other synonyms, making it the preferred choice for clarity and consistency.

design phase

branding and mark

In the context of RetroMined.com, "RETRO" emphasizes its focus on preserving and showcasing historical content related to magazine ephemera.

"MINED" represents the vast collection of magazines, emphasizing the effort to unearth and preserve historical content while subtly evoking "MIND," reflecting the deep passion, and dedication involved in curating such an extensive catalog.

evolution of navigation

Given the volume of content, a big-box navigation style was necessary to ensure clarity and ease of use.

However, the design underwent multiple iterations.
"Screenshot of a big-box navigation menu for an advertisement archive site. The left sidebar lists top-level categories
Above: An early design utilized a left-side vertical navigation for each category. While this approach provided full visibility for each sub-category item, it resulted in a layout that felt heavy and visually cluttered.
"Screenshot of an updated big-box navigation menu for an advertisement archive website.
Above: Refining the structure of each sub-category helped create a cleaner interface, but for some sub-categories this refinement would result in a negative experience.
Screenshot of an updated big-box navigation menu for an advertisement archive website.
Above: The new sub-category structure meant smaller sub-categories would appear sparse and lacking visual balance.
Screenshot of an updated big-box navigation menu for an advertisement archive website.
Above: The final navigation restored the original sub-category structure but limited the display to the top five items per category. This approach kept the interface streamlined, relying on the site's architecture and filtering system to handle deeper content exploration.

visual layout

To keep the focus on the site’s content, it was imperative that the interface remain free from distraction. This meant keeping detail where it was most important and removing it where it was superfluous.

user testing

Mobile Navigation

There were several opportunities for user testing. One key area was the mobile navigation experience.
Option A: Expanding Navigation
Each submenu expands from an accordion.
Option B: Multi-screen Navigation
Each submenu gets its own dedicated screen.
Conclusions
User testing showed that 85% of users preferred Option A: Expanding Navigation.
Reasons cited included:
  • It was more familiar
  • It looked cleaner and easier to use
  • Accordion menus can preload faster
  • It matched users’ mental models
Option A (clickable-select "advertisements")
Option B (clickable-select "advertisements")
Screenshot of the RetroMined homepage, showcasing a digital collection of magazine and advertising ephemera. The page opens with a bold tagline: 'From cover to cover, a collection of magazine and advertising ephemera,' set above a bright, modern living room with vintage magazine covers displayed on the wall.
Screenshot of the 'All Advertisements' page on the RetroMined website. The page header includes a large 'All Advertisements' label over a photo of framed artwork on a modern interior wall.
Detail page on RetroMined featuring a 1958 DuPont advertisement for Cellophane. The main image shows a smiling stork delivering a baby wrapped in transparent cellophane with the headline: 'The best things in life come in Cellophane.'

Leveraging AI

Knowing a very small team would be responsible for upkeep, AI was incorporated to create a library of screen graphics, ensuring consistent visual treatment with minimal effort.

next steps

The magazine collection is currently being scanned, digitized, and prepared for upload, with an estimated launch in late 2025.