Flexible Design Systems with Drupal 8 and Layout Builder

all right so we're here to talk design systems a little bit of Drupal and a whole lot of there is music so over the summer we had the great pleasure working with them again on another project last year we did a talk at design week about our project with the museum side of things relaunching they're their main website and this year what they wanted to do is is start an online publication platform or at least that's what we started calling it but it it quickly became something else and that's sort of the surprise that we'll be talking about today for them they wanted a way to put their scholarly publications online quickly and easily a lot of them go along with the exhibitions that they have but this one coming up that they're working towards was called raid the icebox it's a 50-year anniversary of Andrew Andy Warhol's installation and the late 60s and they are celebrating that yet again with a lot of new exhibitions they're letting a lot more artists to it and Andy was able to do which was is if we read the collection and put together shows that could create a new context around the artwork so they wanted a way to bring that to life on the web that's what we'll be talking about but first just a quick little introduction hi my name is Jay Hogue director of designing experience and I was lead UX person on this project along with Cathy Beck Cathy helped to do a lot of the site building bulk of the site building actually and we both really collaborated hard to make this an interesting and flexible platform for our guest artists and authors to use we're also hiring it would be remiss of me not to mention that but we're an agency in Provence we're headquartered here but we do have 25% of our folks remote so a couple caveats too off the subtitle of this talk is really the pleasant surprise of what creative clients can do with a powerful set of tools if some of you designers if some of you have had to interface with clients before that's not always the case sometimes you great create this great system create this great template and they still managed not to use it as well as they could this was quite the opposite this was quite a surprise for us and really a really great one and I'll be talking about design systems in general a little bit but what we did is in no way the design system there's not really one way to do this design systems are method they're not there's not one set of best practices and sisterly there so you if you want to implement this you can implement this in a myriad of different ways and that really should change based on the brand and the client that you're working with this project we wanted to admit as well is the exception not the rule we don't get to do this a lot this was really a great opportunity for us usually design systems or design projects are a lot more rigid this one intentionally was very fluid when we trained the client on the system they went away and figured out how to break it they really wanted to see where the edges were so it was a very interesting way to work and one of the other things we didn't we were kind of Unleashed by was the fact that they were not interested in supporting older browsers so we didn't have to worry about IE 11 and the development community that's a big deal that means we could drop a lot of workarounds that would be necessary otherwise and really use a lot more cutting-edge technology which was great and finally for the folks here who are familiar with Drupal or layout builder this project this presentation is built in it so I was able to use the platform to build this slide show and talk about how it works a little bit of meta and section happening here but that just proves how powerful the platform ended up becoming so first start off when I say design system what do I actually mean so probably have heard about of other organizations that have design systems IBM has one called carbon Airbnb has one a lot of large companies have what they call a design system capital D capital S these are large platforms that document all the different elements they have to use from typography to color to the way they use illustration and photography down to what a call to action button looks like what their email looks like it can really encompass everything when we say design system it's more of a small D small s this is the start of something bigger we hope and this is more about a flexible way that they can lay out marketing pages landing pages editorial content in this case and leverage multimedia to do that yeah you can come on down in the front we also made it you know we've been thinking about these for a while this is my third year probably working in this this way of way of giving tools to authors and we intentionally try to keep it platform agnostic that means we're talking about Drupal we're a Drupal shop but it doesn't it doesn't only apply to touple and it doesn't only apply to the tools that duplicates you either there are a number of ways we could solve this problem we happen to use a couple that we'll be talking about but they're not the only way another way to think about this just to make it a little bit more clear to use probably some terminology that you've seen before it's a template system which is not a design system versus components templates are usually a rigid set of things on a page that an author has the ability to fill out they have fields they fill out a title they fill out the body maybe they pick an image it's a way to do one thing it does it well but it does that one thing only components are more about flexible pieces of media a large banner image an image video body content and those can be moved around at will so the author is not hemmed into one way to those pieces they can use them in a myriad different ways one of them is more like an airplane hit where you have a bunch of parts but you can only build an airplane and the other one is a little bit more like a Lego set where you have a bunch of things that work together that are meant to harmonize and you can build whatever you want so that's really what we're trying to talk about here so with the client what problem were we trying to solve and this was interesting because it started in a really fuzzy place we were asking a lot of what-if questions they came to us with a basic idea but with no content they really didn't know what people were gonna produce with this and they knew there was gonna be a wide variety of content from something that is more typically like a scholarly publication that goes into the history of the artwork in the show to the biography of the artists involved to something like what they were working towards now with raid the icebox and and in the Andy Warhol retrospective where artists were gonna really drive this and might do anything with this platform might have just a single video up there might have a five thousand page five thousand word essay we really didn't know so we were working around ideas what ended up happening is that we gave them some wireframes of what we thought the design system framework could be and again they went away and tried to find where the edges work they dreamed of what their artists might be producing and did their best guess to give us back something to work from in the back of their minds to you know part of part of the charge here was they weren't interested in just creating this for themselves sure that was the first thing they wanted to do but they wanted to open-source this platform they wanted to make it available to Harvard to Yale to other museums to smaller universities to larger ones because they knew this could be a powerful way to publish content on the web without a lot of guardrails again so that was in the back of their minds but we weren't really sure how to solve that problem yet and then for us as an agency you know we we do this quite a bit we do that in a couple different ways and while every client is a special snowflake we want to create tools that are going to be a solid foundation for us to create those one offs from so we wanted to see if layout builder in Drupal now could give us that foundation that would be easily he's more easily ported from one project to another so that was working in the back of our minds tooth so when they went back and did some design it came back with something like this which is actually fairly typical opens up with a big hero image there's a little annotation there about could this be a video could this autoplay some text some imagery floating around on the page and the conversation was can these adhere to the top of the viewport they've seen examples of that can things slide and slide out fade in fade out can they autoplay video for navigation on the UX side of things what does the header look like how do i access that how do I move from one page in this publication to another so we were really exploring some things but it's still fairly fuzzy at this point and then down here are certain examples of those scholarly things that we still had to do like image credits page credits bibliography of things that they've referenced in this article how others can reference this article and their and their scholarly work so we had to support some some of those fields as well and then finally at the bottom of the page I was interested in making sure that no one could hit a dead end so at the bottom can we reintroduce the table of contents in a slightly different visual way to make sure that people can move horizontally through this publication jump around from one artist to another or jump around from one topic to another very easily so that became like a very loose framework for what we were going to try to build that's a framework of what we talked about with the client and then as a Drupal shop we came back to them okay I think this is the tool that we want to use to do it so in Drupal right now there's something called layout builder and to back up a little bit Drupal is one of the larger open-source platforms available now open source means it's free software but us as an agency it's not free to customize and our job is to take that platform and customize it to whatever the client means it can be anything from an e-commerce application an e-commerce platform just simple marketing site to a blog etc and we work with a lot of different agents a lot of different nonprofit organizations healthcare organizations and others on Drupal all the time so it's a really powerful platform to do that with and what they have available is very extensible and flexible as well so we have the option to turn these things on or off on a per project basis so for RISD we turned on everything that had we had available to us for layout builder and for the Drupal folks in the audience this might make a little bit of sense for others it's fine just just just affair and there's one custom thing at the bottom that we had to create for RISD specifically but that's a general way of what the backend starts to start to do and look like to put that in a little bit more in perspective if anyone's used to CMS before they're they've probably seen screens like this it's an admin screen it's not very pretty it's very functional though there's a number of different fields that you get to layout you don't get a visual interface of what the page will look like typically on the front end when a regular user is going to see that so there's a slight disconnect between the authoring experience and the consumption experience but this is fairly typical of what what some of these things look like and actually this is a publication page here these are some of the available fields that someone has again for those scholarly bits the page credits the bibliography etc and then finally again a little bit more towards towards the audience the cool thing the great thing about layout builder that we found is that it gives us the ability to say for this piece of content we're gonna let the author go crazy we're gonna give them the ability to manage layout which is that button and the sort of middle there for others you don't have to do that and actually that's now that we've done this project that's how we more our we're doesn't we're typically working with layout builder in the future is we're using it it's a powerful tool for us to build what these layouts look like but to make a decision the author can edit this one they can't edit that one so a real-world example this is another preview of what we've been working on AVMA American Veterinary Medical Association very different client with very different needs same platform also using layout builder what we decided to do is say you know a press release we're gonna lay this out in the admin we're gonna put the headline in a certain place and the the publication date and the title all in where you expect them to be now this is built with layout builder but the author doesn't get to edit this at all they just fill in the fields in the backend like any other author would so we know where things will go and we make the field smart enough but they don't have the ability to really change this layout same thing with a regular article maybe it's a little bit prettier but again they have access to these fields and they can supply content or not a better way to think about it now so lay out what layout builder will do as well as for a landing page they have an annual convention this is more of a marketing effort this is a more this is something that shouldn't be inside a box does she change from year to year this this should reflect the kind of content that they want to try to communicate on the page so this one we said okay you have a set of components now to work with we're gonna unlock that and you can change this layout on a year-to-year basis on the day to day basis if you really want to so they have access to a component that basically is this headline and introduction they have interacts s to a cool quote and a body filled they actually have access to a countdown we built them a special component that's just a countdown to the day that this convention starts so by component that means they decided to put it here but if they wanted to move that up to the top they could if they wanted to put it inside somewhere else they could so they have access now to be able to say I want a photo there I want content there I want to switch it below these are all distinct rows and this will make more sense as I start to show you the way way out building works for Christie so this is a very different idea this is taking those components again and laying them out into a page that communicates a single message for this case it was their annual convention now you get a little bit of an idea of how Drupal and layout builder can work for some people this is now how it was going to work for RISD so a tour of components the publication platform the exhibition platform honestly sorry we're we started with publication but we're moving on and thinking about it in a larger way trying to remember to call it an exhibition platform now is built on two content types and it sort of still kind of retains a little bit of print quality and then there's a publication there's kind of like the book cover with a title and a cover image and and some other information and then there's a page or a book chapter there's a and that page can make a reference and be part of a single publication and it has a couple extra fields like I had mentioned for those scholarly things as well as for different fields for a table of contents and that was so that we could make something really flexible for them the initial table of contents we're launching with is one design but we know later on down the road we might have two three four different layouts just for the table of contents that they want to switch between from one publication to another so that the data structures fairly straightforward the navigation block that I showed you in that design mock-up is also fairly straightforward but there's um there's a number of things going on there to show the title of the publication but since this is also mobile responsive it switches between the field for a short title and a long title depending on how much room we have to work with we have next previous navigation in the middle and then we have a few controls at the end for the for the viewer to control the font size because they knew this was going to be a little hard to read this might be something that people would need control over there's a print icon again still because their audiences scholarly you might want to print this out even though with all this video I think that's a little nuts and then there's a link for that thing at the end is a jump link that will take someone down to the citation block where they can learn how to cite this publication in their own scholarly work but now the more fun stuff to lay out a page you had seen in the convention page how it's sort of made of rows made of long sections that go across the entire page that's how layout builder basically works and inside that you have the option to give authors complete control over that content so what we did was we came up with a couple different options for for them if they pick a single row for example they have a number of different widths they can pick that that content will contain it'll leave the go full width or it'll go something smaller and we made sure to make these smart in the way that when I pick 25% as as an author for desktop I'm looking at it at a nice big screen I don't want that to be a tiny little column probably for a mobile device that that doesn't make sense so while I might be thinking I think authors typically want to keep in one mindset its kind of difficult for them to author for all different viewports they're gonna be authoring in a desktop mindset they pick what they need for a desktop but what we've done is make sure that and that what that that selection is gonna make sense on a mobile device as well so 25 percent on desktop is not 25 percent on mobile but the great thing is that the authors really shouldn't have to worry about that it's just built in to the way the system works um same basic idea for for two columns again 5050 when we wanted to support that but we're also supporting 25 75 7 525 et cetera et cetera we've got all these options built into the way that works and then we gave them three combs which they don't use often but it is there and three columns again supports the more typical layout but also supports these other stranger layouts that could be a little bit more fun to use and these expose what I'm talking about as far as being a little bit more smart about the options we give someone so if someone chose this layout that shouldn't be what the mobile layout is the mobile layout should be stacked and it should present that content in a more legible fashion as the viewport gets bigger though maybe that supports 25 2015 11 step and then as desktop now they get what they've actually picked so again these are a lot of things that are happening behind the scenes that the author shouldn't have to think about but it gives them the ability to author desktop first and know or trust that there should be still a really good mobile experience behind under the hood so now that I've gone through those illustrations there's a couple more here for alignment this is fairly straightforward they don't really make too much difference unless you have multiple columns that you're working with so for this we have vertical alignment but that's only going to be present when you have a longer column next to a shorter one you won't really see that working same thing with horizontal you're only gonna see horizontal if you pick that 50% in a in a hundred percent section and you'll be able to align that left right or Center depending but if it was a hundred percent not gonna make a big it's not gonna change anything alright so those animations are fun but here's a video of how this actually works so right now I'm in the back end for this presentation I'm editing this presentation right now and the way it works in the back end here and Drupal is that there aren't these little dotted lines pop up to show you where the edges are to show you where these sections are between every existing section is the ability to add another one so you'll see the add section button up here again and again and again that's the way that you add a new complete row you'll also see that there's add block blocks are these discrete pieces of content and they can go in existing columns already or they can go in existing sections as new content the cool thing is that they can be dragged and dropped around so this becomes a more visual editor once I pick a section I can't really change it I can delete it or I can I can change some things about it I can't change the layout that it contains but I can move blocks around from section to section I could move them from the bottom to page all the way to the top if I wanted to the other thing we did so the the front-end experience has a lot of animations it has a lot of interactivity we wanted to strip that back for the admin it's not a great authoring experience when things are flying in and moving around on you so instead we just label things with their effect so that the author has an idea of oh yeah I added an animation to that or did what I just save actually work I don't see it you know in this experience so we wanted to make sure that they could quickly understand what they've been doing in the system already as they edit content so now real quick I'll go I'm clicking on configure section and a tray pops up and we get all the different options that are available to someone some of them that we've already talked about so we have the alignment options those it's pretty straightforward we have a number of background colors and for this client we have some future ideas so we ended up just extracting the color names 1 2 3 4 5 in order to help them with that though that's a terrible naming convention is to give them a little a little swatch preview of what that color is for this publication the idea is that can change in the future so I can pick a background color I'll close that up here are my width options so on the fly if it's a two-column I can change its layout if I want to and then there's a couple extra things we just called them extra but basically these are these are two like powerful toggles sticky row means that the entire section when it hits the top of the viewport it'll stay there and then Hiro means that the image that's been provided is the content so that's Hiro is a kind of a UX design term meaning it's a giant image it takes up the entire page so that's how that's controlled it needs to act a little bit differently than some of these other blocks so we had to make it special and then again with the idea of flexibility in mind always we've provided a custom class field on almost everything and this allows us to create quick little one-off things for them to use without having to build it into the entire entire system that makes it easy to extend it and add more functionality to it as we go forward but we also have the ability if they're if they're savvy enough to use other classes utility classes they're called to really tweak the design on an element by element basis if they so choose and we I've used that in this presentation quite a bit actually so I'll close that that's so that's for the session that's for the entire row across the page here now what we'll do is we'll take a quick look at configuring a block so there's configure which basically just means edit the content out there's a title there's a body field optional background media that you can upload and then in the editor itself which is which is fairly WYSIWYG what you see is what you get there's a number of stylistic options as well we gave them a really a plethora of things to play with so that's how editing content looks and then quickly on top of that there's something called style settings and these are where there's a lot more magical stuff happening so I can edit some of these things here's all of the animations we've made available them I can change it or choose a different one if I like and then if I wanted to add something new so these are some of the other options that we have available so a particular block and have a different background color then its section they can have different kind of spacing zero spacing or much healthier wider spacing if it's the single column of content and we don't want to break this up into multiple columns there's a column count option which basically means now text can flow from one column to another in a more responsive fashion without having to say I want this block here then that block there it's it's a way to make multiple columns happen with really text-heavy components and then we have animation applied in this case we have a custom class applied in this case so that's another way that people can really over take the control of the design from the default to whatever they need to do in that instance this is a quick little like overview of what the backend looks like with that authoring experience with layout builder looks like I'll go real I'll go through here as well and show you what adding something new can look like so I'm adding a section I'm gonna choose a column my alignment my background it can happen fairly quickly here okay with the default gonna close that I don't need any of those and I add that this really hasn't done much other than now giving me the ability to add a block to this to this new row so otherwise without a block inside of it without content it would just collapse here I have adding a video so I'm adding I get a quick little title for me to be able to tell which one it is in the admin I've been upload or choose from the library of videos I've already uploaded but this is pretty quick to do so I'm uploading the video I'll give that the required title I'll pick a category so I can more easily find it later and then I have optional subtitle optional it's called a poster image so that's like the first image you see before the video plays they can control that if they like and then there's a caption as well that and that can play into accessibility a little bit at the bottom here is what is kind of fun so they're able to add a they're able to add a video and play it like a normal video like I'm doing now but they're also able to add a video as a background image that's something that would just autoplay in the background and what we've done is we've even given them the ability to say I want this video to play automatically it'll add muted attribute to it a lot of the autoplay attribute to it and it'll just work or I want it to play with controls and and they have the ability to do that on the same video they can use the same video more than once if they want to that way as long as it's short it doesn't affect performance too much but that's the flexibility you have to work within the system itself as it stands try to go over here again while we get to the meat of it now we can actually show you a little bit more about what they were able to do with this system so this is some secret stuff that they've been working on but so again like I said they're working towards this exhibition a couple of these chapters I'll show you are will be coming online in the next couple weeks a couple of them were just examples that they put together when they were playing with the system and figuring out how to break it so I'll start I'll start with here now the thing that we noticed lit the way that they were using video is it's was really a lot more dramatic than we expected so they ended up going away and shooting all these videos in the museum themselves this is the author of this particular this this particular chapter but now as I scroll I control the pace so timing becomes part of the design I feel like this one is a little bit more a little bit heavier content wise so there's a lot more text than some of the other ones but you see how things come in very nicely there's that idea of sticky now something's hitting the top of people and staying there something else will scroll in into place so these become like vertical scrollable galleries in a way and then here's that option of a background image that's just Auto playing when I get to it and as I continue to scroll other things are coming in as well static images are coming in they're floating on top again this layering is not something that we quite expected them to come back with us come back at and then this is also a really nice effect they've got these pieces of the catalogue that was originally published back in 1969 and some descriptions and other pieces come in and kind of create the stacking effect one on top of the other they even even can't have been nicely so they don't line up perfectly that's a little strange but they're gonna do some things like that there's some more video a lot of these are slow and they feel more they feel more like a meditation in a way and some more text some more text some more text so that's one sample that we ended up seeing coming back another one is the same system the same components the same colors and type styles but a very different approach this artist was interested in creating something that was really more like a meditation so here there's some audio and some video that someone can interact with but then there's some kind of a guided meditation script it becomes the content for this one so this again has a very different feel than what we expected I'm not reading a scholarly publication anymore it's something else it's also not near Times skyfall snowfall or anything like that it's a little bit different because of the kind of content that they're working with so they're inserting audio they're inserting video this is a lot more paced and feels like a little more work to me through as I scroll and there's a few of those few of those kinds of sections as we go down the page to go in a completely different direction this one is again more layered and has that slow video effect but I really was was interested in the way that they were there almost so slow that you don't do you think they're a static image so it becomes a little bit of discovery like oh this is changing this is doing something especially when we get into some of the later video so those that's a video autoplay with a another video wanna playing that little scrolling right on top of it and you don't know that's a video in terms of links essentially and they're gonna have pieces of content that will come in and float on top of these kinds of things so it becomes very I don't know very atmospheric almost this one is funny I don't know if I want to hang out until the end but there's a there's a little funny yeah there's a bunny in here but then they close up on the bunny it makes me feel like they're doing some David Lynch anything I'm why but again this is what happens when you good artists there is that 50 bunny something something really powerful to work with so they create they went away and created these videos and now we've got these kind of chapters and now again same components same thing this is a lot more scholarly this is an introduction will eventually become something this will eventually be something that they're going to publish so John's is actually their director he'll be talking about the exhibition that they'll be mounting there's a lot of content here but they did this thing in the middle with this the sticky idea where now it's almost like you're digging through their collection you're pulling things out of their collection and making this interesting pastiche of things that'll stick and move and others will come in and layer on top of so I'm just I'm just scrolling I just keeps drawing it's really very layer and so far performance quotient cross my fingers has not been much of an issue these are some videos again of yeah unless you have a 40 minute video exactly this is a against amore video that they shot to support the one Andy Warhol did 50 years ago of all the poll all the Polaroids and things you took of their collection it's trying to figure out what he was going to put together so becomes sort of a document of what the original exhibition was like wow so these are some example than what they've been doing and again I I think the interesting part is that they're very they're much more media rich than we expected and they're very different from one to the next they can really take the form of what if the art artists our author has decided to do with that content so I'm excited to see what they're gonna be doing with it going forward so for some of the Drupal folks to just its prequels review of what we have under the hood that helps run this not not a ton of things to make it work a lot of this was built with within the custom theme but these are some things some folks might understand and know about and then as well I wanted to just kind of mention you know layout builder is a fantastic tool it is fairly new well no I take that back it's been in core for a while but I feel like it's been recently discovered by people and so there's a lot more people talking about it there's a lot more people using it therefore there's a lot more community involvement than there ever has been as well so it's it's great to be part of an open-source community like to pool that will help share code and help solve other people's problems together but that means that as developers we need to be really cognizant of what's out there and if we encounter something that's that's a bug we either want to try to find someone else who's already solved it for us or contribute that code back to the community to help someone else solve that problem later on so there's a lot of push and pull that's happening in the community around this tool right now the other the other thing I thought was interesting was because now it becomes a very what you see is what you get interface there's admin styles and there's front-end styles that mix in together and that hasn't been the case before so it just required us to do a little bit of extra work to think about how this authoring experience can be better can we remove all those animations that might be annoying and you're refreshing the page and working with content a bunch of times how can we make it easier for them to use and make sure those styles don't conflict and create something that's just hard hard to work with on the background for us our future so this this was our first project with layout builder this was kind of our experiment with it and I feel like it was really successful one of the more successful things about it was I gave it I gave a talk three years ago I think about using a different tool but with the same paradigms with the same design system ideas and so it was it was great to see that the way we think about design systems the way we want to give authors all those different options to build content that hasn't really had to change the tool has changed but the idea is the thinking behind it have not so that's been really successful and we're already like I showed you with da PMA figuring out how we can use it for other more typical clients who don't have these huge creative needs necessarily we and like I said being an open source shop working with Drupal we have ideas of how we can start contributing some of the things we build for this platform back out to the community but in a very similar fashion the future of cigarette with RISD is right now there's one publication out now so you can go to the publication's out using your skin org and check it out it's it's nothing like what I showed you in that it's now it's right now it's a compendium of their audio tours and even still like I said because it's RISD audio tour doesn't really do it justice it's more like a podcast you listen to while you walk through the museum if not a turn here and go see that kind of story so there they're almost something you can listen to from afar they're called sound walks so that's what's up right now but like I said raid the icebox is coming that will be their big show in 2019 2020 so to keep a look check every week or so and you'll start to see some of these bits and pieces pop up and become publicly available some of the things that I've been challenged long term I mentioned how we abstracted the color palette that's because one of our initial conversations was can we change the typography and the color on a publication by publication basis just those simple tweaks can make any publication feel vastly different than another so one of the first things we'll be working on in Phase two was how can we give them the ability to change that color palette out completely and supply a new set of fonts so now they're not stuck with the same ones again and again they can really have a much more fluid control over what that looks like and then we'll have some longer-term conversations about how like I said at the beginning we can open source this whole this whole platform and release that to other museums and other universities to do who knows the interesting part there is that now we can have possibly a wider community to help make this particular platform better so someone else's needs might not be fully addressed but with a little bit of extra work we can build that in and that might benefit someone else that might come back and benefit RISD in the long term so that's the interest there and that was a lot but thanks for sticking sticking it out with me Kathy and I are here for questions and we'll be hanging out as well if anyone hasn't had lunch yet but thanks for coming and taking a look anything any questions come to mind about what we had gone through here yeah yeah yeah from the from that original thing I told you so for the recording the the question is what's the benefit of locking an author out it's it's a few things so the nice thing for us as cycle the people who are putting these things together on the back end is that we can do all of that layout in the admin itself and it can become very flexible and if I change that base layout in the admin and I haven't let authors modify that it'll update wherever it's been used so it becomes part of the system and its it's not external it's not part of our code repo like if you know a little bit more about tuple you have to do tweak templates and CSS files and everything you don't have to do that you don't have to do any custom twig templates if you don't want to you can do a lot of that layout in the system which makes it a lot more portable and again I think the power there is oh shoot this layout needs to change I don't want to have to go back and change everything that's based on it that's not a problem anymore but you might want to lock the authors out of I think the simpler content types I think articles blog articles and press releases are a really good example of that they don't need to change they don't need to be a special snowflake all the time it's only when you have these I think people use the term marketing pages these these like standalone pages that talk about a particular service or an event that's when it makes sense that you really allow them to have as much flexibility as possible yeah that was yes question is how were you able to get a visual of what you're doing and working with that was that was really hard frankly I did that's always hard with these things we start with you know we would like to start with some sort of design something that they think they're gonna want to work towards that could get thrown out the window but it gives you a place to start it gives you a place to think about okay they'll need this option I should make that flexible I should make this available as you build and as we were producing it I created one long page much like this with every possible option I could think of on it every background color every column combination you know video audio text content whatever we want to put into it to as a test as a way to saying this is how everything works this is how it works on mobile this is how it works on desktop but it wasn't a pretty thing really it was only when we trained them on how to use the system how to build things that we started to get much more much more creative and nicer looking visuals out of it and that's that was part of the surprise I think because we didn't have we didn't have content at the beginning part of the surprise was oh that's the content and that's how they want to lay it out so it became it worked well but it I would not say it was the easiest thing to do it's it is sort of a reverse way of thinking to design the system and not down and not design the product and they their design yeah I think the point is it became a real push-pull you know it's not usually the way usually where the designers where the UX folks and we're helping the client realize something this was like them pushing back on us I was pushing back on then deconstructing something and figuring out how we would build it how we'd make it flexible when it should not be part of the system when it should be that little custom snowflake thing and when and when it should be something that we build in that they're gonna probably want to use the Kattegat so yeah it was it was a very very collaborative process I would say how-to releases yeah I mean we have to keep abreast of layout builder breaking changes again because I think it's a system now that's been in heavier use lately it is getting more attention and I think it's getting better all the time we're starting to see new modules come on that are really helpful that are either community driven or they're their core driven how they're gonna affect things long term we're not sure but I think the great thing about layout builder versus something like you have reduced paragraphs before paragraphs is a contributed module that's like an external group that wants to run that and do it that could go away tomorrow you know but the fact that layout builder is now part of core it's something that they've really put their hand put put in heavily on we don't see that going away and that's that's one of the benefits I think it's starting to use yeah okay yeah no it's not a typical in that way I think that's a good question in that for AVMA we still had to come up with a design system so we've still had to come up with the components were even if 75% of the time we're the only ones using them you know we still don't want to build everything to be a one-off so when heroes are what they are when headlines are what they are when body content blocks are what they are we don't want that to change on it so we still think in a very component driven way it just may never be exposed to the client in that way so this was a typical I think part part of that was the collaboration between us the fact that we were kind of working towards something that was fuzzy and getting tighter and tighter focus as we moved along versus with the AVMA our design team came up with the components our design team pushed and pulled prototypes and design mock-ups more and more typical static design mock-ups to get client approval and then we built it so that like kind of more waterfall approach is usually what we how we work our developers are involved to making sure that the designers not going rogue and doing something that's gonna be really hard to build of course but it is it is typically like finished designs then start building the front act you know that kind of approach whereas this was we were building and prototyping and showing them what we could do and they were saying can it also do this that and that and then we were figuring out how we could build that in and move so it was a lot more it was a lot more if iterative and collaborative in that way yeah yeah sure anything else anyone yeah yeah so right there's questions about limitations and there were limitations you know sometimes we had to put our UX hat on and say that would be terrible there would be a terrible UX experience that was part of the collaborative process for sure the other thing in the back of our minds was accessibility so there's not a ton of there's whatever we get out of the box accessibility wise here and you've been giving it some special considerations for some of the features but we know there's gonna be more work that we need to do so all this video content for example when does it require a transcript when is it content that should be transcribed for someone who can't see it or can hear it in some cases and when it's just texture that we don't have to do that for you know they're gonna have to be a lot more aware of that as they start to craft content like that so there will continue to be conversations like that for sure but yeah there was there was a lot of push-pull around what they've seen out in the wild and what would look really cool but like would it make sense for them would it make sense for this content is it a good user experience that was one of the things we had to come back to again and again just to try to simplify it to try to focus it give them some cool features for sure but not not make it overblown either yeah so right and that that layering effect that that sticky is one of the things I think they abused to a really great extent we did not intentionally think that they would be making transparent parts of the page come in so they could do that layering effect but sure the system let them do that obviously and they really exploited that so that was one of the great surprises to end up seeing in the end yeah yeah yeah question about you guys are students and how how would this applied or how would you think about this on more uxy skills I mean you know soft skills are huge the communication here was really paramount you know being able to I mean cuz they're creative client but they're not necessarily well-versed in web or what's good for the web right or what's great for user experience so we had to communicate a lot with that we had to take some of their ideas that at first glance were like wow I don't know how we would do that to distilling it down to okay I think what they mean is this I think we could do this portion of that idea and then let them run with it so it was a lot of was a lot of that a lot of communication a lot of being able to speak and a shared design language I think that's really important when we say component this is what we mean when we say block this is what that means always kind of making sure that we're defining what we're talking about so we can have a more intelligent conversation about it that's really huge and then on the UX side of things like being able to see the bigger picture see the system between things every design has a system behind it it's whether or not you turn that system to something that can further create other designs based on top of it so being able to extract something down to its really core pieces which you know what we're doing is not rocket science it's fairly simple as single columns double comms triple columns you know like you see them before but being able to combine them all together I think is what gives it that power so yeah it's it's it's systems-thinking which is slightly different than UX I think that's a good way to think about how the how this worked yeah sure okay go for it testing yeah yeah so testing was interesting again I created that big long-form page in order to as we built but um I mean frankly I don't know if testings really done you know they're still working on their content there so creating things so we always need to check back and make sure things are going the way that we expected them to I did just for the heck of it check out what it looks like a 911 not terrible it works pretty well because we're not doing things that are that are super fancy and we still wanted to build the best practices mine build with progressive enhancement so if you don't if you can't support these things it doesn't completely break but we didn't either special paid any special attention so this was more about making sure mobile browsers worked really well and fairly modern phones Firefox Chrome Safari although kind of typical browsers but it was hard because we didn't have the real content to test with so we really had to try to create the use cases create the edge cases and test those to make sure that we were covering our bases yeah time but we got to use new things that actually don't or our own current browsers all the time the same so to keep chrony Firefox's we had slightly different broiler so you know we got rid of the IE frustration work on some new future frustrations yeah yeah yeah potentially no that's true we did because we were trying to use new things trying to keep the code lean and mean and leverage what the browser's to better nowadays like Kathy said they're not always the same and that either the client had to be okay with those slight variations or we had to figure out okay as anyone else documented this has anyone else been seeing this or is it just us like how are we using it wrong and I actually I think I did some digging on Mozilla's bug found it like bug reports to find what we were seeing and it was a it did end up being like they did say it was time but it was it was more fun to be able to do that for sure yeah yeah definitely well so our process part of our process is we have something called a bug bash where we just get in a room and we bang on it for a couple hours with as many different devices as we can we do that first and then we hand it over to the client say okay you do the same thing with the devices that you typically use and that didn't cover probably 90% of the things that we needed to cover we did that as soon as we could but again I think the biggest part is just not having the content really like it's a shot in the dark hopefully that means that we've covered all our bases and we'll just find that one thing that maybe we forgot to cover or that they've used in a way that we didn't expect yeah bug bash yeah we call it a bug bastard that's what it is like it's really literally like try to break it yeah yeah something's always a mess it up something's always gonna spoil the party a little bit you know but but one of the future things I didn't mention which i think is kind of interesting so there's a print button right but the print just is gonna print what you see on the screen which isn't super useful we've made some adjustments to the print stylesheet to make it feel more useful but I think we could do a lot more there and then that opens up the possibility of like oh well maybe we maybe that's a reading mode maybe there's this interactive reading mode but then we can switch we don't necessarily when I hit the print button does it switch but I can physically say I don't want all of this crazy stuff just give me something more legible and you switch if you switch the template basically and now all the content is black and white with no crazy colors and no crazy video that's a way to experience the same content in a much different fashion that could get accessibility problems and that could just get at someone's initial like frustration with what they're doing like no just just give me the content you know so we're exploring ideas like that - going forward though I think it's interesting for a museum I think that that's typically wants to create a book and deliver a book and have that be final to say no you know if the user could say I like this I don't like that and change our content the fact that they're open to that is really cool all right well cool we're at 1:15 for anyone who worries about that thanks a lot everyone coming and listening in as well like I said the recording will be available spread that around too if you have anyone else that might be interest in this kind of thing but thanks a lot for coming

Channel: oomphinc

Views: 520

Rating: 5 out of 5

Keywords: flexible design, drupal 8, layout builder, design systems, drupal, designweekri, providence, RISD Museum, RISD, web design, web development

Id: WQwIBt3EvtY

Length: 59min 9sec (3549 seconds)

Published: Wed Sep 18 2019