Miami New Times

Responsive news media site

Desktop and mobile views of Miami New Times home page UI.

Overview

Role

Research, UX/UI, Art Direction.

Technology

Figma

Deliverables

Strategy, UX/UI, Re-Brand

Project Type

Responsive New Media Site

Disclaimer:
This case study is the sole property of its creator and is not affiliated with any mentioned company, nor is its content. It is intended for illustrative purposes only.

Problem

Miami New Times was born in 1987,  winning many prestigious awards including a George Polk, a Livingston, and several top national honors. Through the years its digital platform has become antiquated and inundated with pop up adverts. Attempted updates seem to have only worsened the problem leading to further navigational entropy.

Challenge

This case study aims to create a logical, engaging, and “sticky” media site, with the intention of generating exponential user (reader) adoption, alternative revenue channels, and growth for the Miami New Times.

Mobile views of Miami New Times home page UI.
Mobile responsive

Outcome-Driven Product Development

Guided by principles from Lean Startup, Lean UX, and the Jobs-to-be-Done, my process encompasses three core phases: Discover, Define, and Design. Each phase is designed to ensure that every aspect of the product aligns with user needs while driving towards tangible business outcomes.

UX Process.
UX process
Desktop view of Miami New Times home page UI.
Home page, desktop

Research/UX/UI

Discover

Discover is a preliminary phase in the UX-design process that involves researching the problem space, framing the problem(s) to be solved, and gathering enough evidence and initial direction on what to do next.

Social Listening

What are real users saying? Let’s understand their pain-points.

Negative social media comments from Miami new Times Users posted on Twitter.
Twitter, what real Users are saying

Conducting Competitive Research

Understanding the nuances among competitors and benchmarking their attributes; Which competitor is number one, number two, and who’s doing something impressive? (even if they’re behind in the marketplace race compared to others).

In this way, we have a sense of the diversity of business models in play, which then allows for the insight to devise a solution that creates a competitive advantage.

Market Research

Subscriptions, Donations & Paywalls, Oh My!

Selected insights from the Reader Revenue Summit, how news organizations can build a business with their audience:

In crafting an audience revenue strategy, it’s imperative that the Miami New Times tell compelling, accurate stories about its mission, the value it provides in the world, and the member community it wants to foster. These “who we are” stories are strongest when they reflect what Users (readers) say they value and need from the news organization.

Users (readers) become members or donors when they want to be part of the larger cause that the news organization represents or when they think it represents something unique in the world.

Reader Revenue Summit.

User Adoption

There are two key concepts to understand in order to succeed in User adoption, Product/Market Fit (PMF) and Willingness to Pay (WTP).
Let's look a little deeper shall we.

Product/Market Fit, is the degree to which a product satisfies a strong market demand. PMF has been identified as a first step to building a successful venture in which a company meets early adopters, gathers feedback and gauges interest in its product(s).

Willingness to Pay, sometimes abbreviated as WTP, is the maximum price a customer is willing to pay for a product or service. It’s typically represented by a dollar figure or, in some cases, a price range. While potential customers are likely willing to pay less than this threshold, it’s important to understand that, in most cases, they won’t pay a higher price.

Pssst! Applying these key concepts from the get-go is a critical step in minimizing product failure and increasing business model success.

Green circle with text reading "will to pay".White square with text reading "User value" and double ended arrow pointing left and right.Yellow circle with text reading "price".White square with text reading "Profit" and double ended arrow pointing left and right.Red circle with test reading " Cost".
Green circle with text reading "will to pay".White square with text reading "User value" and arrows pointing up and down.Yellow circle with text reading "price".White square with text reading "Profit" and arrows pointing up and down.Red circle with test reading " Cost".
Willingness To Pay (WTP)

Profile of a likely subscriber (user)

According to Reuters Institute for the study of Journalism, the average number of people paying for online news has edged up, donations and donation-based memberships are emerging as a significant alternative payment strategy.

Common “propensity factors” that correlate with the likelihood to subscribe, as reported by publishers that have engaged in propensity modeling studies.

“Paying a subscription or giving a donation is, for my part, a way to maintain a service to the community”
- John, 42yrs
Diagram of User Propensity Factors.
Propensity Factors

Define

Now that we have data we can craft clear direction and product focus to begin to define guiding principles and layouts for the upcoming design phase.

Finding Miami New Times’ Golden Path

What motivates a user to go to the Miami New Times site? We must understand the Key Steps a user takes to find what they want and need...what they came in search of in the first place.

Diagram of news media "happy User path".
"Happy Path" of Miami New times UX

Key findings

Drivers of News Media User Experience

After analyzing user insights, a set of key drivers for a good media experience were identified as Categories, Format, Recommended, Distractions (lack of) and Current (news). These form the basis from which our UX will be built.

Suzy Repetto

Female, 22yr

I can easily search the site to find what I am looking for.

There are no unnecessary distractions on the site.

Michael Willis

Male, 64yr

It is easy to find old articles that I want to see again.

The website contains the most up to date current events.

Pat Gomez

Male, 25yr

It is easy to share a news article with friends.

The related and recommended articles are helpful.

Angela Ming

Female, 37yr

Articles are formatted in a clear manner.

It is easy to save content for later.

Zoé Ingles

Female, 29yr

News categories help me find what I am looking for.

Robert Kinner

Male, 52yr

The homepage contains a good selection of news stories.

It is easy to sort and filter articles.

Key Drivers of news UX

Social approval

Social approbation as a means of fundraising, seen as a donation “Ticker Tape”.

Humans are influenced by the opinions, choices, and actions of others. Our psychology assumes that if the majority of people are doing, have done, or believe in something, there must be a good reason to imitate.

The idea of a “group mind” or "pack mentality" has been studied at length by many greats in psychology, sociology, and economics.

By incorporating natural cognitive behaviors and the desire for validation into our design, we feature contributions as a live "ticker tape." This method taps into people's inclination to follow peer actions and their need for recognition, effectively encouraging more contributions.

Cassius R. Pledged $5
Amara G. Pledged $1
Lolo B. Pledged $5
Sam P. Pledged $15
Fatima H. Pledged $25
John S. Pledged $10
Cassius R. Pledged $5
Amara G. Pledged $1
Lolo B. Pledged $5
Sam P. Pledged $15
Fatima H. Pledged $25
John S. Pledged $10
Social Approbation “Ticker Tape”

Copywriting

Create positive cognitive anchors in the User’s mind by writing copy that Users will notice, read, and trust, this and clearly communicating value propositions and actions to take are crucial steps in building credibility and loyalty.

Writing targeted copy that resonates with users directly correlates to conversion rates (contributions).

Importance of effective copywriting

Other revenue channels

In addition to direct revenue from contributions, digitally native publications are relying on a mix of monetization approaches including advertising, corporate underwriting, foundation funding, article syndication, events, affiliate programs, word of mouth, merchandise, and book sales.

Design concepts for revenue channels and User trust.
“58.5 % of Miami Dade county’s 2.4 million residents speak Spanish, and half of those say they don't speak English well.”
-United States Census Bureau
Data point, as it relates to expanding to other language audiences

Design

Atomic Design Theory

Atomic design is a mental model that helps us think of user interfaces as a cohesive whole and a collection of parts at the same time. Akin to atoms, molecules, and organisms.

Atomic Design helps us create and maintain robust design systems, allowing us to roll out higher quality, more consistent UIs faster than before.

Anatomy of atomic site structure

Information Architecture

Taming the Beast

Years of navigational entropy has led to a lack of order or predictability thus resulting in a gradual decline of the Miami New Times website.

❌ Current Situation

The current Miami New Times’ Site Map is a disordered labyrinth, with Level 1 being comically long, going on forever, using redundant categories.

Current Miami New Times Site Map.

✅ Redesign

  • Make it as so an invisible hand is guiding Users along their journey.
  • Logical category hierarchy, align with users mental models.
  • Make it work equally well for both human visitors and search engine robots.
  • Use progressive disclosure. Make it easy to collect data, collect feedback.
  • Consider your audience and have a Spanish language option.
Redesign Miami New Times Site Map.

Who is the Miami New Times?

Aligning with local history and Miami New Times’ brand archetypes.

Font iterations.

Style Guide

DNA & Tone. Counter Culture undertones contrasted with Art Deco Nostalgia.

Style Guide

Responsive & Modular

The content strategy must be cognizant of the way Users (readers) today digest content.

By implementing a modular approach within the site CMS would allow Miami New Times team to easily build new layouts for each article type.

Responsive, modular components

Projected Outcomes

Implementing the aforementioned  improvements could generate exponential growth for the Miami New Times across several metrics.

Diagram of growth metrics trending upward.