ProfitWell: Turning the blog into a content hub
UI + UX design
ProfitWell is a financial metrics company with a killer content team. This project was to redesign the blog as an evergreen content hub that’s easier to browse
Designing an evergreen content hub that’s easier to browse.
For our 5K+ 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 problem? The content needs a better place to live. ProfitWell relies on inbound leads, many of which come from the content we’re already putting out. So, we set out to make a good thing better.
After speaking with the team, we came up with three main goals to accomplish for the redesign:
1. Better content organization. We want to make it way easier to find the content that’s most relevant to the user.
2. Optimized for leads. It’s important that readers can get more relevant information about ProfitWell when they want it.
3. Responsive. ProfitWell reports should be a joy to read on mobile without the extra ‘fluff’
Role: I handled all of the wireframes and UI design under the direction of Patrick Feger, director of design.
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
At the end of the day, there’s no right or wrong with design. We feel like we got to a good place and achieved the goals we set out for ourselves, all within the constraints of our CMS and brand (a financial analytics company!)
Thanks to Patrick Feger, our Director of Design for nudging me in the right direction and asking the right questions to get me here!
I'd love to work with you
I feel strongly about the blend between form and function. I'm looking to do great work for a company in the D.C. area that's solving real problems for real people. I can be reached at email@example.com or 770-815-0692.