Crafting a Cohesive Product
Signing/up, onboarding, browsing, searching, user profiles, input forms, lesson quizzes, marketing pages and popups... and bits of other successful Common Sense design projects I led.
ContextWhen I joined Common Sense, the product was expansive and had many years of work behind it (almost 20!). As we measured user needs and pain points over time, many parts of the site needed redesigns to stay up to par with our product design standards. And as user needs evolved, we also needed many new features.
As one of the product designers on a team of two, I led many of these designs across the site to solve various problems. This page is a collection of many of the highlights.
My rolesLead Product Designer
Graphic designer
Brand designer
TeamProduct Manager
Product Designer (me)
VP of Brand
Art Director
Copywriter
UX Researcher
Engineers
Stakeholders from Marketing, Editorial, and Business Development
Our Process
Throughout every project, we’d follow this process:
Increasing Clicks to Subscription Experience on the Homepage
We had a subscription experience live that users were engaging in, but we needed a way to convert users who were coming from the homepage. I led design explorations and collaborated closely with the UX researcher to test solutions.
Our two top-performing solutions were a grid of media buckets users could click into (shown here), and a flow with steps and dropdowns. The buckets overall performed better, and we added it to our homepage.
Showing Common Sense’s Mission and Theory of Change
Common Sense had had an “About Us” page for years, but it didn’t clearly communicate their cross-org work. Partners, press, funders, researchers, journalists, and policymakers needed a way to understand Common Sense’s work and theory of change holistically.
I led design of a new homepage destination, and a subset of “focus area pages”, to holistically show Common Sense’s work. We’d also just completed a new brand refresh, so it was an opportunity to inject the brand refresh into the page.
Comparing Popular Tools to Help Educators Decide the Best
Educators come to Common Sense’s education product for resource, tools, and advice on preparing students for success in a media-heavy world. Teachers wanted in-depth comparisons of tools in certain categories, similar to Wirecutter.
I and another designer, in close collaboration with product, designed a page that our education writers could use as a template to create as many lists as needed. We refined it with rigorous user testing and iteration.
Student Quiz Results
Teachers who used our curricula and lesson quizzes needed a way to see their students’ performance as a whole and on a question-by-question basis. We had very tight technical constraints and time, so I had to create something simple and high-impact.
I designed a flow inside the quiz experience where a teacher could see overall class data, how students did on individual questions, and how much time they took.
Sign Up and Onboarding
The education product’s sign-in/sign-up process was out of date and forced the user to go through multiple steps. I redesigned it to be more streamlined and welcoming with our brand personality.
I also designed a new onboarding flow in close collaboration with the marketing team and product team, in an effort to get more data from users.
Common Sense has a strong privacy ethos and doesn’t collect information from users without their consent. The marketing team hoped this data would help them personalize marketing emails, and on the product side, this information would show on the users’ profile (which would be helpful for other users to see, in the event of reading a review or an original piece of content from that user).
Writing a Review
A core offering that we have is allowing parents (and kids) to write their own reviews of a piece of media, and see reviews from other users. I redesigned the form experience to be clearer and visually up to our product design standards.
Press Room
Our Press Room page is an important destination for journalists, researchers, donors, and anyone else who needs to get a sense of Common Sense’s cultural presence and see the history of our press pieces.
I redesigned it in close collaboration with the marketing team to be clearer and easier to navigate. We added a sub-navigation with tabs, an area to show “Featured” news, and clearer visual design and information hierarchy.
Research Report Browsing
Common Sense is widely known among child development specialists as a leading research source on in impact of media and tech on kids’ physical, emotional, social, and intellectual development.
Their research destination was out of date and very text-dense. I redesigned the page, and the individual report page templates, to be clearer, easier to navigate, and more engaging. We reworked the information hierarchy, removed an unneeded sidebar, added the cover of each research report (designed by our graphic designers), added a large “Featured” research report at the top, and added easy filtering/sorting.
