Systems Design

Yahoo.com

Here's a story about the time I worked with a ton of people attempting to redesign Yahoo.com and its media properties. I hope this provides some insight into how a big online-techy-media-ad-server thing gets made. I hope this can help someone do better than me.

homepage

Concepts

Before we narrowed in on a few design directions to test, several people of overlapping groups met, concepted, reviewed, rebuilt, re-reviewed, considered, re-consisdered, justified, unjustified, I would say, about 60 concepts for yahoo.com.

And this was just during the time I was there. This wasn't Yahoo's first redesign. But it was one that hoped to realign all the fractured bits and pull Yahoo out of it's downward spiral. Too dramatic?

concepts

Layout

Templates for all! So, you’ve got the fourth most-visited site in the world, some 150+ million monthly active users in the U.S., alone. Or maybe it was daily active users, whatever. Either way, the number is so big, it doesn’t change the approach to design.

In addition to the loads of users, we’ve got advertisers, we’ve got content partners up to wazoo, we’ve got editors for each kind of content, and we’ve got a lovely little algorithm trying to sort it all out. One could easily come up with 100s of templates to take care of all the combinations of content that come out of these puzzle pieces. And we did.

But, eventually I culled it down to a proper set of eight page templates. No matter if your page is a video, Yahoo Finance, a soccer game, one of those weird magazines (RIP), or I dunno, a plain old article, they all work in a lovely harmony.

templates

Page Behavior

Why responsive? Users’ computers. Loading speed. Our ideal min-width was still too wide for about 1/4 of users. Designing for that quarter would make a billboard ad take up the top third of the page. I made it responsive to cram as much content as we could above the fold, no matter your browser width. You’re welcome.

And while I was on and on about how “there is NO FOLD,” well, for Yahoo, actually THERE IS. See, Yahoo.com is often a little detour on the way to Yahoo Mail or Yahoo Search. And because those links are at the top of the screen (and don’t I dare move them!), the majority of people will not scroll the page at all.

Not to mention, it’s harder to scroll on a PC laptop (majority of Yahoo’s users). I kid you not, our user tests revealed people clicking on the little tiny arrow at the bottom of their browser’s page indicator bar to scroll down. I blame shitty PC scrollpads.

breakpoints

Cohesion

Here's a bunch of the pages. While my team was heading up Yahoo.com and the Media design system, individual properties, like Sports and Finance, had specific needs whose teams had the expertise to make. We needed to create a system that was flexible enough to handle their custom live game coverage, stock charts, and such and such.

pages
mobile pages

Rhythm

I want people to scroll, scroll, scroll. Load one more batch; I've got a few more ads I want you to see. When you are getting things for free, you get ads and we collect data on you. That's the deal.

One way to encourge scrolly scroll might be: design a nice rhythm to the amount of items that can be seen within the viewport. Variables to test include height of a card, window height of browser, font-size, line-height, summary length, image size, image ratio, and content type.

The was a whole separate team that was creating the algorithms for the main feed. I suspect everyone involved felt a bit beholden to advertising and Kardashian articles. This is mainly due to the fact that ads give us money, and well, those Kardashians were just getting so many clicks. The problem of course is that they aren’t happy clicks. They are angry clicks and annoyed clicks. Wouldn’t you know it, anger gets people to click on an article more than not-anger. Click a Kardashian, get similar articles in your feed. Click on more things that make you angry. More clicks = more ads. And voila. A real pickle we find ourselves in, today, huh?

If we take ethics out of the equation for a bit, I’ll talk about the pacing. Based on the common browser height, I proposed a feed whose cadence was designed to deliver batches of a satisfying variety of content with juuuuust enough of a break between ads to keep people scrolling. Parts of this included determing the height of the cards. Did we ship that? I don’t recall. Did we bucket test it? If we did, there were too many other variables being tested to know what was effective. Lesson here is JUST PICK ONE and then iterate in isolated bucket tests after the new site is shipped.

pacing

Revenue

Yahoo.com was selling a ton of display ads; its sales carried the company. Million-dollare homepage, they called it. Any grid or page template needed to support several display ad sizes, including this gigantic, custom Apple billboard that is not one of the standards.

We’ve also got to account for the other two moneymakers: native ads and searches. Each search from the homepage makes money from the sponsored results. Native ads masquerade as articles in the feed. Native ads and articles are twinsies. I thought Twinsies was a good name, but they called that ad platform Gemini.

Yadda, yadda, we tested a lot of search boxes and buttons, and a lot — a lot — of feed variables. (Oh, I just recalled it was referred to as “the stream” not a feed. Tomato potato.)

ads gif

Visual

We did all the usual design systems thingies: principles, styles, components, css libraries, and design toolkits. One of my favorite things was choosing font sizes based on the device type and viewport height. However far a screen is from a person's eyeballs determines the size of the text (the bigger the farther). And depending on the viewport height, we can adjust summary length to fit a cetrain number of cards in the window.

Speaking of cards. We had slat cards and tile cards. Well, I'm not sure that terminology caught on, but I kept going with it, anyway. Stubborn designer. For desktop, the main feed was composed of slat cards—that is, cards that are attached to one another and do not have rounded corners.

Based on a matrix of content type (e.g. video, gallery) and importance (e.g. editorial spotlight, top 5 toilet papers that make a good substitute for Kleenex), we've got—you guessed it—a matrix of card designs.

cards

Flexibility

A third axis is the viewport size (this determines when a slat card becomes a tile card, when an image becomes full-width, etc.). Cohesive, not consistent. We can biggie smalls any piece of content. Mighty morphing power cards. I think the professionals call it progressive enhancement and graceful degredation.

Simple enough to take any of these pieces of content and apply a card style to them. That was kinda that point. Same content summaries in the main feed, on a phone, on the right-hand column, and so on. In this system, nearly any piece of content can be presented from a pip to a full-page article. By pip, I mean, like an icon with a three-word text string next to it. Where does that work even come from? I dunno.

progressive enhancement

Newsworthy

Finally, let’s discuss the news. The entertainent. The words and pictures. The content. Now that we’ve got a system set up to be addictive and serve all the ad types, we can fill in the blanks with content.

Okay, maybe that’s not how everyone sees it, but I don’t recall seeing any content directives such as “We must show the user three things they’ll enjoy, per session.” It was more like, “We need a user to spend n minutes here and click on n things.” Or “We just made a partnership deal with x, so we need to display their video on the right rail.”

BTW, we had a team of editors that was basically pit against the alorithm, so that sucked. Ideally, they were meant to work in harmony: editorial picks to guarantee quality content within the algo-driven content we think the user wants and the ads we need to drive revenue. It became a numbers game. If an editorial pick doesn't get the clicks, then...why waste the real estate? Not only that, but the editors also had tools that were surfacing content across the Web which had viral-potential. So, like, as an editor, what are you gonna do?

placement

Takeaway

My favorite kind of takeaway is food, but my second favorite is trying to learn somehting from all the mistakes I made at a job. And maybe, if I was lucky, I did a couple good things, too.

[I never finished writing this.] main issue was with site visitors not understanding the impact of their behaviors on the site. whether they were logged in our out, the site looked the same. there was no obvious, simple, and enjoyable way to personalize what they were served (ya, u need all three). there was no understanding that their clicks shape what they see.

also that mail, search, media, and settings were all diff groups with diff quarterly goals and diff designs.

For Yahoo (2013-2014), with creative direction from Jackie Goldberg along with input and help from so many amazing people who were on a wild, wild ride.