Unifying digital solutions
A scalable design system Merging institutional needs
We developed an editorial-style platform featuring an interface designed for engaging storytelling. We focused on core functionality and the ideal user experience to bring the new platform to life.
We partnered with stakeholders throughout the organization to create a high-performance website that offers real utility. Our team collaborated directly with many physicians from more than 100 departments to inform a flexible design language that could be adapted for various needs and iterations.
An atomic design approach ensured both consistency and scalability.
We developed a set of core components that could be reconfigured to suit the needs of thousands of different pages. Starting with basic elements defined in Figma, our system was capable of handling extensive content needs—today and well into the future.
A combination of curated and commissioned content elements upped the aesthetic while also creating a more immersive user experience. Our new visual language, taking cues from Montefiore Einstein’s history of compassion and innovation, worked as a critical storytelling component and established consistency from page to page.
OVERVIEW
-
Demonstrate Prestige
Highlight the organization's achievements and celebrate its successes.Simplify the Complex
Reduce organizational complexity by providing an improved user experience.Design for Care
Utilize digital platforms as the primary means of delivering information to existing and future patients.Connect the Community
Showcase initiatives and the people involved throughout the organization.Showcase Synergy
Demonstrate how the organization is united in pursuit of common goals.Modernize
Enhance the organization’s online presence to showcase a premium user experience, reflecting the unity of the organization. -
Competitive Research
Conducted competitive research to identify the strengths and weaknesses of competitor websites.User Research
Conducted qualitative research to gain a deeper understanding of the needs of patients, non-patients, students, and stakeholders and to identify design imperatives. Quantitative research aided the team in reducing bias and gaining a better understanding of existing user behaviors.Out-of-Category Research
Researched emerging trends and behaviors to incorporate modern design patterns and user behaviors for design consideration.Data & Insights
By utilizing data and insights, we were able to streamline the user experience to focus on the content that truly matters.SEO Audit and Guidelines
Performed a comprehensive SEO audit of all existing pages and developed a sitewide SEO playbook. -
Workshops
Conducted weekly workshops with stakeholders across the organization to collaborate on all aspects, including architecture, sitemap, user journeys, wireframes, design, storybook, as well as content planning, copy, and content reviews up to final staging.Exploration & Testing
Multiple key page visual design concepts were tested across the organization and with core audiences. We performed usability testing to evaluate design performance and gain further insights into user behavior.Design System
A scalable design system was developed to meet the diverse needs of the institution, prioritizing a mobile-first approach to cater to over 65% of mobile site visitors. We created a structured Figma design system where each component was semantically versioned, with one page dedicated to each version. This setup facilitated the purposeful creation of individual pages for each component and included documentation. The resulting benefits included reduced file sizes and the ability to share access to individual components, all contributing to a cohesive and streamlined component library. -
Our technology stack balanced performance, flexibility and maintainability. Storybook formed the core of our development process, allowing us to build and test design components in isolation.
For front-end interactivity, we chose Alpine.js for its lightweight nature, complemented by Tailwind CSS for rapid, consistent styling. This combination enabled us to implement a responsive design language that reflected Montefiore Einstein’s newly aligned brand identity while ensuring optimal user experience across devices.
Twig served as our templating language, bridging our front-end components with a headless Drupal CMS. This setup separated content management from front-end presentation, giving editors a familiar interface while allowing our design system to leverage the latest technologies.
The library was built with a component-based approach that allowed for a consistent appearance and functionality across all sites.
Unified Drupal Content Management Platform to power multiple websites and front-end frameworks
A new CMS facilitating governance through assigned roles and responsibilities
A modern, module-based workflow simplifies content entry by rearranging modules through drag & drop and easily changing text and media content.
Modern technology stack and hosting infrastructure to meet the needs and expectations of today’s user and give more control and flexibility over the technologies that fuel the user experience
Connecting Drupal to an asset library of high-quality, approved images
Streamlined the process of translating from English to Spanish with new workflows and language service options
Integrating with 3rd party APIs to dynamically pull in content
Faster load times
Fully customizable UI
Ability to publish content anywhere
Reduced stress on infrastructure
Improved platform security
Real-time data
Reactive interfaces with app like UX
Fast downloads and light page weight
Quality assurance and testing were crucial throughout the process to ensure that the design, weight, size, compatibility, and functionality matched the client-approved QA matrix. Detailed reviews were conducted to ensure compliance with AA accessibility standards and, where possible, AAA standards, as well as to meet HIPAA requirements.
Alpine.js, Tailwind CSS, Drupal, Acquia, Storybook, Akamai, Netlify, Localize, and more.
-
Content Creation
When it came to content, we let clarity come first. Our redefined editorial strategy centered around accessibility to help patients and their families confidently navigate unfamiliar—often stressful—territory. We employed user-friendly language to make site navigation absolutely intuitive. Our content was knowledgeable, clarifying, and concise across the hundreds of core pages we touched.Thousands of unique images and illustrations added polish and cohesion. Combining curated and commissioned elements upped the aesthetic while creating a more immersive user experience. Taking cues from Montefiore Einstein’s history of compassion and innovation, our new visual language worked as a critical storytelling component and established consistency from page to page.
Content Governance
Leveraging roles and automating workflows for content input, refinement, and approval.External API Integration
API integration for 3rd party content.Asset Management
A library of brand-approved stock images, icons, photography, and custom illustrations was introduced. Rigorous content creation, image review, and approval processes were introduced to streamline client engagement and ensure on-time delivery.
https://montefioreeinstein.org/
Alto NY 2024
Client Montefiore Einstein
Focus Strategy, Discovery, Concept, Design, Development, Multiple Languages, Quality Assurance, WCAG AA
Categories Digital Platform, Component Library
Partners Wild.as, Mediacurrent, Foxhole QA, Digital production in partnership with Jonathan Percy, Amanda Campbell, Art Production Julia Menassa and Marvin Cassell Jr, Core Illustrations by Ibrahim Rayantakath