Four Kitchens

Emulsify and higher education

3 Min. ReadDesign and UX

Here at Four Kitchens, we have seen time and again the benefits of component-driven development using Emulsify. A few benefits in particular stand out for higher education projects, specifically modularity, parallel development, faster onboarding, and accessibility/visual regression testing. The latest version of Emulsify, Emulsify Design System, takes these benefits to a new level.

Modular code

Modularity was one of our foundational principles of component-driven development in Emulsify. Flexible, reusable/removable, DRY code — these are universal benefits when applied in software development, but they are especially powerful in the realm of higher education.

Components we built for NYU Rory Meyers College of Nursing were reusable not only within that project, but also on others such as NYU College of Global Public Health, helping us increase speed and efficiency on multiple projects without sacrificing code quality. And now, in the new Emulsify Design System, you can extend this benefit across multiple projects. Write components once for your top-level organization and reuse them across all the organization’s properties with the flexibility and power to override them as needed.

Parallel development

Another great benefit of component-driven development is the ability to build out the frontend user experience in parallel to backend development and content modeling. This helped us on multiple projects, including a recent one for South Dakota State University Extension.

Working out the details of the content model and programmatic pieces was not a roadblock to prototyping components. In fact, because the prototyping was done in the same templating language as the backend (Twig), the very same components just needed to connect to Drupal variables when the backend was ready so the majority of work had been completed. In the new Emulsify, this could be happening across a range of project languages (Twig, React, WordPress, Angular, and more) while still sharing project standards and toolchain.

Faster onboarding

Although Drupal 8 comes with a learning curve as it shifts from its hobbyist roots to a robust software platform, the move to the Twig templating language makes the frontend more approachable than ever. We found this to be true in a recent team augmentation project with a top-five regional university in the Northern U.S., where we worked alongside their development team to build the frontend user experience. The simplicity of building frontend components using web standards languages and the basic Twig templating language makes it faster for new developers to jump onto the project. Onboarding doesn’t require time-consuming system-specific knowledge, so even junior developers can be productive quickly.

Accessibility and visual regression testing

Automated testing is a staple in Four Kitchens’ development practices, and we make use of it as often as possible across projects and teams. Because of the pluggable nature of Emulsify, we integrated visual regression testing into every commit for a recent project with a top-10 regional university in the Northern U.S. Design integrity was a high priority for this team, and this testing solidified a workflow that helped earn four W3 awards for the project. 

Additionally, we added automated accessibility to Emulsify last year, providing a solid foundation of accessibility testing to every project moving forward. We’ve already seen this provide value for projects, most recently for NYU Steinhardt, a client that highly prioritized accessibility. With the latest version of Emulsify moving to Storybook for the component library tool, we are also able to tap into their rich ecosystem of add-ons, one of which gives us accessibility feedback right in the UI while developing. 

The future of Emulsify and higher education

It is very rewarding to see component-driven development in Emulsify deliver real value for higher education clients, both in terms of efficiency and quality. This is why we are so excited about our new release—one that raises Emulsify to the level of a full design system and introduces even more flexibility with the support of multiple languages. This is extremely relevant in higher education, particularly at the organizational level, where multiple schools and/or projects need to be supported and unified from branding to content and development strategy.

Stay tuned to for more information on our design system.