Social Media Refresh

July 13, 2019

Southern Company

This is an internal site for Southern Company that contains information and content relevant to the company’s digital communications objectives, such as live feeds of its social media channels and best practices for engaging on those channels. This site currently contains hundreds of links to the social media channels for each of the operating companies, as well as their individual departments and teams.

Challenges for the user

  • The previous site had no clear hierarchy of information.
  • There were no easy transitions between different pages and types of content.
  • There was no clear path to ensure users are familiar with company policies before engaging with the platforms.
  • Basic buttons do not appear clickable.
  • The most relevant content is too hard to find and buried too deep in the site.
  • The glossary is not engaging enough to make it a useful tool.

Solutions for the user

  • I created a hierarchal path that provides the user the proper tools to engage with a public platform while adhering to communications policies.
  • The deep lists of information are displayed in a manner that is easily accessible and consumable by the users.
  • Content has been brought together in one location in order to reduce the number of clicks.
  • The glossary tool was optimized for the user experience by implementing search, sort and browse functionality.
  • In addition, I implemented an API that shows external search results in the event that the internal search returns no matches.

Challenges for the content creator

  • Lengthy production timelines due to the number of pages to maintain.
  • The disorganized structure resulting from protracted maintenance.
  • New platforms cannot be easily integrated.

Solutions for the content creator

  • Keep the page count low to ease maintenance.
  • Make content easier to update by converging the relevant data onto one page.
  • Provision for expansion on to new platforms and allow for the addition of new links due to mergers and acquisitions.

Before: Home & Videos

Before: Social Links & Glossary

After: Home

In order to ensure the user has the proper tools prior to engaging in digital communications, I have reordered the top header area to emphasize understanding the company’s policies about engaging on different platforms. By implementing a short flashing cursor within the colorful masthead upon first visit, the user is immediately drawn to the priority information at the top of the page. With access to policy videos and strong copy directives, it is clear where the user needs to begin and, what the user should do before accessing each platform. For regular social media users, scale and contrast emphasize the hero content on the page. Brand colors and logos from existing social media channels help to identify the users’ platform of choice. New content blocks can be easily built and seamlessly integrated as well.

After: Home, active tabbed hover state

Subtle hover states emphasize the navigation. Each tab links to different resources located deeper in the site, such as communications guidelines, frequently asked questions and live feeds.

action states:

tabbed navigation links = style change on hover

After: Home, video interaction

A pop of color to signify action, the user is immediately directed to the header, where video content is nested and can be activated by the user and expanded to full-screen with a simple click. No pop up, no modal. This provides a less intrusive experience for the user, who is more likely to let the video play to completion if they can continue to engage with the rest of the content on the page.

action states:

play button = color change on play button hover
background = color change on play button click
video appear and play = play button click

After: Home, social block interaction

A bold hover state emphasizes further action.

action states:

Facebook block = style change on hover

After: Home, social block click

Upon user click, the bold hover state opens up to display links to the Facebook pages of each business unit.

action states:

Facebook block full display = display on click

After: Home, social block hovers

All social block hover states active.

action states:

social block = style change on hover

After: Glossary

A searchable, sortable, key stroke sensitive database of terms, with access to external search results if the internal search returns no results.