Work
The Center for Justice Innovation is a community justice organization that centers safety and racial justice in partnership with communities, courts, and the people most impacted.
The Center came to Teal facing a number of challenges with their old website. First, the site was too rigid in its structure and did not allow for them to express the interconnectedness of their programs and focus areas. Second, they were unable to prioritize or showcase timely content and resources were difficult to filter through. Lastly, they had recently rebranded but the new, vibrant identity was not coming across on their website.
We solved these problems and created a dynamic website that showcases the Center’s innovative and problem-solving work on issues within the justice space.
A key part of our process was workshopping key pages and elements of the design system with the client. This ensured we were all aligned and building something that would work well on day 1 and well into the future.
The design system utilizes the Center’s colorful new brand through color pairings assigned to each page of the site. When building a page, the admin selects a background color and an accent color. Each component uses either a tint of the background or accent color. Since the website also includes instances of gradients and overlays on photos, we carefully tested each color pairing to ensure it would meet accessibility standards.
The Center has many programs, some with their own brand colors separate from the overarching parent brand. To allow these programs to showcase their unique identities, we allowed for custom color selections in the admin for this section. To ensure accessibility, we built a tool that scans the page and changes elements to either white or black if it does not hit the necessary contrast threshold. Now the Center’s many programs have their own uniquely-branded locations where content can be managed by program staff and where content is dynamically populated automatically based on their powerful tagging system.
Migrating off of an out-of-date version of Drupal was a high priority for this project. Not only did Teal automatically import 2,500+ pieces of content from Drupal into WordPress while maintaining taxonomic relationships and reorganizing content into new post types, but we also restructured the individual posts where possible to better fit the new design system.
To help community members connect with programs in their area, we developed different user journeys and wayfinding options across the site. In addition to a dynamic Program Listing, filterable by Focus Area and borough, Teal built an interactive map experience that lets visitors search by location or zip code to find nearby programs and site locations. From there, users are guided to individually branded program pages offering deeper information and actionable next steps.
The website now makes it easy for practitioners, policymakers, and others in the social justice movement to find trustworthy resources and learn about impactful solutions to shape their efforts to build safe, strong, just communities.
A new, comprehensive strategy and updated design for both the public-facing and member sites.
The part where we ask you to cough up your email. So we can discuss all the amazing things we’re gonna do together. No pressure. Really.