Brief
Daniel Greer of AgendaWise Reports approached us with great ambitions for a new redesign of their political news site. The AgendaWise goal is to inform readers that everyone has an agenda—whether they admit it or not. The idea is to dissect the different biases present in the political world and divulge the political discourses that they are influencing.
AgendaWise had an existing logo that Daniel wanted to keep, however we did give the old logo a “refresh” that we believe fits nicely with the new direction.
Originally using a basic template for the website, the group was now looking for a more custom look and feel. A specific request was to have the new design be “more dense” than the original.
To accomplish this, Daniel wanted to pursue a very unique and outside-the-box approach to online news. While He was looking for a more dense format, he was not quite wanting it to look like a “News site” but at the same time he didn’t want it to look like your typical blog. This is where we came in.
The Design
Outside the box is right up our alley. We constructed a unique layout that would differentiate AgendaWise from anything its readers had come across. To do this, we began with a robust wireframe that would allow for a constant promotion of sharing and easy access to recent and popular posts through the use of a sticky sidebar.
We carefully crafted a design with a more dense layout that employed minimal whitespace but managed to accomplish this while still maintaining the illusion of whitespace for maximum readability.
The psychology behind the shade of blue we chose was to retain the connotations of blue and its professionalism while desaturating to showcase the posts by promoting a focus that is more on the content than the layout itself. Pulling back more towards gray also lessens the partisan to either political party and furthers the unbiased nature of AgendaWise.
The Flow
The intention of the layout we crafted was to open a clear path for the reader to delve right into the heart of the content. This meant getting everything out of the way of the content. As you can see below, we kept things tight to ensure the dense layout our client was seeking, but build in some healthy whitespace in moderation to allow for a comfortable reading experience.
The layout we designed is arranged in a way that puts the reader straight to the content. This provides a great visual entrance path, allows more posts to be immediately visible on page load, and is especially great for returning visitors who come back for the content.
Emphasis
There were a couple sections of the site that needed to have a specific focus: AgendaWise On Campus, and GBN.
On Campus
On Campus is a section of the site that features articles that cover administrative operations of Universities where they influence Higher Education Policies. We did two things to promote the On Campus section of the website:
- We designed a slightly different version of the logo that is present on the main On Campus page as well as all subsequent articles that are within the On Campus category.
- We designed a graphic that promotes AgendaWise On Campus that resides in the footer of the website and is present on every page.
GBN
GBN stands for Good Light, Bad Light, No Light. Essentially, the GBN breaks down how a given story highlights characters and places them in each category reveals how journalists craft an agenda.
We designed a layout for GBN articles that presents each of the “Lights” in a colorful and visually interesting way. We provided a very easy way to post new GBN articles with this format by configuring ShortCode that allows the client to easily output new content in this style in a user-friendly manner.
ShortCode
In addition to GBN, we also provided ShortCode functionality for control of other styling options we provided such as the many box styles. ShortCode allows Daniel to style content with pre-existing styles using a simply [tag] rather than complicated code. By configuring all of the styles and providing Daniel with a well documented overview of all the different ShortCodes we configured, he has an arsenol of styling options readily available for implementing.
Sticky Sidebar
The sidebar on AgendaWise packs a nifty feature. When you scroll down past a certain point, the content in the sidebar “catches” at the Subscribe button point and stays visible even when you continue to scroll. This is best understood when you try it out for yourself on AgendaWise.com. You’ll notice that the logo and about text scroll past, but the Subscribe, Popular/Recent, and Sharing sections will stay as you scroll.
While Popular and Recent were something that our client wanted to include, we didn’t want it to take up too much real estate in the sidebar. We consolidated both into a single section with convenient tabs to switch between the two.
With all the benefits of the sticky sidebar also comes limitations. One of those limitations is space. Because the sidebar has a fixed height, space is very valuable. There are certain things that need to be promoted, but we need to be careful and conservative with the space that is available. We accomplished this through a number of approaches.
Our client wanted a big emphasis on Sharing. There were two parts to this:
- Connecting directly with AgendaWise (either following on Twitter or liking on Facebook).
- Sharing individual articles on AgendaWise.
Since both needed to be in the sidebar, we consolidated the former into an expandable button. Upon click the user has access to 4 ways to connect: Twitter, Facebook, Email, or RSS.
For sharing individual articles, we have a dedicated “Share this:” section of the sidebar that is always visible.
Enhancements
We thoroughly enjoyed working with Daniel. We had some wonderfully engaging back-and-forth discussions through which we were able to come up with some innovative enhancements that accomplished his new goals in a way that provided an even better user experience.
In the final home page layout, we designed a visually strong arrangement that showcased 3 Featured posts at the top with the largest, most recent Featured post displaying full width and two smaller Featured posts beneath it. A careful use of specific placement, color, size, and whitespace is what resulted in a very solid visual hierarchy. There is no guesswork left to the visitor as we clearly tell the user’s eyes exactly where to go.
Below Featured we have the 4 different categories—each displaying the 3 most recent posts from within that category. The pairing of each post’s featured image and headline draws the eye without overwhelming the user. If the user who is interested in a specific article hovers over the image or title, they are rewarded with a slidedown excerpt of the article with an option to continue reading. This way we avoid the information overload that so easily happens with many news sites.
Notables
- Logo Overlaps Navigation Bar
This subtle, but very important. It’s not very common to have the logo on the right side of the page as the natural flow of eye movement begins at the top left; making it more common to have the top left also be where the logo resides for maximum branding. However, because of the aforementioned reasons of wanting to put users right to the content, we intentionally placed the logo on the right to allow for easier content access. Without any adjusting, the logo could easily lose prominence in the design. To remedy this, we designed the logo container to overlap the navigation bar, giving the logo much greater prominence despite its less tradional placement. - Strategic Information Text
The static description underneath the logo provides a quick and straightforward message that conveys the goals of AgendaWise on every page. This way, no matter where a visitor first enters, they have an idea of what the site is about without having to view the About page. Of course, upon click, the Strategic Information leads to the About page for those that want to know more information. - “Share this”
This section of the sidebar smartly detects the current page and will automatically embed a title and link for the current page in the respective share dialog. - Contact Slide Down
We continued the outside the box direction with this alternative-to–the-standard contact form. Most contact pages tend to be rather boring and empty so we went with a slide down approach. - Search Slide Down
Again, to preserve space and limit “noise,” we designed a slide down search form to keep it out of the way until needed. - About Texts
Several of the different main pages have their own about texts. These descriptions were rather concise and to the point, so rather than put them on their own separate page, we had the text slide into the header image. Try it for yourself on the On Campus page – just click “learn more” in the header image. - Related Posts
The Related Posts widget features 5 articles at the bottom of every post. These articles are automatically generated by an algorithm based on post title, content tags, and categories. - Previous/Next
Links to the previous and next posts use the actual titles of the articles for friendly navigation and visitor engagement. This is a welcome break from the standard “Previous,” “Next” links. - Big Clickable Areas
We huge fans of big clickable areas. Why should only the text of a link be clickable? When the container around a link is related, the entire container should always be clickable. This makes for much more enjoyable navigation and is just one more area where we enhance the user experience.
Conclusion
It has truly been a joy to work with Daniel. His excellent communication, patience in articulation and deference to our many recommendations have surely been influential factors in the ultimate success of this project. We’ve already been priviledged to begin working on even newer projects with him and look forward to more successes in the future.
Bold Perspective is so good I don’t want to write a testimonial.
I lie awake at night dreaming of websites to launch so Bold Perspective can design and code them into being.
On a scale of 1 to 10 I just burned the scale down and went with Bold Perspective.
Sean and Brian are in the details. AgendaWise went to Bold Perspective with a unique and challenging request for a website overhaul. The results exceeded our expectations and we are thrilled with the end product. Bold Perspective is methodical in their information gathering, getting to the heart of what not only the client wants but what the end consumer needs. I found their process through and enjoyable and will work with them again soon.
Daniel Greer, AgendaWise
Follow @perspectivebold on Twitter