Earlier rounds of discovery research found that NSF.gov didn’t clearly communicate their mission, highlight agency achievements, or make engaging content easy for the public to find and use. To better meet their mission to "promote the progress of science," NSF wanted to shift how they were seen by the general public and increase their reach.
After several rounds of usability testing, we found that users outside of the scientific community demonstrated a significantly improved understanding of NSF’s mission and the real-world impact of research.
For 12 weeks I worked as Senior Visual Designer alongside a product manager and content strategist. I was responsible for
Prototyping new design directions
Building a UI
stakeholder alignment,
Workshop co-facilitation with partners to create brand guidelines, define audiences, and determine project success.
user research,
Training and mentoring human-centered design by including partners in all parts of the research phase from recruiting to synthesis
Co-leading collaborative research synthesis through affinity diagramming
Share-out learning with the project teams, senior stakeholders, and eventually the contracted team who would eventually develop the new design direction
The process of creating the brand principles was a collaboration between the NSF team and 18F. We did much of the generative work together during our two-day workshop where we identified:
Where we were and where we wanted to go. the internal teams we identified primary and secondary users to NSF.
Then we identified which users we felt the site
We went to validate our hypothesis for what we called "Science Interested" group. I wrote research protocols for visual preference testing to delivering a final product. I led and co-led branding workshops, facilitated usability tests, and presented my findings to stakeholders and internal teams responsible for outreach.
Decide on a next step for talking to users!
The National Science Foundation invests billions each year in scientific research and education. Even though they helped fund breakthroughs like the barcode and iPhone screens, they’re not a well-known agency outside of the science and research communities.
I worked with our content designer to create three different design directions. She focused on writing content to test voice and tone while I worked on look and feel. In Sketch I designed a 3-screen prototype, from homepage to article to test the different directions with our newly defined user types.
The NSF.gov redesign stands as a model for government agencies seeking to amplify their impact and connect with broader audiences.
1. Kickoff: Co-lead kickoff meeting to align teams, define problem, develop a hypothesis, and agree on next steps.
2. User research: Recruited participants from very broad "science-interested" communities and conducted several interviews about their work and experience with the NSF.
3. Co-design workshops: Co-led two day, onsite workshop with our content designer. We went over our findings then ran several design workshops to generate ideas for brand principles and user types.
4. Mockups and research protocols: Created three different style tiles and mockups for usability testing. Co-wrote scripts for cognitive walk-throughs and surveys.
5. Visual preference testing: Usability testing with different prototypes. Simultaneously launched internal NSF survey to get additional data.
6. Iterate and reiterate: We completed three rounds of usability testing. With each iteration we found more of the target audience demonstrated a significantly improved understanding of NSF’s mission and the real-world impact of research after looking at our newly designed homepage and article pages.
7. Delivery and hand-off: Wrote documentation of findings, provided all design assets and source files to NSF and their new development contractors to build and iterate on
Collaborative co-designing workshops are critical for aligning large, diverse organizations.
Validating visual designs with users can be tricky because of the subjective nature of so-called “likable” visual design. Fortunately, there are methods and questions that reduce bias and balance self-reported preference.
Play to your partner's strengths. Getting buy-in for research is really easy with an organization that values the scientific method.
Even the smallest design changes, in both visual design and voice and tone, can really transform perceptions and increase comprehension.