Homepage

Memorial Sloan Kettering

Brand Refresh and Design System Refactor

Memorial Sloan Kettering is one of the top cancer research and treatment institutes. I helped implement a massive refactor to thier theming architecture, while concurrently implementing a brand refresh. This included a complete audit of the existing component library and the creation of a roadmap for migrating the existing system in one with fewer, more intentional design patterns. We migrated the docuementation of thier modular UI components from Pattern Lab into Basalt's inhouse product called Knapsack (of which I am a major contributor). I also improved the developement workflow my optimizing and modernizing frontend tooling including Scss compiling. An important part of this process for MSK was to improve the rate of innovation and delivery while maintaining quality. To this end, I consulted and helped setup a more rebust and informative automated qualtiy assurance testing in CI/CD, including an effective reporting system with its own custom React reporting GUI.

Deliverables

  • Audit of the existing modular UI library, interface inventory for new designs, and roadmaping for a brand refresh
  • Rebuild of scss architecture adopting a more structured combination of ITCSS and BEM
  • Assetance in the role out of a branch refresh
  • Update to tooling and scripts, including optimation of theme builds
  • QA automation audit and consultation on improvements
  • Setting up crossbrowser testing for visual regression, accessibility, and end-to-end functionablity testing with Selenium and Cypress.io

Tech

  • Drupal
  • Scss
  • Webpack
  • Twig
  • Pattern Lab
  • Cypress
  • Browser Stack
  • React
  • BitBucket Pipelines

Images

Swipe left to see more...

Memorial Sloan KetteringMemorial Sloan KetteringMemorial Sloan KetteringMemorial Sloan Kettering