Skip to content

Design

Jump to bottom
lyannne edited this page Aug 30, 2025 · 14 revisions

Overall Design Goals

The main aim of this redesign was to modernize NEFAC’s website while making it easier for visitors to find and interact with important information. The old site had strong content but lacked a clear structure, which often left valuable resources buried in deep menus. This project set out to fix that by creating a cleaner, more intuitive user experience. The focus has been on improving accessibility, keeping users engaged longer, and presenting NEFAC’s mission in a way that feels modern and professional. This included simplifying the visual design, refining navigation, and creating a layout that highlights the organization’s key focus areas: Advocacy, Commentary and Coverage, Community, and First Amendment News. While the full redesign is still in progress, the direction so far establishes a strong foundation for whoever takes over next. Below are the core design goals guiding this project:

  1. Make Information Easy to Find
  • Reorganize menus and page structure so important resources are always within easy reach.
  • Improve the resource library by grouping content clearly and making recent updates stand out.
  • Add clear, predictable navigation paths for both first-time visitors and returning users.
  1. Keep Visitors Engaged Longer
  • Create a homepage that showcases NEFAC’s mission and most active areas with strong visual cues.
  • Use well-placed call-to-action blocks (e.g., “Join the Movement,” “Support Our Work”) to drive involvement.
  • Include support for interactive and multimedia content to make the site feel more alive.
  1. Simplify and Refresh the Look
  • Replace the outdated, cluttered layout with a clean, responsive design suitable for desktop and mobile.
  • Make better use of white space to reduce visual overload and improve readability.
  • Apply consistent fonts, colors, and hierarchy to reinforce NEFAC’s brand in a modern way.
  1. Support Growth and Awareness
  • Ensure the mission and impact are clear at first glance, appealing to both experts and the general public.
  • Highlight the four main content pillars so users quickly see the breadth of NEFAC’s work.
  • Design with flexibility in mind for future features like multilingual support or campaign-driven pages.

Major Design Decisions/Tradeoffs

  • We chose to implement cards on multiple pages, but client mentioned he does not like cards/blocks and prefers a more open layout without closed off spaces and outlines. There are many edits that need to be made to align these pages with the client's preferred style.
  • Most pages on the site (which has thousands of pages, mostly articles and other text-focused pages) will fall to a template design and will not need specific designs made by designers, which developers have currently implemented to mimic the layout and style of the current site.
    • More about the work that has been done this semester and what pages have custom designs are in the Final Project Report.
  • The structure of the site (which pages exist and where) follows the current site closely, with minimal reorganization of information, so that the client does not have to change much about the current site on his end.

Key Frames/Screens

  • The client emphasized the importance of the landing page, subscription page, and how you can help page, since those pages are the ones that users will likely interact with the most and help drive support for the organization. Call to action features on those pages are particularly important. In general, the deeper into the site the page is (the more clicks it takes to get to), the less important.
  • There is also the programs & services page, which the client plans to use to show others what NEFAC does, and is intended to be an orphan page (it is currently reachable by clicking "what we do" in the nav bar) to keep the navigation consistent and making only pages in the dropdown from the nav bar accessible.
  • The client has requested the current Legal Briefing page (https://nefac.org/amicus-briefs/) to be split into 3 separate pages: Amicus Briefs, Litigation, and Legislation and Policy. The design for these pages has been planned to follow the same structure as the Commentary and Coverage page designed (see in Figma), since the structure of the information is very similar.

Flow of User Interactions

The site has two different main users: the admin (Justin) and regular site visitors (like students or journalists looking for information)

  1. Admin Flow (Justin / Internal NEFAC Staff)
  • Goal: Upload and manage content without having to style each page manually.
  • Flow:
    • Log into WordPress (headless CMS).
    • Upload or update content (text, images, media, event info).
    • Assign content to the correct section (e.g., Programs, Sunshine Week, Legal Resources).
    • Content is automatically styled and displayed on the site via the templates/components we’ve built.
  1. Public User Flow (General Visitors)
  • Goal: Discover, access, and engage with NEFAC’s resources.
  • Flow Options:
    • Navigation-based: Enter through homepage → use navbar / sidebar to browse → go into specific programs/resources.
    • Search-based: Use search to jump directly to a specific resource or topic.

Structure: The flow follows a tree-like hierarchy of pages (in the old Figma file: https://www.figma.com/design/Dj8Zw5tDiFXi3KkDuNjvhR/NEFAC?node-id=1303-1207&t=hdu4YkUmYn6bIwMb-1), where top-level pages branch into more detailed subpages. image

Links to important documents

Clone this wiki locally