I'm Joey gros , director of creative design at phase 2. phase 2 is a digital agency where we work or closely with our clients and we put experience at the forefront of what we do whether it's for the customer or the user or the patient.龷
hi ,everyone, so yes I'm Peter sanzone. I'm the director of technology at northwell health my team oversees Nortwell龷dot e-d-u, the Drupal implementation there. and we're responsible for all the other public facing web properties that northwall does.
hi everyone I'm Karly Cunningham. I'm the manager to user experience also at northwell health.龷
so to give everyone a quick idea about how the sessions going to go here's a quick overview.龷
so a brief overview of northwell health with the largest healthcare provider and private employer in new york state. we have hospitals and nearly,000 physicians across our health system. we see abo patients annually every single year through doctors offices ,emergency rooms, many types of different kinds of treatment facilities. but were much more than just a large organization taking care of people when they're sick龠through our fine state in Feinstein Institute for medical research ,we're pioneering medical discoveries and leading on the front of medical research at the School of Medicine in partnership with Hofstra University. we're training the future generations of men professionals. and with our north wall ventures division, we're developing breakthroughs in and through innovation, which are changing people's lives .
while Joe and Pete are going to talk a little bit about how we did some how we created our digital style guide in pattern lab, I'm first gonna speak a little bit about why it was important for northwell health to invest in creating design standards.龷
in 2016 we changed her name ,from a Long Island Jewish health system to northwell health,so it rolls off the tongue a little bit better. this transformation came with a new logo and a really vibrant color palette which represents our brand's diversity. all of this came to our design teams for the first time three months before we needed to go live representing our brand across numerous different digital platforms and thousands of web pages. the real trouble we found was that these guidelines we received from the agency were created for print materials and it didn't take into account user experience or usability in the digital space.龷
so we knew we had a problem, while we were able to accomplish the unimaginable applying these guidelines across multiple sites and thousands of web pages in such a short time frame,what we ended up worth were inconsistent design patterns and major usability concerns. another big challenge we had is that many of our web sites are managed by separate design teams ,that have very little, if any connection at all, to one another. so each team interpreted the brand's guidelines differently in their digital application.here you can see a few of the numerous different northwell web sites, each with their own take on applying the brand.龷
at the beginning of 2017 with our brand still being very young, we knew we needed to make a change, but how are we going to make the case to senior leadership that these issues were serious that they needed to be fixed and that they would inevitably hinder our digital growth in the years to come.龷
we started out by doing a building an interface inventory. and if you've ever been involved in a content migration of a website before, if you've ever been about the website redesign before, you're probably familiar with a Content inventory. content inventories take stock of all of a website's content and an interface inventory is very similar to that, only instead of sifting through categories content, you're taking stock and categorizing the individual bits and pieces that make up your website.龷
here you can see a couple of the different examples for buttons and links, that we could work collecting. there was a multiple pages of different buttons and links. this is only one shot of each of them,so you could see. that it was up there was no real pattern and you can google Brad Frost if you want to learn more about how to do an interface inventory .龷
so what we bound up with after completing that was a document that had more than 80 pages highlighting all of the different types of elements and components and along with their stark inconsistencies. here's a few more examples from our interface inventory.
while deconstructing and catalyzed cataloging our websites parts was certainly a tedious process, the results were extremely beneficial. the interface inventory laid the groundwork for building a sound design system for northwell. we knew that we wanted to create a systematic atomic style guide driven design and the interface inventory helped us deconstruct pages down to their atomic levels, so that we had a starting point.龷
if you need to convince your organization that establishing a cohesive design system is essential, like we did, an interface inventory is your first step . this is especially true for really large organizations, like northwell health, that consists of many teams who work with multiple third-party agencies. this was one of the biggest ways we got the buy-in, that we needed from senior leadership, that we had them would get the way we had. the the buy-in from senior leadership and showed that we had a problem.龷
鲃鹰鯎鯌麿魅鹻鬞鷱龔龐龇鼆鰹鲭鵨鱼黚鹯麑麏鮓鮑黼黸齥鹏鮲鮪龇鵑龞鼔鬜鷤鳟鬙鬗麿鹲鵊鳐龇鵢鵡鲃鹰鯓鯏鵨鬕鬒鱃龔龐黄龇鬐鬎鵎鰩鬌鬈鹅鹻黵鹪鹘鹕龇鼆鰹鲭龇鬹鬇龁 the interface inventory promotes consistency, displaying a variety of similar but still different treatments next to each other, expose redundancy and underscored the need to create a consistent cohesive experience.龷
we then performed usability audit across multiple northwell websites using the ten usability heuristics for user interface design. this helped us quantify and show our stakeholders in a meaningful way the UI issues that needed to be addressed in the design standards project. we were able to categorize them into near term, mid term and long term with about 70% of all of the issues being something that the design standards initiative would be able to address.龷
we also performed an accessibility audit across all of our websites.as a leader in the health care space, we have a mandate not only illegally but morally to have a fully accessible website for visitors with disabilities, and that's not something we take lightly. so we identified numerous ways in which our site was not fully accessible and that was not okay.
so now armed with those three things, the interface inventory, the usability and accessibility audits. that effort led us to get the investment we needed to create the design standards initiative. this is where we partnered with phase 2, to standardize our design system, create flexible accessible components and implement a living style guide.龷
it was important for an organization of our size, who works with multiple vendors and has multiple different areas of design that are not connected, to have a design system that's documented for reference, so we're all speaking the same language. our internal design team is very very small and our business needs are constantly changing per project, so we needed a way to be able to design more quickly and efficiently and by having a shelf of reusable components we were able to do that. you don't need to reinvent the wheel every single time, there's a new design asked and in you don't have to do that, in the end you're gonna save time and money and the same applies to development when the smaller parts have already been built. there's left less effort to assemble them in just a different way. by establishing a common language built upon usability and accessibility best practices, we can now focus on improving what exists instead of having to create something new every single time there's a design asked. and having a library of reusable components has allowed us to train our larger marketing team, who are not designers, how to assemble pages, for their clients, which are doctors at our hospitals.now I'm gonna pass it up to Joey, he's gonna talk a little bit about how we actually built the design system.