Streamlining and Redesigning a Product Homepage

Led redesign of a homepage for a site with 3 million monthly users to increase engagement, encourage browsing, and update to reflect brand personality. Resulted in 54%+ increase in engagement and measurable improvement in visual design.

The Challenge

Common Sense Education, the education arm of Common Sense Media, serves millions of teachers and educators who want to help their students to have a healthy relationship with technology.

The Education homepage should have been acting as a helpful “front door” to the site, guiding educators to the resources they were looking for, but the page flow and layout was confusing to users and was causing dropoff. The page design was also outdated and stale, and didn’t reflect our brand personality.

Our Solution

In close collaboration with the VP of Brand, I helped lead a full redesign of the page. We made the user flow through our resources simpler and more visually engaging, made above-the-fold calls to action clearer, and added testimonials and impact stats to help new users trust us. We also did a full visual design overhaul to reflect our brand personality, as part of a larger effort to ensure that our brand personality was injected into every part of our site.

Results

54% increase in traffic to the first set of resource pages (29% to 45%)

180% increase in traffic to the second set of resource pages (0.14% to 0.39%)

See the live page →

My roles

Lead product designer (UX/UI)
Graphic designer
Brand designer

Team

Product Manager
Product Designer (me)
VP of Brand
Art Director
Copywriter
UX Researcher
Engineers
Stakeholders from Marketing, Editorial, and Business Development

Analyzing the Core Issues

User Dropoff

About 50% of the users who came to the page were dropping off quickly after landing. However, we didn’t know a lot about who those users were and what they might be looking for. So we looked at more general data about our homepage.

From years of research, we knew that about half of our homepage users were returning users, already familiar with our resources, and looking for 3 top resources: Digital Citizenship content, edtech ratings and reviews, and professional development resources. The other half— newcomers— may have heard about us from colleagues, listened to a talk by us, or maybe heard us mentioned in an article. They would probably be looking for an introduction to our offerings and more context about our organization and credibility.

Although we didn’t know exactly who from those pools were dropping off, we decided that we could still do a holistic reframing of the page to serve both user pools. We would test and reassess.

Based on this, we started out with a few hunches:

A returning user would benefit from having the 3 top resources they were looking for up above the fold so that they could immediately click through.
A newcomer, unfamiliar with our products and offerings, might be thrown off by the jargon that’s thrown around without context. They might not know what Digital Citizenship is yet, and they can’t see what we actually offer under the professional development and edtech reviews categories. We needed to give those users more guidance.

Outdated brand expression: Visual language, voice, tone

In addition, everything from the UI (colors, button styles, typography, photography, illustrations) to the voice and tone of the copy was outdated and felt far from how we wanted to be perceived by educators: At the intersection of a helpful, warm friend to guide them to what they needed, and a trustworthy institution that is based in research and expertise.

We had just done a massive brand refresh to align with this brand personality, so we were excited to completely redesign the page with this new visual system.

Personas and User Needs

As we do with all our projects, we reminded ourselves of who we’re designing for, and brought their needs, motivations, and stories to the forefront.

These personas and user stories are touchstones that we continually returned to in order to empathize with our users.

Wireframes

In close collaboration with the copywriter and product director, I created a few wireframes to start a discussion about content and UX strategy. We thought these wireframes solved most of the issues and wanted put them in front of the content stakeholders to get feedback on what they thought best represented their user offerings.

After a long discussion, the team had consensus on the Wireframe #2 with some tweaks. We thought that the more fleshed out resource areas would help educators get more familiar with what we do and find what they need.

Prototyping

I fleshed out the wireframes into clickable prototypes, and we began testing and iterating.

Our UX researcher would bring our prototypes to usability testing with single users a few times a week. We would listen in, take notes, and synthesize the notes with the UX researcher. I would integrate the feedback into the next wireframe and prototype, and we’d start again.

Our UX researcher interviewing a study participant. (Participant blurred for privacy.)

We discovered that users were responding best to expanding the resources outside their categories rather than forcing users to click into a category to see resources. This made sense: Show users what we have to offer to help them find what they need.

Refining the Visual Design

Once we had a clear user flow that was performing well in interviews, we started refining the visual design.

I collaborated closely with the VP of Brand and the Art Director to create new illustrations, balance colors and white space, and let our new brand personality shine through.

This was the first redesign on our site where we were using the newly-created visual brand language, so we were experimenting, brainstorming, and helping form guidelines on how to use the brand language for web.

The Solutions

Popular educator resources are easy to find

Users are prompted with their most wanted resources right a the top of the page.

Resources are visible and fleshed out

Easy to scroll down and peruse through resources to find what you want/need.

Featured Resources are more engaging

Larger images and improved design makes the featured resources more inviting.

New Impact & Testimonials section helps educators trust us

For new users especially, having impact metrics and educator testimonials helps us communicate who we are and why we are trustworthy.

Refreshed UI

Fully redesigned UI elements all throughout the page. A consistent and elevated UI standard helps our site appear trustworthy and professional.

Seeing Results

The new page design resulted in a 54% increase in traffic to the Digital Citizenship pages (29% to 45%), and a 180% increase in traffic to the EdTech reviews and ratings (0.14% to 0.39%). Anecdotally in usability interviews, we heard that it felt easier to navigate, easier to understand who Common Sense Education was, and visually cleaner. It also received overwhelmingly positive feedback from the internal team.

We did not see an increase in clickthrough to the professional development pages. We noted that as a direction to iterate on in the future.

See the live page here.

Here are a few highlights from our solutions: