The Knight First Amendment Institute at Columbia University defends the freedoms of speech and the press in the digital age through strategic litigation, research, and public education. Established in 2016 by Columbia University and the John S. and James L. Knight Foundation, KFAI has produced leading scholarship and powerful legal action on the most urgent First Amendment issues of our time.
We redesigned KFAI’s visual identity, including the development of a new logo, in 2018. I led the comprehensive redesign of their website in 2019, and continued to expand the website since with new features and content, including events, blog, video, & podcast sections.
My contributions include
Cross-functional Team Leadership, Remote Team Management, Creative & Digital Strategy
Information Architecture, User Experience Design, Design Systems, User Interface Design, Art Direction, Front-End Website Development
Awards
2020 Webby Award, Law Websites
2020 Communicator Awards Excellence Award, Law Websites
2020 Davey Award (Gold), Best Use of Technology
2020 Davey Award (Gold), Law Websites
2020 W3 Award (Gold), Law Websites
Sitemap
Information architecture based on three mission pillars
In initial interviews with stakeholders, differentiating the Institute from its peers and competitors was a primary goal: that the Institute invests in research and litigation – activism/action and the academic – where other legal centers focus on one or the other.
I built this into the DNA of the Institute's digital presence by making it the core organizing principle in the information architecture and website navigation. Alongside "Litigation" and "Research," I included a main navigation item for its core "Issues" – instead of making those individual issues the organizing principle for the IA and navigation, as many of the Institute's peers do – and for "Public Education," the third pillar in the Institute's mission.
Home page issues
To balance our decision to emphasize the Institute's pillars of Litigation and Research in the site's navigation at the expense of enumerating its core Issues – and to address stakeholders' concerns about doing so – I brought the Issues front and center on the home page, and proposed commissioning custom illustrated icons for each to further spotlight their importance.
As I developed the UI and design comps from these wireframes, we discovered and decided that the mission statement was overemphasized. In revised comps, it was moved to the right of the marquee/hero.
My coded prototype for the home page can be seen here (user: kfai. pass: p01ntf1v3).
Home wireframe
Home comp v1
Home comp v7
A new tool
I created a new function to help users understand and visualize, within a stack of hundreds of court filings for any given case, which documents were direct responses to others in the stack: "Response Chains."
I set timeframes and constraints, researched peers and competitors, and mapped out user needs and personas, iterating wireframes and prototypes, which informed and were in turn informed by the engineer’s tandem work iterating on the required database infrastructure. I held an open line with Institute stakeholders to ensure that the work-in-progress aligned with their requirements and goals.
The final tool was an intuitive, visual toggle users could employ in a fast, low-stakes interaction to understand at a glance the complex relationships between individual court filings within an otherwise massive archive.
My coded prototype for the Case template, including Response Chains, can be seen here (user: kfai. pass: p01ntf1v3).
Response chain wireframe
Response chain comp
Response chain prototype
‘We have a new website that presents our work more clearly and dynamically, makes that work more accessible in a number of ways, and better conveys the energy and excitement we bring to our mission.’
— Jameel Jaffer, Executive Director
