Android Headlines

Android Headlines is a leading technology news website that publishes breaking news articles about Android and other tech topics. Our team optimized this business through a brand refresh as well as a website rebuild and redesign. The goal was to increase readership so that the website would generate more ad dollars.

My Role

I was responsible for many aspects of this intensive project. I was the lead designer, I project managed and triaged tasks, I was a front-end developer, and I became an ad hoc dev team lead when we neared the finish line, which included responsibilities such as managing the QA process and leading stand-ups.

Ads

Android Headlines' main source of income is through ad placements. Therefore speed, SEO, and page views are of top importance to them. If those elements are prioritized on the website, then ad revenue increases.

The Challenge

Their original website had been built with Wordpress on old technology many years ago. Although it did the job in terms of managing the ads and the ability to post articles, it suffered poor performance which resulted in low page views and high bounce rates.

The user experience also needed help. The navigation contained an overwhelming number of top-level items. There was a missed opportunity of not linking related content to articles. And there was a lack of meaningful content curation on the homepage.

The Solution

Our team chose to rebuild the website as a progressive web app (PWA) to increase its performance, especially on mobile. We would maintain the Wordpress back-end but would replace the front-end with a sleek new one built with Vue.js.

We drastically cut down on the number of menu items to make navigating the site easier. We introduced category and subcategory pages to help organize the content. We added related article content in strategic places to encourage more page views. And last but not least, we created a more structured and compelling homepage.

Keep it Simple, Sally - Reworking the Menu

The original menu contained literally hundreds of navigations links hidden in four distinct groupings.

The "All Categories" was a scrollable drawer that came in from the left and housed all of the links, but was so massive you could not browse all of the links at once.

The mega menu also added intense cognitive load as there were many menu items to choose from.

Streamlining

My aim was to streamline the menu so that we could reduce cognitive load. There should only be a handful of top-level navigation links where the groups are obvious and easy to scan.

In terms of business strategy, I wanted the user to spend their time clicking through pages that load ads (making more money) instead of browsing the menu and only picking one page.

The New Menu

By referring to the site's Google Analytics, I was able to determine which popular pages should be featured in the main menu. Then, I created a static primary menu that would be set up in the back-end, and a dynamic 'trending' secondary menu that the client could edit anytime he wished.

Categories

In conjunction with the menu change, I created category and subcategory pages so that there would be a more natural flow of information from homepage to article page.

Categorize with Color

To drive home the category concept, we created color associations. The brand color represented the brand's category, and if it wasn't a brand, then a colorful high-contrast color was chosen instead.

The category color was used in article content blocks and in the tertiary menu bar.

A New Homepage

Lastly, designing this homepage was a challenge for many reasons. The goal was to showcase a large number of article content and minimum number of ads, and to design it responsively so that it was a performant mobile experience.

We created large content blocks comprised of small modular blocks that would morph at a mobile form factor. We utilized the carousel as much as possible at mobile in order to make it a more pleasant user experience, as well as take up less real estate.

Mapping out how content blocks would break down at mobile.

The Final Homepage

After lots of last minute tweaks and requests, this is what the homepage ended up looking like.