Revamping The Entrepreneur Homepage Just Added Section

Even though the majority of our readers arrive on Entrepreneur.com via article, updating our homepage was a part of a larger design initiative balancing our visitor’s experience as well as creating a valuable space for our advertisers.

Approach

Goals and Requirements

I was brought in on this project after the initial rounds of requirements gathering by my supervisor and our sales team, determining the number and placement of advertisements and native content. My goals at this point were to research homepage layouts that already exist, find commonalities and digest my findings to create layouts that met the requirements.

Starting Point

Since Entrepreneur is a publishing company, I started my research at the websites of our competitors (ie. Inc, Fast Company, Wired).

After, I expanded my scope to other types publishing companies (ie. Vogue, GQ, Esquire) to see more innovative layouts that delivered highly branded content. As I went through each site, I would take notes and screenshots/video capture of elements that were both compelling and translated well to mobile.

Once I had all my references and notes inside of a Trello board, I was prepared to start sketching layouts (at this point I didn’t have an iPad). At this point the goal was to get as many ideas on paper, quickly, before moving the designs to Adobe XD.

Getting Digital

Turning the sketches digital was a rather quick process given that I utilized the “Assets” panel inside of Adobe XD to mimic the styles from the headers, paragraphs and link on Entrepreneur.com.

Taking this extra step in the beginning of the digital process, not only set me up to quickly iterate designs based on feedback and revisions later on, but also allowed the designs to be extremely consistent once changes to the styles were made (the “Assets” panel would carry every update to each element that used the style).

As the revision process finished-up, we settled on a design that took inspiration from Google’s Material Design concepts on slowing readers down, similar to the concept that grocery stores use by setting up displays near their entrances. This design featured a larger footprint article accompanied by three more articles (the third being a native advertisement) with their hero images on the right so the article titles separated the large image from the smaller ones.

The hypothesis was that if the images (the more compelling visual elements) were spread out, then the visitors would take more time to digest the scanned content.