NBC Universal / E! Online brought JXE to design the look, architecture and functionality of their top grossing web page. The article page became stale and over blown with spaghetti patches that hindered new design layouts and product integration for advertisers. The challenge was to deliver a new architecture that would allow for product-expansion in the publishing industry, while minimizing the amount of legacy infrastructure changes. Designed for simplicity and fast editing for writers and producers.
After gathering user analytics and insight from native product users. JXE, the digital team and heads of development setup brainstorming sessions with stakeholders to determine the KPIs the project had to achieve: cross-platform, custom layout, responsive design, growth architecture, and simplify the CMS, for on the fly breaking news. We created the adaptive block system architecture with drag and drop CMS capabilities.
The product launched with great success, minimal QA time and perfect sync with the global rebrand of E! Online to E! News, which garnered positive feedback from editors, stakeholders and readers.
We started with an exploration in the current page structure and created low-fidelity layout scenarios. Allowing us to dictated solutions on how to manage Key Structure Elements (KSE) across all situations.
The exploration allowed us to access which elements were primary and secondary as well as, which could be removed or deactivated based on platform. That led us in understanding which ones would be static & responsive vs. responsive & adaptive.
Built elemental blocks to be used in work-sessions with the digital team and stakeholders to access the top 10 article layouts we would like the product to achieve. Enabling us to narrow down which content classes were most useful.
Created a grid that hosted the content classes which we called “Blocks” in our CMS taxonomy to make it easy to differentiate from other elements.
Determined each blocks limitation, based on relevant content feed and article structure high hierarchy. Allowing some blocks to expand full browser width.
Identified which blocks to build for launch based on the maximum impact, while being native to the current CMS and editorial process.
E!’s CMS is known as Sage , it’s the application used by writer/editors to create widgets that host the content on the page. With the new design structure we knew Sage would need an upgrade in its UX & UI that would allow writers to easily control page layout and content type curation.
• UX - Cut or simplify the amount of process steps to increase writers productivity and allow for featured layouts for partnership opportunities.
• UI - Update functionality to be more visual and increase efficiency, while reducing the learning curve.
Reduced the process down to 3 main steps. 90% of the pages created, only 1 - 2 steps were needed. Updated the interface to be more visual and easy to understand. Received verbal feedback from writers that the new look and process made their job easier and more fun to create layouts that enhanced their stories.
By turning the most used block (Photo + Text) into the default, it decreased the steps by 2 compared to the old CMS dropdown selector.
The flexibility of the new architecture allowed for endless layout patterns and content block combinations. This in essence would keep E! Online's stories visually interesting and never stale. With the ability to add more content block types to the full arsenal.
In order to add social buttons that stayed with the reader as they scrolled through the article. We created social logic that stayed inside a consistant framework with two simple rules
1.“If block is position Center or Curtain no social buttons”
2. “If block is a Text Block of any type, present social button on the left of text and flow the height of the text”
Most article sponsorship in any publication have the sponsor’s logo near the top and close to the article title. We took a similar approach but built in some sticky logic so the sponsor would get a stronger presence through out the experience.
To a create unique and engaging page layouts, we needed the ability to deactivate or move the standard 300x250 Ad which is normally located in the right rail of most publications along with related content.
In the CMS we built in "block position" which based on the selected type would deactivate the right rail along with the Ad. In doing so it gave us the ability to make images expand the width of the browser window.
To move the Ad/Rail. The block position would need to be Left or Right. Making the Ad/Rail an inverted option of the selection.
With mobile web, we made a design decision far in advance that the mobile look would need layout adjustment rules, based on the user-behavior of mobile devices vs desktop. Which meant reversing the order of blocks at the beginning of the article. i.e. Instead of "Title then image for desktop. Mobile would be image then title."
Maintaining title above the fold when a portrait image is used.
Introduction of the expand button which allows user to see the full image by pushing the article down. Once expanded user can tap to close or scroll to continue reading.
The lack of screen real-estate made us rethink the position and timing of the social button. We created a passive interaction which once the user naturally scrolls down the article the social button will rise into the menu bar.
