Back to Work

2024 · UX Design Intern

Designing For Teams and Systems

During my internship at Dotdash Meredith, I worked across three teams and systems, designing internal tools that supported editors, advertisers, and platform teams. My work spanned early-stage concepting, interaction design, and design system improvements within a large-scale publishing ecosystem.

Company

Dotdash Meredith

Focus Areas

Design Systems, Storyboarding, Competitive Research

Tools Used

Figma, Storybok, Jira

Internship Context

Dotdash Meredith(now People Inc.) operates at massive scale: managing dozens of editorial properties, millions of monthly visitors, and complex stakeholder landscapes. As an intern, I had the unique opportunity to work across three distinct product areas, each with different constraints, users, and design challenges.

This internship taught me how to navigate ambiguity, work collaboratively across teams, and understand how design systems and internal tools are the foundation of editorial success. My work spanned zero-to-one thinking with new tools, extending existing systems, and identifying small improvements with outsized impact.

CHAPTER 1 Apiary: Product Database

Designing a data-heavy internal tool from scratch

The Problem

Across most of Dotdash Meredith's brands, there are articles that rate and review products across industries for their viewers. Before these articles are created and published, editors need a commonplace to store and add products as they come forward.

Target Users

Publishers

Need to find product information quickly while writing

Editors

Need deep filtering, searching, and bulk editing capabilities

Key Design Questions

Which data columns matter most? How do we balance density with usability?

How can we best integrate filtering and searching to increase accessibility?

Should we optimize for power users or first-time editors?

Design Rationale

Information Architecture

I explored two approaches to surfacing the main user actions of search and filters. A top bar design maximized table real estate while a sidebar design improved discoverability and reduced information congestion. However, this design introduced layout complexity on smaller screens.

Workflow Optimization

Based on user stories, I improved how users reviewed individual products within the database. While the table view offered efficiency and scannability, many products contained complex data that required deeper inspection. I designed a slide-out preview panel that enabled users to access detailed product information without leaving the table context. This solution balanced density with depth, improving workflow efficiency and increasing conversion rates.

Role-Based Access

I also designed the preview panel to dynamically adapt based on user permissions, creating distinct view and edit variants. This ensured that contributors could efficiently review product information while only authorized users could make changes. I reduced the risk of accidental edits, clarified user responsibilities, and maintained data integrity without adding friction to the workflow.

CHAPTER 2 Bellatrix: Rich Media Editor

Designing within an existing, constraint-heavy system

The Product

Bellatrix's Rich Media Editor is used by hundreds to create and stage SPLA ad products. This stage editor and its panels allowed designers to showcase featured products and important information in their advertising.

My Contributions

I prepared designs for the sidebar specifically to incorporate usage of text screen items, allowing item customization when adding them to the stage. To avoid disrupting existing workflows and familiarity, I designed the sidebar utilizing components from the design system and useful properties for versatile editing.

CHAPTER 3 Ivy and Meridian: Design Systems

Improving consistency and usability at the system level

Modal Components

Within the Ivy Design system, the modal components were built to be resuable and adaptable but in certain edge cases, help text expanded too far, pushing the buttons out of view and preventing further user actions.

To combat these usability and visibility issues, I designed a secondary close option: a persistent 'x' close button.

Error States

The error page components were initially designed with inconsistent iconography and primary actions, leading to confusion in their usage.

I replaced the ecosystem specific logos with a universal error icon and standardized the actions associated with the error messages. I designed two external error message variants: one with a single primary action link (e.g., to Slack or another page) and another with a primary reload button

Migration and Maintenance

During the Meridian team’s design system migration, large-scale color and typography variables required a comprehensive update. I used structured spreadsheets and trackers to map primitive color and font tokens from legacy naming conventions to a new standardized system. I then created and validated branches of the updated tokens in Figma before merging them into each brand vertical’s platform guides. This approach reduced rollout risk, maintained visual consistency, and enabled teams to adopt the new system in a way that aligned with their individual brand themes.