Joey：

我叫Joey Gros，是P2创意设计部门的主管。P2的介绍（反正就是说我们很牛，此处略）…

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. 

今天我非常高兴能在这里和大家聊一聊P2和NW是如何使用Pattern lab建立一个活的风格指南，以及我们是如何将其整合到Drupal8中的。

so today we're super excited to walk through how phase 2 and northwell health built olivia style guide using pattern lab and how we ultimately integrated it with Drupal 8 platform.

和我一起的还有来自NW的 Karly Cunningham 和 Peter Sanzone，现在先让他们做一个自我介绍。

join today with Karly Cunningham and Peter sanzone from Nortwell and I'll let them introduce themselves .

Peter：

嗨，大家好，我是Peter Sanzone，我是NW的技术主管，我的团队负责Northwell.edu网站，它是一个基于Drupal的系统；我们还负责所有NW面向客户的互联网产品。

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.

Karly：

嗨，大家好，我叫Karly Cunningham，我是NW的用户体验经理。

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. 

首先，我会谈一谈为什么花这么多时间和精力来建立这个风格指南是一件重要的事情，以及我们是如何说服我们公司领导层支持这项工作的。（第29节）

first I'm gonna speak a little bit about why it was important for us to invest the time and energy into building a digital style guide and how we made the case for it to our senior leadership .

然后，P2的Joey会介绍我们是如何建立起这个设计系统，以及达成了哪些成果。（第30节）

then joey from phase 2 is gonna talk a little bit about how we approached building a design system and what we accomplished .

接着，Peter会从代码实现的角度介绍怎样在Drupal8系统中实现我们的风格指南。（第31节）

then Pete's gonna talk a little bit about the implementation aspects of actually implementing the digital style guide into Drupal 8.

最后，我们会做一个总结，然后给大家一个提问和沟通的机会。（第32节）

and lastly we'll highlight some results and learnings before opening up the floor to any questions and conversation.

现在，先对Northwell heealth做一个介绍。NW是纽约州最大的健康服务公司，健康行业最大的私人企业。我们有23家医院，以及15000名医生和护士。我们每年通过我们的医生办公室、急诊室、各种诊疗场所接待患者超过4300000名。但是我们并不仅仅是一个照顾、治疗患者的机构；我们的Feinstein医学院和Hofstra大学有医学研究的合作，培养未来的医疗专家；我们企业的部门取得了很多改善人们生活的突破和创新。

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 .

Joey和Peter之后会讲述我们是如何在PatternLab中创建风格指南的，而我想先谈一下为什么创建一个风格指南对于我们来说是非常重要的。

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. 

我们在2016年将我们集团的名字由长岛犹太健康系统改成了Northwell健康，这样名字听上去就更加顺口了。这次改名行动同时也伴随着整个集团品牌系统的改变，我们有了新的logo以及一整套鲜艳的配色方案——它们体现了我们这个品牌的多样性。从我们的设计团队第一次拿到这套新的品牌设计方案到在我们所有的网站和APP中实现这套方案，并重新上线他们的时间只有3个月。我们的真正麻烦在于，新的品牌设计方案是为平面媒体设计的，设计公司并没有考虑品牌在互联网上应该怎么执行，更不用提什么界面的用户体验或者网站可访问性了。

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. 

2017年开头的时候，我们的新品牌还很年轻，我们知道我们应该改变这种混乱的局面。但是，又面临另一个问题，那就是我们要如何说服我们的领导层支持我们的想法，如何让他们理解新的品牌所面临的问题，以及这些问题将在来年不可避免的影响我们的品牌在互联网上的增长。

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. 

这里你可以看到一些不同的例子，其中有按钮也有链接。我们把这些东西收集到一起，就形成了界面清单。实际上我们还有很多个页面用来展示网站上的各种按钮和链接，而这里仅仅是其中的一个页面而已。你可以看到，这些例子中找不到一个模式。如果你想学习如何去创建一个界面（元素）清单，你可以谷歌Brad Frost（也就是前面几节介绍过的原子设计理论的提出者）。

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 . 

当我们完成了我们的界面（元素）清单之后，我们得到的是一个超过80页的清单，这其中包含了各种不同的元素。他们之间所表现出来的设计语言的不一致性就显而易见了。这里是这个文档中的更多的一些例子。

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.

虽然将我们的网站界面拆分成零件并对零件进行分类是一件非常无聊的工作，但是这个工作的成果却对我们下一步的工作十分有益。界面（元素）清单的形成为我们之后创建一个合理的NW设计系统打下了基础。我们想要创建的是一个系统的符合原子设计理论的由风格指南驱动的设计，界面清单则帮助我们将网站拆解为原子级别的状态，并且给了我们一个合理的工作起点。

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. 

如果你和我们一样，需要说服你的单位创建一个设计系统对于这个单位是至关重要的，那么你的第一步就应该是做好你的界面（元素）清单。对于类似NW这样的大型的组织或者单位来说，将界面（元素）清单的制作作为工作的第一步尤其重要——大型组织的内部往往都是由很多不同的团队构成的，每一个团队都会和好几个第三方服务商合作。我们将这个界面清单展示给我们的领导层，让他们看到品牌正面临着一系列问题。

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. 

然后我们对多个NW的网站进行了易用性审计，审计的标准是雅各布·尼尔森提出的10条用户界面易用性经验规则。这样做使得我们可以量化我们在UI界面上遇到的问题，并且用一种好理解的方式将这些问题呈现给所有相关的人员，比如我们的股东、管理者、用户等等，让他们知道这些问题是需要得到解决的。这样做还使得我们能够将这些问题分类成马上需要解决的问题、过一阵子需要解决的问题以及需要经过长时间才能解决的问题；并且这其中有差不多70%的问题是可以通过设计系统来解决的。

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.

现在，界面清单、易用性审计和无障碍性测试都做好了，我们终于说服了领导并拿到了我们需要的预算，我们将用这笔预算建立一个设计标准。于是我们和P2合作来建立这个设计系统，创建灵活的无访问障碍的组件，并形成一个活的风格指南。

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. 

有很多供应商为我们服务，我们在各个不同的领域都有设计业务，而且这些业务之间都没有什么联系——这使得创建一个设计系统对于一个像我们这么大的组织来说是非常重要的，因为它可以帮助我们的所有团队都使用同样的设计语言。我们内部的设计团队非常的小，我们的商业需求也随着每个项目的不同而不断变化，我们必须能够更快更有效的作设计，而有了一堆可以重复使用的设计组件使得我们能够达到这个目标，这样一来，你就不需要在每次有新的设计任务的时候都去重新创造一个轮子，到最后，你会发现你即节省了时间又节省了金钱。同样的道理也可以应用在开发阶段。当更小的组件已经存在了，你要做的仅仅只是花一些力气把他们用不同的方式拼凑起来。这些小的组件在建立之初就充分考虑了易用性和可访问性，我们使用它们来建立起一套通用于每个团队的共同语言——这使得我们可以把精力集中在改善现有组件上，而不是每当有新设计任务的时候都去创建一个新的东西。这样一个可重用的组件库的存在，使得我们得以训练比我们大很多的市场团队，而这些人都不是设计师，让他们学会如何使用组件去为他们的客户，也就是我们的医生们，拼出一个页面。现在，Joey会接着讲述我们是怎样建设这个设计系统的。

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.