Business Rules, Rule the Business

The News Homepage served as the main homepage for Gallup throughout the years and featured different types of content, data, and trending topics from across all divisions of Gallup – which there is a lot of. With all of this content being housed on the News Homepage, it was starting to become a content dump of everything that was being published. It lacked hierarchy, housed an assortment of unrelated topics, and had consistently low usage metrics.

Goals:
Redesign the homepage to clear up user confusions and frustrations collected through user testing, surveys and interviews and increase traffic to the homepage.

Key Partners:
Editor in Chief | Content Leads | Developers | Technical Project Manager | Platform Architect

Screen of the Final News Homepage Design

Analyzing Business & User Goals

One of our strategies in helping us to define business and user goals was to launch a readership survey. The feedback came from our most engaged subscribers, and ultimately users that would be most impacted by the site change. From that survey we were able to discover many things about our users including the topics they were most interested in, how often they read Gallup content, and how they used Gallup content. We also reviewed past user tests that had been previously run on the news homepage. Two of main themes that came from those user tests were that the homepage was busy, overwhelming and that the visuals lacked context.

Screenshots From Wayback Machine of the Gallup Homepage Throughout the Years

Brainstorming Workshop

I worked on this project in collaboration with two other UX designers and the first that we did to align on goals was to go over the stakeholder notes and reviewing the user research findings. With that knowledge began ideating concepts on the whiteboard and eventually built out wireframes. Throughout the process we discussed features and how they added value to the page. And because we were aligned on goals and had constant communication some similarities in our UI appeared and helped to validate that we were going in the right direction.

Examples of Some of the Wireframes From Our Workshop

Wireframes & Mock-Ups

Once we came to an agreement for the direction of this page, it was now time to create a more finalized wireframe. To get to the final wireframes, we reviewed and organized different blocks of content down the page, based on stakeholder requests. Within each block of content, we incorporated tiles could pull text and images from our internal content management system. Lastly, we began applying styling to bring the wireframes in the brand and test use cases of varying content lengths.

Final Wireframe and Final Mock-Up

Business Rules

One of the unique things about this project was that a key focus for us was to define the business rules around the elements of the page. This allowed us to align with the larger team on how this page would look and work. Our business rules focused on the ordering of content, where it would get pulled in, and who was in charge of making the content appear. An internal usually either has to manually provide content to a developer to custom code or a user could provide set of tags to tell pieces of content from our content management system to pull in. By providing a manual option, we not only allowed for flexibility with our end users, but it gave technology and opportunity to test a content section and define whether or not it was a good contender for further build out.

Mock-up, with Color Coordinated Overlays, Showing Static and Dynamic Sections

Final Desktop and Mobile Mock-Ups

The news homepage was mainly desktop usage but knowing the patterns of our users consuming content on the go, we had to make sure that the site was optimized for a mobile web experience. Once we had the desktop and mock-ups and functionality defined we worked on the mobile we experience. With both desktop and mobile mock-ups complete, we brought it to tech review to make sure that everyone was aligned and to answer any further questions from our development team.

Final Desktop and Mobile Mock-Ups

What I Learned

•The tagging functionality really opened my eyes to the possibility of creating a content heavy page with little to no curation needed from writers or editors. This saves so much time and resources and allows us to keep our content updated.

•By creating things manually or custom and one off we had to keep a closer eye on making sure it was updated, but could use those custom coded features as a test for future development.

•From a UI perspective, I learned that our users wanted structure and direction. Even though they were coming to a beautifully designed homepage they wanted to be able to be given direction around what to click. By including specific and clearly defined content sections, it allowed the user to understand what they were looking at and what we wanted them to look at.


Post Launch Metrics

 

2%
increase in sessions

70%
increase in new users

 

10%
increase in pages per session

7%
increase in session duration