Common Sense Media - Homepage Redesign

 
IMG_6482.JPG
 

Challenge

  • The homepage did not do a good job of navigating the users to their destination

 

GOALS

  • Increase user engagement

  • Improve brand perception

  • Focus on the core brand offering: media curation

 

Results

  • Organic traffic increased by 4.5%

  • Exit rate dropped by 1.6%

  • Content clicks on top section increased by over 10 times on mobile and 4 times on desktop

 

 

Understanding User Needs & Behavior Patterns

Since 2003, Common Sense Media has been the trusted resource for media ratings so parents can feel good about the entertainment choices they make for their kids.

Based on a UX study of the homepage between June 28–July 2, 2018, it was discovered that the site users had a limited perception of Common Sense Media.

While most could identify that the purpose of the website was to inform a decision about media for kids, only a third of the page visitors had ever used the parenting resources. Only about half the users were aware that Common Sense was a non-profit organization.

homepage - before.png
 

Based on this research, there was a clear need to redesign the homepage and focus on aligning our brand presentation with user expectations. In summary, the homepage was failing the user in the following ways:

  • The existing homepage was trying hard to represent all facets of the brand, without serving the primary user need.

  • The information hierarchy was confusing: Instead of engaging with the content, users quickly found a way around it by heading straight to the search bar to look for a specific media title.

 

 

Understanding Product Vision and Business Goals

While the user research gave the design team enough insight into the issues with the existing homepage, we wanted to interview the leadership team and understand their vision for the brand and product.

To help guide this discussion, I prepared a deck which presented different ways in which we could approach the content and visual redesign. By the end of the meeting, we reached a consensus to lead with what Common Sense was best known for–media ratings and curation.

By focusing in on the thing that really mattered, the new design could make the homepage more relevant and also solidify Common Sense Media’s role as a trusted media guide for families.

before after copy.png
 

 

A Collaborative Approach to Problem Solving

The project kicked off with a design studio to determine the content hierarchy of the page. A cross-disciplinary group representing editorial, video, design, project management and marketing teams, reviewed the existing user research and formulated the redesign goals together.

 
IMG_6101.jpg
 
 

As a group activity, we came up with a list of potential elements that should comprise the homepage:

  1. Search

  2. Membership call to action

  3. Most recent (or most popular) media reviews & lists / ‘a thing to watch right now’

  4. Highlighted (or popular) parenting advice content

  5. New in theaters

  6. Marketing block (to promote initiatives/ events/ campaigns)

  7. Social media follow CTA

  8. About Common Sense & foundation partners (nonprofit / donate messaging)

  9. Business partners (third party platforms where you can find Common Sense Media ratings and reviews)

 

 

Wireframes & Design Iterations

With a clear understanding of the key page elements and content hierarchy, I set about creating wireframes. During this phase of design, I collaborated closely with the content strategist, UX researcher and the creative director. I also needed to take into account Search Engine Optimization (SEO) considerations as well as inputs from the leadership team.

A critical part of this project was engaging with the engineers and stakeholders to receive timely feedback at every stage of the design process. This ensured that we were set up for success and the entire team was onboard with the approach before we delivered the final designs.

 
A screenshot from the Invision project to showcase design iterations of the homepage

A screenshot from the Invision project to showcase design iterations of the homepage

 

 

Final Design

With clear direction from user research, design studio and the leadership team, I turned my attention to creating a visual design that would enhance the interaction design. I wanted the evolve the design language into something that felt approachable, friendly, but still connected to the rest of the website.

Ultimately the redesign aimed to solves for 2 main challenges: (1) To help users find what they need, (2) To invite visitors to explore other brand offerings and get to know Common Sense Media a little bit better

 
homepage - after mobile@2x.png
 
 

Highlights of the new homepage included:

More Media Focused - Users visiting the homepage were primarily looking for media titles, specifically for the latest Movie and TV shows and these were now clearly highlighted

 

Curation - Just under the latest titles, several rows of curated content and recommendations from top pick lists to seal honorees were added -- the goal here was to highlight for users that Common Sense Media not only reviewed individual titles, but also curated and hand-selected great media picks for families across media categories

Community - Created a prominent section showcasing what other parent users recommend

Age Ranges - Listing age brackets for parent advice reminds users that they will be able to browse media and tech related content specific to their kid's age

Search - With almost 50% of users using this feature on the page, the new design highlighted this at the top and middle of the page, along with adding clear links to other media categories reminding users that we review and rate media beyond movies

 
homepage - after@2x.png