Skip to content Skip to navigation

Platform-Driven Atomic Design: Case Study of Stanford SPCS's D8 Platform

Approaching a full re-design is never easy, especially when its for 20+ different sites that include everything from an intranet to a brochure and program portal. In this joint session between FFW Agency and Stanford Precollegiate Studies (SPCS), we'll review how placing atomic design at the center of the rebuild helped align Discovery, UX/UI, and Development, and why it matters for building better platforms that focus on accessibility, user experiences, and governance. In this first half of the presentation, Alison Ho (SPCS) will walk through SPCS platform and then the discovery and UX/UI process to show how atomic design was used in: - Building component-based wireframes from content strategy that translate into visual concepts; - Planning UX Testing around atomic design; - Aligning the new SPCS design library with the updated Stanford Identity/the new stanford.edu; - Vetting accessibility with Stanford Online Accessibility Program (SOAP) standards; - Iterating via Patternlabs and in-browser mockups can improve user experience and align stakeholders. In the second half, Andrew (FFW) will walk through the technical implementation of the platform, highlighting how we were able to use atomic design to: - Translate a platform-wide content strategy into components made up of Drupal paragraphs + federated entities - Develop designs to comply with Sec508/WGAC 2.0AA accessibility standards; - Customize the administrative BE for easier reproducibility and content entry of new sites - Implement Domain Access + Code Upstreams to power multiple sites with varying levels of similarity off of a single codebase The final portion of the session will be devoted to a demo of the platform and an open panel discussion Q&A on the redesign efforts over the last year. Any questions from basic to advanced about UX, Design, DevOps or Drupal Architecture are more than welcome!

Time Slot: 
4:15 PM - 5:00 PM
Track: 
Speaker/Moderator(s): 
Location: 
180 (cap. 115)