Common Sense Media - Homepage Redesign
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.
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.
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.
As a group activity, we came up with a list of potential elements that should comprise the homepage:
Search
Membership call to action
Most recent (or most popular) media reviews & lists / ‘a thing to watch right now’
Highlighted (or popular) parenting advice content
New in theaters
Marketing block (to promote initiatives/ events/ campaigns)
Social media follow CTA
About Common Sense & foundation partners (nonprofit / donate messaging)
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
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
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