 My name is John Ekroth, I'm with Blue Cross Blue Shield Association. I'm super excited to share with you this case study of BCBS.com, a recent redesign that we launched in November. And the use of paragraphs, I'm joined here with Jay Hogue from Oomph. They're our development partner, they're based in Providence, Rhode Island. We have a bunch of Oomph folks here as well. So Blue Cross Blue Shield is a national healthcare insurance provider. We ensure one in three Americans across the nation. And just in case some of you didn't know what Blue Cross Blue Shield was. And so I'm going to just jump into really the content and design challenge of the site. So here we have the old site and it was an old site. It was from 2011. And this is what we took down in November. And this is the design that was up in 2011. So it never changed. And it's dated. And so we really had to start from scratch. So the old site was on an old legacy CMS. I'm not going to name names. Very rigid. The templates, there's just one template. And I'll show you another beauty snapshot from that. And so it was just really a dated CMS. We couldn't do a lot with it. The architecture, information architecture, the navigation was really poor. There's a nav item called YBCBS. I'm like, who came up with that? And when I started, the navigation was not on the homepage. It wasn't until you went into a page that you actually saw the navigation. It was like, oh my gosh. So again, we had to start from scratch. And here's another visual of the one column with the sidebar. It's kind of dated. Very boring. So we were super eager to jump into a new design. We worked with them from that. Got some transition here. So when we started the design phase, we were looking at, well, of course you look at other people's sites. So we benchmarked across other insurers, healthcare insurance, but also other insurers. And one that kind of stood out for me was in Chicago, the Chicago Museum of Science and Industry. And as you'll see here, it's just kind of a really great use of white space, great use of typography. It's visually stimulating. And what I was drawn to, and a lot of us were, was this long format design, which is really common now. And this idea of modularity without being repetitive or looking modular, which really lends itself, obviously, to responsive design. So that was one site that we really were drawn to. And then another was Progressive's website. Again, it's very easy to navigate. It's easy to get to the information you're looking for. And it's a nice site. So those were two sites that I wanted to mention. Next, Jane? Yeah. And so while we were exploring and looking at a lot of inspiration, in the back of our minds, we were wondering how we were going to try to make this all admin-friendly. And a couple of weeks ago, Ethan Marcott, the father of responsive design, was at an event apart in Seattle. And he said this, and this was really, one of the things that we were grappling with and we were dealing with as we were going through this process. He said, instead of pages, we should design networks of content that are composed of patterns. And these patterns can be small, responsive patterns all by themselves. Therefore, they can be stitched together to create a more composite experience. And that really sounded to me like where we needed to try to go. So the title of this presentation kind of jumps to the solution. But I want to go back to a time when we didn't know that paragraphs was going to be how we were going to do this. And we had to explore and design a little bit first to figure out and then try to figure out how to build it. So at Oomph, our design process consists of moving from low fidelity to high. So when we go into a large project like this, we've got a discovery phase where we're gathering a lot of data, Google Analytics, a new user survey with hot jar, heat maps, content audits, stakeholder interviews, and some in-person sessions. Finally, we began some visual explorations with style tiles at the same time that we define and test the information architecture of the site. And then we do wireframes. We do wireframes first. And once IA is approved, we start to marry these style tiles together with the skeletal wireframes to start to form page mockups. When we got to those, when we went into wireframes, it became clear that we'd need a way to divide certain pages up into rows and columns and to start to do some storytelling in a different way. Here we see a landing page for a news section which needed to address media contacts in general about information, some outreach initiatives, social media, and some timely news content as well. So non-structured pages like this needed to tell a story in kind of a chunked up fashion. So what kind of user are you? What are you looking for? You can scan a page easily and find what you need. A simple content column in the middle, like the previous site, with just headlines or maybe some visuals to break the page up, wasn't going to engage a user in the same way. It wasn't going to be very interesting. So we needed visuals coupled with content and a wide array of design variables to give the page some variety without breaking the consistency of the brand standards. And so we began to ask ourselves, we had to ask ourselves what Drupal Tool would help us achieve this design direction. And so that's where we came to the Paragraphs module. I want to just a quick shout out to the development team behind it and the strong community of maintainers out there. For those of you who are unfamiliar, and I doubt that at this point, but Paragraphs basically adds a new field type that works like an entity reference. You can pre-define all sorts of paragraphs to give your end users anything from a simple text block to a configurable slideshow. They do a pretty good job of explaining this on the module page. On the left is a typical body field, and on the right is how they illustrate how you can chop that field up into rows. The last bullet here, though, is what really piqued our interest, right? We can add and configure custom option fields. This is what we ended up relying heavily on. At the same time, beyond that, why did we like Paragraphs? Basically because we could define the options that an author would have available to them as they designed the page. They can create rows, they can choose the pre-defined layouts and elements, they can configure all the design options, and we have that control. We had front-end control over that. They didn't have to think about a lot of things like responsive design. They just had to think about their content and how to present it in the best manner. They had a lot of flexibility, but within a pre-defined structure that we could really control. That for us struck a great balance between flexibility and avoiding pitfalls that authors will go rogue and really break stuff or go too far outside of the brand standard. What we ended up doing is we had to break things down. Once we had a design, we had to figure out, how are we going to build these things? How are we going to make it modular and repeatable? We used something in the UX world that's called atomic design. You start with your atoms with your little smallest bits and you build up your molecules in your organisms and eventually they turn into templates and pages. This method was coined by Brad Frost. It makes things really reusable and modular. Take a search form as an example. Your atoms are the label, the input field and the search button. Your molecules, how they work together. The organisms might be how they work in the header and so on and so forth. In that way, we could break things down into smaller pieces. The pieces we broke things down into, pretty simple, was an icon background and all the various things that a background could do and content. Planning a system meant starting with wireframes. We went back to the drawing board after we had some design direction and we started just to break this down in a more skeletal way. These would become kind of the building blocks for everything else that we were going to do. We then defined some properties, some options that would be available for each atomic element. We'd finally configured a lot of them. Remember Paragraphs lets us define custom option fields and this is where this started ahead. Our options included icon selection itself, colors, background colors, special text formatting, alignment and even a theme. So if you had a light image or a dark image the text could automatically assume white or black. We also had a bunch of custom classes that were available to the client and CK editor. And so now these atoms and properties started to come together to form a card. A card can support many things and the options allowed authors to create a lot of variety as seen in some of the examples here. They have access to a controlled set of options and can use some or all of the elements that we had. And next we were able to take these cards and arrange them into bundles. So now we're slowly building the design mockups that we were moving towards. Suddenly now we have groups of design elements that are ready to give a page a unique collection of rows to tell the right story. So again going back to some wire framing. All in all we have configured about 10 different paragraph bundles for the site. All of them use the card molecule as their basis and the wire frame examples I have here are desktop views of a single card hero at the top, a three card hero under that, an image card row and a video card row. Each of these bundles has responsive design built in so they are the small responsive patterns that can be stitched together to make pages. So a quick view of what the responsive does, pretty simple stuff but the big takeaway here is that the author doesn't have to really think about it. A typical two card hero will stack for mobile. The author has the option to hide the image for mobile if they so choose and the desktop version puts those two things side by side with configurable options for width. So if I got two cards I can make it 50-50 or 25-75 etc. When we put the design skin back on it this is what it started to look like. So we're able to make the hero image and the cards look a little bit more integrated now. This feels like a more cohesive row. We can take the background color of the cards and fade them a little bit with an overlay. So these atoms, these properties, these molecules form the flexible basis for our variable page layouts now. For an author again all they have to do is think about the type of presentation for that content and then choose the right options to try to support it. So the design system with the paragraphs does the rest of the work. So this is a Drupal audience who here wants to see what the admin looks like, how that works. Thought so. All right. I didn't see all hands. So this is the edit screen obviously of a node and what you see here are about eight rows that are for one of the pages that you'll see in a second here. So imagine we want to add another row and there's the add body text pull down. So I'm going to zoom in here with the transition. Beautiful. And then we'll go one layer down and these are all the options that we have on BCBS.com. He mentioned a two-card row, image store, or image gallery. These are all available to us. And so if we wanted to configure one, let's say a two-card hero, there's the body copy and then the options for that single card within the two-card hero. I know I just, okay, too much coffee. Sorry about that. We have, let's say, a two-card hero for one of the cards that's the body copy and then the options beneath are, do we want the card to be vertically top-line, bottom-middle? What's the background image that we want for it? The color, the icon for it? All these options are available to me and my team. And so not only do we get to have control of the graphical or visual element, it's just a really quick turnaround to build pages. Really, really exciting. So that was the card option and then for the row option, then we can control the width of each card. We can control, again, the background for that entire row. We could hide it on mobile. It's pretty incredible. So let's do some show-and-tell. So this is the old site again. Not great. This is the new site. This is the homepage for the new site. Very much more simpler design, cleaner. And what we have here is one card row and then a two card below it. Another example that we're going to see here... Oh, I'm scrolling. Sorry. The next... He demoed the news area of the media center. Sorry, this transition is taking forever. Okay. Got the media center page. This is the new news site. Much cleaner. It allows people in the external media or people who are looking for news to easily scan a browse, but you'll see the three card, another three card, single card, and so on. This example is pretty cool too because we are able to add blocks. So these two views below are based on views. So you can couple views along with the custom paragraphs. The last example here is just a page about the history of Blue Cross with Shield. But again, you can see there's a lot of elements that just really make it a visually diverse, but interesting and really on-brand page. So it was really cool to see this kind of page come alive. I just want to say, so we spent time designing the home page that was really important. We spent time designing the news page as a team. This page and a lot of other pages like it, John is completely taken over now. And so we've given them basically a jumping off point. And all the tools to do this, and so now the powers is all on them. And they're able to keep everything on-brand, consistent, and try to support that fast turnaround as well. So here are some of the other modules that are worthy that we used alongside the paragraphs module. So I'll let you take a screenshot of that. And then after this session, we have time for questions, which is great. But after the session, we also want to invite you to the room 306 for Birds of the Feather. If you have more questions for the development team or for myself. So yeah, any questions? Yeah, if you do, please use the microphone. I know it's being recorded. That looks like a really good system. What happens when an editor wants to see a preview on that edit page? It looks like a whole lot of drag and drop and complex. And you have to open it up to see each element. But is there a way to see it all on the edit page? Not now. But we saw another session that kind of demonstrated live previewing. So it is kind of a back and forth when you're building on a page. And then you saw the example of like eight paraphros. You kind of have to train yourself how to know exactly which one you got to get to. We're also looking at how we can name, have like a descriptor for each paragraph row. So like if we have like an intro, we could just have a label for it. Oh, do you have a process for adding new elements? Like if someone comes up and says, oh, we want to do this new kind of feed, you know, a new design element. Yeah, I mean, that's the great thing about paragraphs. So we can, we defined as many as we thought we'd need at the onset. But there's always going to be more coming down the road. So if we have like one that can specifically handle video, we eventually learned we needed one that would handle an iframe. So we had third party services could use that. It's fairly easy to define and configure on the admin side what a new paragraph row would be. Test that and then push that up. It's just, it usually will be a question of how much front end do we need to add to that new layer so we can have that responsive design support. I don't know if you have search in your site, but I'm wondering how using paragraphs integrates with search and search results? With search? Yeah. We can speak to that more later, but I haven't seen any issues with the way that we're able to. We're also using solar on the site as well, which might help. I'm actually not the greatest person to answer that question. But we haven't seen any negative effects. Could you go back to the page editing interface and talk a little bit more about how you got that to lay out and organize that way? We did not do any additional work in the admin section yet, as far as like making that pretty or making that look more organized. A little bit more difficult to do, but I would love to be able to get in there. My UX brain really wants to fix that. It's not fantastic, but that is basically how that comes out of the box. So you're talking about... Yeah. I thought I had worked with paragraphs in Drupal 8, but that interface looks dramatically different than I remember, so maybe I'm just thinking about paragraphs in Drupal 7? I'm messing everything up here to it instead. Yeah, so you were... Right. Shoot. Here we go. So you were talking about this? Right, yeah. I guess maybe just in Drupal 7 it's a lot. Okay, so in Drupal 7 it is a lot different, and one thing worth noting here, we brought the flexible content to the top of the tab, so it would be the first thing that would load for their team. You still have access to basic info, which is the body content area, which they can use. We've set that up to always appear above flexible content, and further, under media, is the featured image. So pages also have access to that. So they almost have two other rows that are built in that you can always use in addition to the flexible content. So it's not something you have to use, but it's always available on anything with the page content type. Is there something special that you did to get it to appear in the sections of the page to show in the vertical tabs like that? Field groups, says John. Okay. All right, thanks. What did you use to select views in your paragraph entities? Again, that might be a... Could you repeat the question? I think you were able to select a view in your paragraphs. How did you do that? Right, it's a block. So it's a view block. One other question. And again, we'll have the birds of a feather after this. So if you have any more in-depth questions. Are you using any specific CSS framework like a Bootstrap Foundation for the UI? You're asking the framework? Yes. If you are using a specific framework like a Bootstrap or Foundation... It's all custom code. We don't typically build things on Bootstrap or Foundation, so we were in Drupal 8 ready to fully leverage Twig, so there's a lot of Twig templates here that help support that with custom classes that we write all the SAS for. Thank you. Yeah, sure. So the end result looks pretty fantastic and pretty amazing, but I'm kind of curious, what were some of the challenges or pain points of using paragraphs that you had to overcome? I think the biggest challenge probably is we have a lot of configurable options, and part of that was so that we didn't create a system that looked very limited, that made a page have some variety, but the variety was so limited that you started to think it was all just made from the same parts. So I think that was the biggest challenge is deciding where was that line between enough options and too many? Because also in the admin, you have a little bit of cognitive overload there with all of the different dropdowns that you think about as you're building a page. So I think that was the biggest obstacle was just trying to get that right and make sure that authors had enough control without too many things that they had to think about. Thank you. I might add to that. Sure. So by the point we were handed the keys to the house and starting to build, and from that point to launching it was like three weeks. So one of the obstacles is learning that I guess all of your options, right? You have so many options and really working really quickly. And to this example, like knowing exactly how to get in and just turn it around and crank it out, that was an obstacle. I was going to mention that the bathroom over there, they pulled all the tables and chairs already. So I don't know how many people here were going to go over to there or not, but is it possible to leave it in here afterwards? Well, there's another session right there. Oh, is there another session right there? Okay. We can also meet down in the hall. Did you find yourself at any point wanting to reuse the block elements, these paragraphs that you had? And if so, how did you work around that because paragraphs aren't reusable? Do you mean like the clone and entire page of paragraph rows or do you mean specific rows? Or specific rows, I suppose, like to have a library of those that you might reuse at multiple points on your site. It's all manual. So that is something we are really interested in looking at, not only cloning an entire page that has, I mean that's really nice for mocking up changes to an existing page, but also to your point, like a specific, let's say, approach, a design approach to whatever that row is. Absolutely. So that's something we want to investigate. Gotcha. Yeah. Are there any challenges that you're aware of as far as migrating content into a content type using paragraphs? It was all for, so the whole site, there is these paragraph powered pages, but then we have structured content like press releases or blogs. So for all of that, that was an easy migration. But everything that you see that has like a custom look and feel, it was all built. So none of it was any technical migration. I was thinking paragraphs are just embedded into content types that you're bringing content into. Yeah, I'm not sure about the details there. If they wanted to move, say, later on from Drupal 8 to Drupal 9, like what would be involved in that now that we have all this content chunked up into paragraph. But I think like field references and entities, that is what they all come down to being. So I think there can certainly be a way. Yep. Awesome. Thank you. Yeah, sure. 241, I think we're going to, I think we're going to end up right now. So thank you all.