Coming Soon: A Redesigned Social Blog

When we first started this social blog, our intention was for the content to be an internal mechanism of support. The blog was, more or less, an extension of our role on campus as social media consultants. Blogging once a month has kept us informed and up-to-date with the latest trends and happenings relevant to our work. Since that very first blog edition, our base of subscribers has continued to grow and expand outside our network of Colorado State colleagues. Our readers come mostly from the United States but also from Canada, Australia, The Netherlands, and the UK.

We owe a shoutout to our web team for hooking us up with a very cool custom layout when we got things rolling. But now that it’s been several years, we wanted to freshen things up a bit. I’ve been swimming in WordPress for the last few days, but I’ve emerged from the trenches of CSS with a redesigned Social blog.

Blog ComparisonContent Strategy

In looking at the blog from a user-centric perspective, a few changes rose to the top of my priority list. Since the blog began, our social strategy has changed and, therefore, so must our blog design in order to reflect those changes.

User Experience

The process began with questions: “What do people request from us most often? What issues do we face when pointing people to specific resources?”

A top priority for the redesign was solving a problem that we’ve encountered since utilizing Google Forms as a way for students to apply for takeovers on Snapchat and Instagram. We had nowhere to point these students, and the Google Form URL is a nightmare (https://docs.google.com/forms/d/1_zXcJ0idl1jWmxCU6y9AJcjdXLdK2tXLWGvlwpJusxc/viewform?edit_requested=true). So we sent students shortened URLs through direct messages and hoped for the best. But with takeovers being a major component of our social strategy, we needed a more clear and effective way of not only sending students to the form but also making the form discoverable to users who are not yet aware. So I implemented a main page navigation bar with a button that allows students to “Apply For A Takeover” directly from the site and allows us to point users there instead of a shortened Google Form URL.

Another change with the redesign is the location of the subscribe button — going from bottom left to the top navigation area. This design change places higher emphasis on the ability to subscribe and receive an email version of the blog when it goes live once per month. Moving from bottom left to top right is justified by the Gutenberg Rule, a design principle pertaining to reading gravity and the western habit of reading left-to-right, top-to-bottom. The top portion of a page is the primary focus and draws a viewer’s focus regardless of content. In the redesign, I placed the subscribe button in the strong fallow area, which is the top-right quadrant of the page and the place where a user’s eyes move to after scanning the top left.

The concept of left-to-right viewing behavior justified another design change. Our team ultimately felt that blog viewers weren’t often utilizing the categories on the lefthand side of the screen as a primary function of the site. Narrowing blog content by category has ended up being more of a secondary function of the site’s primary feature. So in the new design, this option still exists but is less prominent and more centrally located. Research from Nielsen Norman Group suggests that web users spend 80% of their time viewing the left half of the page and 20% viewing the right half.

Design

The redesign features extra white space and also implements CSU’s secondary and tertiary brand colors into the palette (Aggie orange + alfalfa green). An example of this is found on the “Meet the Team” page, which now accurately reflects the current members of CSU’s social media team. The footer has been updated with larger icons and links to resources that are needed by colleagues around campus.

Meet the Team
Previous “Meet the Team” page.
Meet the Team
Redesigned “Meet the Team” page.
Old Footer
Previous footer.

 

New Footer
Redesigned footer.

Check back soon to see the redesigned blog live and in action. And feel free to reach out with suggestions to improve the site!