Common Sense Media: Redesigning the global navigation

Common Sense is a leading nonprofit organization in the US, dedicated to improving the lives of kids and families by providing the trustworthy information, education, and independent voice they need to thrive in the 21st century. The website is used by an average of 1 million users daily and forms an integral part of its brand voice. As a rapidly growing organization, Common Sense has diversified its brand offerings from just media ratings to parenting advice content, education and latino resources, advocacy, research and  news.

The challenge was to make existing users aware of the depth of our services and educate new users about our brand value. We focused on simplifying the user browsing experience and creating a solution that would highlight our content in a way that is less confusing. Even though we continue to make improvements based on user feedback and shifting business goals, in the end, the result was a dramatic improvement and a huge step forward in the evolution of our web UI.

Before and after navigation redesign

Before and after navigation redesign

Addressing user confusion and brand complexity

  • Families visiting the site clicked on the Education tab to try and find educational media for at home use, because it was part of the "media" site navigation 
  • Kids Action and Latino users had an awkward navigation that sends them back to the Media site when they clicked on the logo, attempting to navigate back to the pillar landing page.
  • Black bar nav was to enable people to easily become Members, browse across sites or make a donation. However we found that on media: only 1  in 1,400 users click into the black bar. 
  • Even though the majority of users on the media site are mobile users (58% on the consumer website), mobile navigation was not optimized for easy use and had a confusing UI.
Previous navigation experience on desktop

Previous navigation experience on desktop

Previous navigation experience on mobile

Previous navigation experience on mobile

Defining user goals

After consulting with different departments and stakeholders, our primary goals were defined as:

  • As a user I want to be able to quickly understand all that Common Sense offers so that I can get where I want to go.
  • As a user, I want to become a member to be able to get information that is pertinent to me.
  • As a user I want to be able to search so that I can easily find what I am looking for.
  • As a user, I want to know the information on reviews is unbiased so that I can feel confident making a decision.
  • As a user, I want to be able to know where I am on the site so that I can navigate with greater ease.
Wireframes and quick prototyping

Wireframes and quick prototyping

Improvements to the UI

  1. We introduced a master navigation based on the brand pillars which not only allowed users to navigate by audience but also presented our offerings at a glance.
  2. Removed "Kids Action" and "Education" from the media navigation and put all related resources under the master tab of "For educators" and "For advocates" to eliminate user confusion.
  3. Changed "sign in" to "log in"and sign up to "sign me up" and clubbed these together at the top right of the screen.
  4. Retained search which is heavily used by our users and made the input field label more conversational and invitational.
  5. Added a clear donate call to action that would help communicate that Common Sense is a non-profit providing trustworthy information and unbiased reviews.
  6. Introduced messaging in dropdowns and related links to facilitate user browsing experience.
  7. Simplified mobile navigation and improved user experience on smaller devices.