Vanessa Li | AOL.com Case Study

page,page-id-1197,page-template,page-template-full_width,page-template-full_width-php,qode-core-1.0,ajax_fade,page_not_loaded,,pitch-ver-1.6, vertical_menu_with_scroll,smooth_scroll,grid_1300,blog_installed,wpb-js-composer js-comp-ver-4.12.1,vc_responsive

AOL.com Case Study

Design and Ship Products for Millions

Background

Five things you might not know about AOL.com

AOL.com is AOL's flagship site. It's the hub for news, entertainment, sports, finance, lifestyle, and more.

AOL properties and advertising reach 87% of adults 50+, 86% of millennials, 79% of men, and 79% women online. (Public stats)

The AOL.com homepage attracts more than 906 M page views each month. (Public stats)

AOL.com has 12.2 M daily unique visitors and 26.8 M monthly unique visitors. (Public stats)

The earliest AOL users have been using AOL.com for information and entertainment for nearly 20 years.

There have been a few times major redesign in the past two decades. Bonanza is the latest one.

Working on AOL.com

AOL.com is the core business of AOL. It has a long history, a huge user base, and a large, dedicated team working on it. I believe, in this environment, collaboration and execution are the key.

The challenges

How to provide a smooth transition for millions of users?

Bonanza is the biggest redesign of AOL.com in six years. I joined the team in the middle of the transition. We rolled out the new design to 1% of the population and closely monitored three things:

Key metrics
Feedback from users
Results of internal usability tests

We employed agile methods and kept tweaking until, eventually, Bonanza performed better than the classic AOL.com. In the beginning of 2016, we migrated all of our users to the new experience successfully.

The tools I used included Adobe Omniture, comScore, and AOL in-house tracking tools.

How to keep engaging users and improve critical metrics?

A huge project like Bonanza has a lot of loose ends, such as the inconsistency between old and new designs, pages, and missing functions. While dealing with details is fun, I pursued these highly impactful goals:

I took the initiative to reorganize all the content by building a new tag system and a new archive page.
I worked with multiple stakeholders to create a new family channel from scratch.

I drew this mind map to sort out my thoughts about the family channel.

The Highlights

I Kept Agile & Data Driven

I worked with designers and developers to add modules like Up Next to AOL.com. I tracked performance and led iterations.

I Was Result Oriented

I proposed a redesign of the tags, tag pages and archive pages. The clicks on tags tripled and the archive page visibly improved content circulation.

I kept Agile & Data Driven

The work flow (Up Next module as an example)

I discovered that user sessions were shorter than those of the classic AOL.com.

I compared the new site with the classic site and competitors such as The New York Times, CNN, Quartz, and Mic.

I found that a popular feature was missing - Up Next. It encouraged users to keep reading the next article.

I confirmed with my manager about adding the module. He agreed, and we gave it priority.

I worked with designers to explore designs, and we finally made a decision together.

I gathered the product requirements and design assets, submitted a JIRA ticket, and gave the Scrum Master a heads up.

I joined the Scrum meetings, provided further info to programmers, tested the deliverable, and ensured its quality.

I tracked the performance of the module. If it didn't work well enough, we would keep iterating.

Tracking data, competitive analysis, assumption, proposing new features and getting approval, design, documentation, implementation, monitoring metrics.

The iterations

We implemented one of the designs quickly and I assigned a tracking ID to this module. According to Omniture, the clicks shot up dramatically but fell down over time. We tested some other options and fine-tuned the animation. The feature evolved several times. The current design and behavior are shown below:

To better tailor to viewer interests, it’s combined with recommendations
It only slides in when viewers almost reach the end of the article.
We maximized its size to make it more prominent
We give viewers the freedom to opt out by clicking the close button
When viewers turn it off, it won’t show until the next day

Some ideas of the module position. We discussed the animation and behavior separately later.

The first Up Next module that went live on AOL.com.

The current Up Next module was combined with recommendations.

Data to product then back to data

Data helped me find the room for improvement, and then I would build something fast and put it to the test. Finally, I would review the metrics and iterate.

I was result oriented

Reasons for redesigning the tag system

Tons of content was created and aggregated by AOL. However, it was disorganized and difficult to access.

Many articles didn't show tags. Some did, but the black tags could hardly gain any attention.

Competitors like Facebook were adding emotions to their products.

Many articles didn't show tags at all, even though editors tagged every article in the backend.

The old tags seemed like plain text. "Are they clickable?" a user might ask.

Introducing the new tag system

A more eye-catching tag design.

Sentimental tags like cute, sexy, and funny give users another way to explore the content.

The tag design naturally led to the archive page and search function.

New tag design

After rounds of design, development, and test, the current tag design was perfect.

Color and style are consistent with the AOL branding
The design catches attention, but it’s not overly designed
Compared to the old tags, they seem much more clickable

The new tag design that attracts 3x the clicks.

Sentimental tags

Whether it’s sexy, cute or funny, viewers can easily browse more articles that arouse the same feeling. Furthermore, a series of sentimental newsletters are on the way – AOL users can subscribe to daily cuteness or get inbox full of funny videos.

Click on sexy tag to see more about articles like this.

We encourage users to leave their emotional feedback.

New tag design improved CTR by 300%

The tag system has been a great contributor to content circulation. It makes exponentially more content accessible without really creating more.

Tag Pages and the Archive Pages

When viewers click on a tag, naturally, they’ll be taken to a tag page – a page full of articles that contain the same tag. A tag page is a hub for a certain topic. If it’s the topic that interests the viewers, they can dive in and indulge themselves.

If a user wants to know more about Netflix, s/he can click on this tag.

After clicking on Netflix, they'll land on a page full of Netflix news and stories.

Like a tag page, an archive page is also a collection of articles, but by date and keyword. It can be a time machine that takes viewers back to the night their favorite team won Super Bowl. It can also be a great tool for research if viewers would like to read all about the Zika virus.

The archive page has date, channel, and keyword filters.

PV of tag pages and archive pages reached 1.2% of total traffic

After launching, the tag pages and archive pages gained about 1.2% of the total AOL.com traffic steadily. It’s a success because:

It provides true value to users by making content more accessible.
It added ad spots to the site and benefited the revenue of AOL.

I led the creation of tags, tag pages and archive pages single-handedly. I took the initiative and owned the products. The experience equipped me with all the skills I need as an entry-level product manager.

My responsibilities

Research & Insights

I combined primary and secondary research, watched trends, located pain points, and uncovered needs.

I also gathered and analyzed user feedback and translated complaints and wishes into real features.

AOL allows you to share an article to your friends, but the experience was a pain. This is part of the deck about redesigning social share.

Prototyping & Testing

Being proficient in design tools, I was able to make mockups and prototypes on my own.

Guerrilla testing was my personal favorite. I also worked with the research team to conduct more formal tests.

I held meetings to present solutions and test results to stakeholders and push projects forward.

Product Management

I aligned the product vision with company vision and goals, and managed the roadmap.

I created detailed documentations in Confluence. If anyone had any questions, I was the go-to person.

I created and prioritized tickets and managed product backlog. I worked closely with the Scrum Master.

I participated in daily standup meetings, helped to clear the blockers and tracked the progress.

I managed tracking IDs and monitored CTRs, page views, DAU, MAU, and other metrics.

I led brainstorm sessions to explore solutions to certain problems. This came out from a meeting about growing active users.

The Reflection

Tools & methods I used

Google Doc + Google Slides

Sketch + Adobe Photoshop

Lucidchart + Marvel + InVision

Scrum + Kanban

Confluence + JIRA

Omniture + AOL in-house Data Analytics Tool + comScore

Things I learned

I honed my presentation and storytelling skills.

I went an extra mile to do things right and get things done.

I learned the basics of data analysis and used them to help improve products.

I learned how to balance business goals and user experience and when to make trade-offs.

I became a better communicator when collaborating across disciplines.