The Information, an online tech news publication, was seeking to increase conversions and subscribe rates.

The Brief

The Information is an online tech news publication offering original and deeply-reported content.

 

As the news media continues to buckle in the face of a rapidly changing media environment, The Information is seeking to build a new, financially sustainable model for online news. They contend that quality reporting is worth paying for. With a relatively hefty price tag of $399 for an annual subscription, tech investors, entrepreneurs, and anyone adjacent or interested in the tech world will get hard-hitting reports and opinions from experts in the field.

 

The Information was looking for an update to their interface to reflect the quality and reliability of their content.

 

Since expanding and becoming a formidable presence in news media, they wanted to update the look of their site from young startup to serious and respectable news outlet. They were seeking to increase conversions and subscribe rates. And with their expanding portfolio of offerings, they needed to reorganize their interface to accommodate more projects in a way that would be intuitive and navigable for the user.

Team & Duration

October 2018 - present
 

I am the sole Designer, working with the Business Operations and Engineering teams.

My Role

Research

UI Design

UX Design

Tools & Methods

 

Research & Analysis:

Secondary Research

Competitive Research

Information Architecture

Design:

Wireframing

Copywriting

UI Design

Illustrator

Photoshop

Global Menu Redesign

I designed a new global menu that steers them away from the “start-up landing page” look and towards “reliable news publication.” After analyzing the look of news publications around the web, I modeled the menu after the predominant trends.

I found significant similarities across many trusted publications, so I wanted to use a design pattern that would be instantly recognizable to the user and reminiscent of reliable news sources that they’re already familiar with.

Before (below): The menu (highlighted in yellow) was simple and nondescript. It didn't convey "news publication." They were also running out of space to add new menu categories.

Result

This format also allowed me to reorganize the menu into two sections, allowing me to accommodate new projects. This separates the projects from the account functionality, making it a more intuitive and navigable information architecture.

This also allowed more space for a more prominent and centered logo. I followed the design patterns I found through my research.

After (below): The new menu with dropdowns expanded.

 

Subscribe Banner

The subscribe banner on the homepage was the last piece of the original site that remained. No one liked the look of the banner, and as both the main element on the page containing the call to action – to enter your email and start your free trial – and the first thing you see when you visit the homepage without an account, it was an important element to tackle.

 

The gray color was quite dark, adding a heaviness to the top of the page. The soft blue color of the Get Started button, the primary call-to-action on the page (aside from the red Subscribe button) was too subtle, blending in with the gray background color of the banner. And the input field, button, text, and speech bubble for the testimonials were blending into the background, all melding together and creating something that was just a little, blah.

 

With the team, we discussed that the banner was an opportunity to present the value proposition. However, screen real estate was a concern.

Before (below): The subscribe banner (highlighted in yellow) was clunky and uninspiring, but contained the value proposition and the most important call-to-action on the page. 

To address both of these concerns, I created an expandable version of the banner by eliminating extraneous information (the testimonials) from the truncated, default version. I centered the catchphrase text, making the main value proposition statements visually eye-catching. I used an illustration of the San Francisco skyline that they were using elsewhere on the site on the left-hand side to add visual interest and personality, while balancing the big, blue Get Started button.

I kept the testimonials in the expanded version. I also added shading and subtle borders to the testimonials, input and Get Started buttons throughout to give it more “pop.” They also had excellent icons and copy from elsewhere on the site that expands on the value proposition.

 

Org Charts

The Information has built up a small collection of company organizational charts, showing the organizational hierarchy of executives and teams at the highest levels of decision-making at companies like Facebook, Uber, and Didi Chuxing, among others.

 

They wanted to showcase this growing collection in an independent section. Previously, the org charts were built into a traditional article format, but they wanted to put the org chart on its own, a new kind of page.

Before (below): The org chart was embedded into an article.

I designed a new page for the org chart, with a new header that includes a space for the company logo, a short description, a link to an accompanying article, and a search function to search the chart by name. It was also important to include the byline, date published, and project category. The bottom of the page has links to different org charts, encouraging browsing.

I also designed a landing page to display all of the company org charts they’ve published so far. The top portion includes a section header with an icon, that will be adapted for projects, video, community, and events landing pages, providing continuity and navigability to the project sections of the site.

  • Grey LinkedIn Icon
  • Grey Twitter Icon
  • Grey Facebook Icon

2019 by Katie Levitt.

UX & Visual Designer