This case study details work done by Advomatic prior to its merger with Four Kitchens.
This was our largest project to date, spanning over a year-and-a-half and requiring over 3,000 development hours. Our agile process also evolved along with the project, adapting to challenges and smoothing out rough spots
The ACLU came to us with the need to upgrade their site and to redesign it with a focus on improving site usability for all, including those with disabilities. The new site needed to meet strict accessibility guidelines and be WCAG 2.0 compliant. The ACLU’s commitment to accessibility did not stop with the public-facing portion of the site but extended to the parts of the site used by administrators and content managers
We created a backend that is both highly flexible and rigorously accessible for a diverse group of distributed content publishers with varying technical skills. Users can change not only the content but also the layout of their pages. Site managers have a library of 75 pre-built components that they use to adjust the content and layout of their pages. Users can easily embed media including video, photosets, and captions. The ACLU also asked that we build a faceted site search that makes it easy for visitors to filter their search and view only the most relevant results
Since the site’s launch we continue to work with the ACLU on additional projects, and are currently working on a project to provide a platform for the creation of ACLU Affiliate sites.
Technical requirements delivered
Privacy
- The site includes features to Like, Follow, and View recent posts and tweets; all without allowing social networks to track visitors who don’t want to participate.
- Similarly videos and other embeds are first shown to visitors as a preview image. The iframe or embed code is only rendered if the visitor decides to play the video. Thus preventing YouTube et al from tracking all of ACLU’s visitors.
Security
Due to the ACLU’s high profile and involvement with controversial topics, security was a major conce
hroughout the development process. While we can’t go into too much detail here (because, well, security), here are a few steps we took to keep the site safe.
- The site runs entirely over HTTPS via HSTS headers.
- Secure hosting on Pantheon with controlled development environments.
- Scrubbed database back-ups
- Separation of concerns: The legacy system where visitors could log in to send petitions to their representatives was moved to a separate web property.
- All custom code was reviewed by multiple members of the our team, and Tag1 Consulting performed an additional security review, in which our codebase received excellent marks and a glowing recommendation.
Accessibility
We are passionate about accessibility. Partly due to the fact that one of our team passed away from ALS, and for several years he used assistive technologies. ACLU also wants to ensure that everyone has equal access to their website. Here’s how we made that happen:
- Before development started we worked with a third-party accessibility agency to create a document to define exactly what our standards would be for the project. You can only say that you succeeded if you set some goals before you begin.
- Our development runs in two-week cycles. After every two weeks we had a formal Q/A process including both manual testing and automated tools.
- During the development phase the our accessibility partner ran occasional user tests by real people with real accessibility challenges.
Complex content migration
- We migrated 25 different types of content
- Including complex data transformations
- A total of over 200,000 items
Future-proofing
As web developers, one of our fundamental tasks is to build the site to match the comps created by the designers. There are always many ways to make that happen. The knee-jerk reaction of many architects will be to choose the cheapest technique that gives content administrators the bare minimum for changing content. However we know that the ACLU plans for this site to live on for years into the future. How to keep the site structure flexible was an important goal when deciding how to build the website. There’s three main ways that we accomplished this:
Every page can be completely changed
Content of every type starts with a default layout and default components. But every page on the site can be changed. If content admins want to remove components from the sidebars to focus attention on the main content, they can do that. If a particular piece of content becomes more complex than what’s typical, content admins can easily and completely change the layout of that single page in a way that works with the content. All without requiring a web developer to change the code or configuration of the site.
Reducing the cost of future changes
There’s no doubt that changes to the design and structure will happen during the sites expectedly long lifespan. Our entire development process is centered with this in mind. By using style guide-driven development (SDD) we can ensure that changes to either the design or the structure can happen with minimal impact on the other. Thereby reducing the cost of any future changes.
Flexible building blocks to create new landing pages
Every organization changes. In five years the important issues that ACLU focusses on will be different than those of today. As new issues come into the spotlight, ACLU can restructure the site to bring attention to those issues. Content administrators can create new landing pages using a library of 45 editable components. Each version of a component can also be added to the library as a template.