ProfitWell: Turning the Blog into a Content Hub

UI Design
The Problem
For our 5,000+ and counting customers, we’re the most accurate subscription and financial analytics SaaS on the market.

For everyone else, well, it’s harder to get the word out. ProfitWell has a killer content team putting out incredibly useful reports with tons of data almost everyday.
The Solution
What if we took the company blog and turned into an evergreen content hub instead? We worked on three critical components: 

Better content organization. We want to make it way easier to find the content that’s most relevant to the user.
‍
Optimize for leads. It’s important that readers can get more relevant information about ProfitWell when they want it.
‍
Responsive. In depth reports should be a joy to read on mobile without the extra ‘fluff’
ProfitWell
Visual Designer
Aleena Khan
Lead Designer
Patrick Feger

Homepage Wireframe: Getting the Hierarchy Right

There are a lot of moving parts in a content heavy page that need to be prioritized from titles, photos, content types, categories, tags, author and dates.

But do we need all of those things? Because a lot of the content is evergreen and the data is constantly being updated, we decided to forego the date and author name.

Instead, we prioritized the content type (we produce a lot of video and long form studies) with the category (we cover everything from pricing basics to in-depth SaaS metrics).
Content organized by type, leading with videos.
Content organized by category, leading with the latest.
To de-emphasize dates and turn this into a real content library, we skipped any designs that would suggest a chronological order. We tried a few ways to group the content, like by content type (leading with videos) and then by categories. Ultimately, we decided a simple filtering system would be best.

I’ve included some notes around the discussions we had while honing on the final design. This content network is our number one source for leads, so we opted to include the e-mail form in the header. We also went back and forth between the hierarchy for titles, icons, and categories. In the end we went with white behind the titles for both legibility, and the fact that a lot of times the feature image may not be what draws the reader in.

The Article Page Wireframes

We went through quite a few iterations with this page. There were a few important considerations that had to be taken into account:

Optimized for reading, first and foremost. We took a lot of cues from medium and the Apple news app to really hone in on ideal number of words per line, margins, and font size

Optimized for leads, a close second. The pages below are mocked up with a number of side modules on the sidebar. There will really only be 1 or 2 per page, but it’s important to make sure they all work together and don’t feel ‘salesy.’

A summary section at the top that is optimized for google snippet Media above the fold – Any video or media needed to appear above the fold

Calls to action embedded throughout the page so the article can also function as a landing page.
Some iterations that led us to where we are. Some didn’t account for enough important information about the fold, others had a lot of wasted space, and many didn’t account for much longer titles.

The wireframes below felt a lot closer to what we were hoping to achieve. We chose to go with much simpler opt-in forms in the body, lighter sidebar modules and a slimmed down version of related content at the bottom.

The Final Design

We went through quite a few iterations with this page. There were a few important considerations that had to be taken into account:

Optimized for reading, first and foremost. We took a lot of cues from medium and the Apple news app to really hone in on ideal number of words per line, margins, and font size

Optimized for leads, a close second. The pages below are mocked up with a number of side modules on the sidebar. There will really only be 1 or 2 per page, but it’s important to make sure they all work together and don’t feel ‘salesy.’

A summary section at the top that is optimized for google snippet Media above the fold – Any video or media needed to appear above the fold

Calls to action embedded throughout the page so the article can also function as a landing page.

Want to get in touch?
aleenahkhan
@gmail.com

I feel strongly about the blend between form and function, business goals and user goals, groundbreaking design and the game of design inches. I'm looking to do great work for a company in the D.C. area (or remote!) that's solving real problems for real people.

I’m most passionate about working with an in-house design team that owns all parts of the digital experience, B2B or B2C.
‍
I can be reached at aleenahkhan@gmail.com or 770-815-0692.

aleenahkhan.com | UI Designer
TwitterInstagram