FRAME

Designing an interactive media landscape that updates in real time

Last summer, my coursework in the advanced media management program began with MMI 617: The Changing Media Landscape, where we were introduced to Evan Shapiro’s Media Universe Map, a galaxy-style visualization of the media, tech, and entertainment ecosystem. As part of an independent study under the guidance of my program director Prof. Adam Peruta, I designed an interactive version of the media landscape called FRAME (Framework Representing the Architecture of the Media Ecosystem) inspired by Shapiro’s map with the goal of integrating a stock API to enable real-time data updates.

DISCLAIMER: This project is currently in progress.

Role
Product Designer

Tools
Figma

Timeline
Jan. 2025 - Present

RESEARCH & PROBLEM

So you're telling me I can't use planets?

This project was designed with future graduate students of the advanced media management program in mind, many of whom are international students and/or enter without a background in media or communications.

Problem Statement: The Media Universe Map is a powerful but static visualization of the media ecosystem, limiting user interaction and deeper exploration. This project aims to reimagine it as an interactive, user-friendly digital experience for greater engagement and insight.

User persona: Tyler, 23-year-old advanced media management graduate student, exploring the media landscape for the first time

User needs statement: "Tyler needs a clear, interactive way to explore the media landscape because, as someone new to the industry, he must quickly understand how major companies and sectors connect and compete."

Making a direct, one-to-one interactive replication of Shapiro’s current model would have been straightforward, but that wasn’t an option. This led to the question at the core of the project: how can you represent a big-picture view of the major players in the media landscape—without relying on planets—and make it interactive and dynamic?

IDEATION & WIREFRAMING

How do you visualize the media landscape?

Initial sketches focused on the high-level overview page layout, with a key challenge being how to visually represent the vast disparities between both companies and industries on one screen in a simple and intuitive way while still ensuring smaller companies remained accessible and clickable for users to explore. This ultimately proved to be the most complex aspect of the project.

While working through a creative block on the high-level overview screen, I pivoted to designing the company profile page. Prof. Peruta and I first focused on identifying the information that would be most valuable and relevant to users. The finalized content structure included the following key elements:

Market cap

Annual revenue breakdown

Leadership team

A comparison feature

A timeline of major mergers and acquisitions

Below is an overview of the design evolution from low- to high-fidelity wireframes.

I don't even know what masonry is

I finally broke through my creative block during a conversation with my web design professor, David Johnson, who suggested using a masonry grid for the first iteration of my portfolio. While I ultimately chose a different direction for the portfolio itself, the masonry grid layout proved effective for showcasing both the relative scale of different industries and the companies within them on the high-level overview page (thanks, Prof. Johnson). Below is an initial exploration of the grid layout, from low- to mid-fidelity wireframes.

NEXT STEPS

So... what's next?

FRAME is my independent study project for this semester and will be completed by late April. If you're interested in seeing the final product and completed case study, feel free to check back then! Here's what's coming up:

High-fidelity prototyping: Prof. Peruta and I ran into some challenges when translating the masonry grid to a high-fidelity prototype—mainly, how to present the top 10 companies in each category when many lists were dominated by the same conglomerates. At the same time, we wanted to preserve the framework’s core idea: that these overlaps are exactly what define the media landscape. We're currently working through these issues.
User testing: Once a few company profile pages are complete, I plan to share them with peers in the advanced media management program to evaluate whether they find the user flow to be intuitive and the contents to be educational.
Development: Once I am confident in the prototype, the design files will be passed on to Prof. Peruta to actually develop into an educational tool, hopefully in time for next year's advanced media management cohort.

REFLECTIONS & LESSONS LEARNED (INCOMPLETE)

No planets, no problem

FRAME seeks to reimagine the Media Universe Map not as a static visualization, but as an interactive educational tool. This product focused on enhancing content exploration, allowing users to easily navigate company-specific data, industry relationships, and broader context. This shift in purpose required rethinking the information architecture, interaction patterns, and visual hierarchy to support a more investigative, user-driven experience. I hope that the result will be a tool that empowers users to ask smarter questions and uncover meaningful insights about the key players shaping the media industry. While the project has yet to be complete, I've already learned a few lessons:

Inspiration can come from anywhere. I was stuck on the high-level overview page layout for a while, unsure I'd ever land on something that felt right... until a conversation with Prof. Johnson sparked an idea that finally clicked.
Flesh out the user flow before jumping into prototyping. I spent so much time focused on the map interface, and got so excited when I found a concept that worked, that I overlooked the logistical complications it introduced to the overall user flow.