A New Herald
or: An Unsolicited Redesign of My Local Newspaper’s Website
I started this experiment as a revisit to an older project. A short while ago, while learning a new design tool, I decided to reimagine my local newspaper’s website, The Miami Herald. I’ve been troubled by their seemingly nonexistent effort to offer a thoughtful and memorable user experience. While none of them are anywhere close to perfect, The New York Times, Boston Globe, LA Times, and Chicago Tribune are all drastically friendlier to use, each at least attempting to push the boundaries of online journalism and storytelling in their own respect — and I strongly consider my local newspaper to have the potential of achieving and surpassing the status and reputation of those long running publications, at least on our deserving South Florida level.
The Miami Herald was, in fact, founded in 1903 — just 52 years after The New York Times.
What The Herald?
Since 2014, only a year+ later, The Herald has updated their website not once, but twice — with little to no user interface (UI) improvements of layouts, grids, colors, typography, depths, navigations, flows, hierarchies, icons, loaders, modals, forms, fields, buttons, carousels and/or other components. Of course, without user data, this is my subjective view based on my 12+ years of new media design and development experience.
With terrible UI, terrible user experiences (UX) are sure to follow and boy does it ever.
- For some reason or another, The Herald finds it necessary to hide even their new website announcement behind their paywall:
“Why would anyone in their right mind hide the content that visitors are there to see?” Andy Beaumont
- The Herald loads 42 trackers on their homepage and up to 73 trackers on other pages. 73 trackers! This is wildly irresponsible and (yet another) major disservice to it’s users, readers, and customers. For comparison, The Boston Globe loads around 11 max.
- The Herald homepage, on a typical 4G network, takes up to 9 seconds to load. That number skyrockets to 28 seconds on 3G.
47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds. Kissmetrics
- Their events page didn’t seem to get any of their design updates, not that that would’ve helped, leaving it looking and feeling like something from the worst of the 90s.
- Their search page, featuring 2 separate search input fields for no reason, and lazily uses Google’s Custom Search engine with zero actual customization and 99% of the results leading to their paywall.
- Their weather page is embedded from Weather Underground, zero actual reporting here, they copied and pasted more badly implemented 3rd-party content. To top it off, some of these are actually broken and would take 5 minutes to either fix, hide, or remove altogether.
- I’m not even a major sports fan, but their sports page fails to feature scores or schedules — this, to me, seems like an absolute must.
- Two of these buttons are links, while the other is not (and none are aligned properly). This awful pattern is repeated throughout the entire site:
- The Herald’s navigation menu is just plain difficult to use, I constantly had to restart the dropdown process, repeating my movements and actions slowly and cautiously.
I can definitely continue my critique, but I feel this a good place to pause and remind you these findings come from only an hour of analysis.
It saddens me to see such a recognized brand that influences so many in my community have such a poor approach to informing and serving their readers online.
Most of my research and general rationale for this quick project were centered around a strong belief that local newspapers have failed as a dominant business model not only because of their inability to embrace a new digital medium — that’s a given — but because they continue to barely do so, now some 15 years later, it’s beyond irresponsible, it’s just dumb.
Local large city newspapers should have no holds barred, and with the utmost relentlessness, begin paving the way in designing and developing remarkably memorable user experiences.
As our 4th branch, our local media outlets have a social responsibility to inform us. As a business looking for investment and profit, our local media, especially long-established newspapers, have an ever-narrowing opportunity to dominate local landscapes again — through their websites, apps, and digital services.
Note: while dissecting The Herald’s website, I learned that their parent company, Knight Ridder, was sold to California-based The McClatchy Company in 2006 (link) and only 2 years later, “burdened by debt and a steep slide in newspaper advertising,” McClatchy attempted and failed to resell The Herald (link). Learning this sheds invaluable light on their mediocre website, representing a company still in disarray while struggling to navigate an industry demanding large-scale and risky adaptations.
Local News as a Service.
One thing I’ve noticed using news aggregator websites and apps like Flipboard, Facebook’s Paper, Feedly, or even Google News, is that for national and global news, they’re irreplaceable and ideal for quick consumption of major and breaking events. However, these services lose all intimacy and emotion when delivering local news.
Social networks don’t do much to support and foster those powerful connections either, with most of a visitor’s “news” feed merely containing content that only reinforces their tastes, viewpoints, and preferences.
“When information is cheap, attention becomes expensive.” James Gleick
Local newspaper have a golden opportunity to re-spark local awareness and re-capture the attention of the community by embracing modern application design and development, focusing on performance and simplicity, and offering a stellar user experience reenforcing trust and expertise.
The Herald’s exceptional content is right there, they’ve got the talent, but their platform and methodologies have completely failed. A design-driven, ground-up approach is desperately needed.
Always Iterate, Never Finish.
Along with the aforementioned publications, I dove deep into the websites for USA Today, The New Yorker, Washington Post, Vice and the online-only sites Bustle, The Daily Beast, and of course, Medium.
I fully understand an unsolicited redesign of just the homepage of a massive website like The Herald is a naive and futile attempt at solving even bigger problems than the few I’ve listed, but this has been a personal exercise in executing rapid full-stack design decisions revolved around readability, usability, modularity, information architecture, color theory, and a strict, deeply thought-out design language.
This is not necessarily the full scope of an ideal introductory design process, which is highly influenced by budgets, goals, resources, and data.
Preferably, a ton more research, analytics, metrics, data gathering, testing, iterating, wire-framing, and technology stack and debt considerations would be required to undergo such a large-scale project.
I designed and wrote this over the course of 2 days.
I think it’s also important to note, I am a firm believer in a “mobile first” approach, and more and more leaning toward a “mobile only” approach to web and application design, however, for this experiment I decided to focus on an immediate and complimentary desktop-wide design — mirroring many functions and components the current homepage provides.
My experience as a designer would not allow me to ignore responsiveness throughout the design process and it should be somewhat easy to picture the below design fluid to many screen sizes.
As well, my experience as a developer influences core application functions such as loading, infinite scrolling, asset management, animations, transitions, interactions, performance, and content searching, filtering, sorting, and curation — all of which are not displayed here.
Some features and considerations include:
- A sharp header with an option to alternate background images around a given context, event, holiday, etc. (an example is featured at the beginning of this post).
- Some “above-the-fold” focus on essential information at a glance.
- Eye-catching treatment to inevitable and prominent advertisements (something I forgot my first time around).
- Intuitive taxonomies accented by color and placement.
- You can visit my on-the-fly typographic leading and baseline guides here.
Typographic rules fully inspired by the ever-resourceful Teehan+Lax.
It’s clear Miami Herald’s product has changed. It is no longer a newspaper or a website or an app — it’s a platform for hyper-local news, stories, updates, events, profiles, and a discovery engine for local goods and services.
As an idealist, I wish for minimal advertisements and noise, and maximum stories and signals. As a cynic, I am familiar with the burden and dilemmas of most pre-Internet organizations. Even with the success of so many media-based companies, these local newspapers are still finding it too risky to go all-in on digital and offer the most well-considered user experience.
Display advertising clickthrough rates are .1 percent. - DoubleClick
You are more likely to climb Mt. Everest and reach the summit than you are to click on a website banner ad.
In wrapping up and reviewing my experiments, there’s still a lot I appreciate and enjoy from my first attempt last year — and my second attempt above is an obvious extension of a similar approach — yet, with the enormity of such a complex project and the fast-paced environment of ever-changing design and development trends, I’d almost certainly have an entirely different outcome if I were to begin again or with any actual intentions to fully design and develop such a grand product.