 Hey Welcome everybody This is not a session. This is a game show, so get ready All right, so this is a chopped the design system edition you guys are familiar with the program on the food network There's essentially a game show where they have a series of chefs And they have requirements that they have to fulfill to create each course In our game, we have a design system that will function essentially as our pantry of ingredients And we have a couple designer chefs with us one online one here in person Who will then compete to see who can deliver the best design pages out of this design system? So really quickly my name is Matthew dipter. I am the director of the experience design team at ffw I manage a team of UX researchers Content designers and strategists and visual designers help build engaging experiences for all of our clients now the rules here in design tournament kitchen each round well We're only gonna have one round because we timed this out earlier, and we only have time for one round, but Each round our designer chef contestants will compose a new page based on that basket of requirements They're gonna have access to a pantry of ingredients That's the design system and make their pages in Timed round and then at the end of the round our judges here And our we have a guest celebrity judge in fact with us. I will evaluate each submission and choose which design Failed to make the cut and which design has become the top champion here All right, so let's meet our celebrity judges The first one mr. Brad frost here from big medium Brad's the author of atomic design sure many of you are familiar with also a Pittsburgh resident I use a design system consultant web designer developer speaker and writer really honored to have him here with us Give him another big round of applause Joining us we also have from FFW solutions architect Ryan price and from Princeton University Jessica Monaco Alright, and alongside me. I have my colleague Amanda Knopko. She's the lead of content design practice at FFW And before we get started we thought we'd give you a quick overview of design systems Awesome, can everyone hear me all right through this mask? Awesome, okay, so design systems serve as a complete set of standards They help you manage design at scale and they use elements patterns and reusable components to help build out that system Makes it really easy for you to spin up content and also build over time It's a combination of your different design assets your style guides your usage guidelines It could be code snippets as well We'll give you some tools a little bit later in the presentation that you could possibly use to help manage that and The benefits of design systems are really that you are able to deliver Consistent on-brand experiences across all of your touch points. It's not just going to be your website You could be using a design system for kind of multiple digital touch points that you're managing it also helps to decrease your maintenance and Unintended design and technical debt does help you save time and money And it does position you for maturity in your organization So if you have a design system, you're able to kind of build out pages on your sites Or within your different digital touch points quickly Push that content out and then also you're able to take a look at how to grow and Expand upon that system over time So you've got a basis and then you can build and add new kind of snowflake type of Components in All right, thank you Manda And let's also talk a little bit about design system evolution I think a lot of you in the room are probably familiar with the term design system but we've found in our experience that The name and the term design system can be applied to a lot of different let's say flavors And so this slide here really kind of gives us an overview of how a design system can ultimately Mature all the way to something that is a you know design system. That's fully integrated You know and intended to be shared with a big wide audience Usually something like a Nike design system or a Facebook design system Where the intent is that many many different vendors or maybe even third-party, you know Organizations or businesses want to start building off of that design system to make you know components or applications or software for that platform or Manda mentioned different tools that we leverage for our game show today We're going to be using Figma as a way to kind of show off our design system and allow our design chefs to compete But we also use other tools in the course of our work Amanda. You want to talk about somebody awesome? So For our tools as Matt mentioned, you know, there's there's kind of a crawl walk Run phase to design systems as you just saw in the last slide And some of these tools are going to be more in that walk phase Some of these tools are going to be more in that run phase And then Figma can be used as that kind of crawling stage where maybe you don't have full documentation around your design system, but you at least have the design system base and There are tools like zero height Like you design system that really lets you annotate around What your components are what your templates are how your content should be filled in and used And how the system should be used overall and then there's also ways to document code snippets and from the development side as well I'm sure you guys have used storybook before we Use that a lot but that is basically a way to Isolate and streamline the UI development and be able to test quickly your new components be able to build those out and Really test the content that's going into them and make sure that nothing is breaking all right Now that we've uh gotten that quick overview of design systems. Let's get into the competition So first and foremost, we have our design pantry. This is our Figma file In that Figma file each contestant will have access to the same design system That design system is going to include eight page templates 23 different components and one page builder Within that design system itself We have an array of different templates components at the page level and just global components that make up the complete design system Our contestants will have the opportunity to use and leverage any one of these templates or components To create the new page that we need created today So Let's go ahead and meet our contestants First and foremost, we have Amanda And also joining us remotely. Let's see if I can get him over here, but uh, mr. Graham. Are you there? All right, hello, john can you hear us? All right All right So this is uh, this is john Graham. He's joining us from the great state of uh, minnesota And uh, he will be competing as our other uh, contestant here today. Thank you for joining us John John's a designer All right, let's get back to the presentation here And so we have a Non-profit that we work with They are called ffw feline friends worldwide We love cats around here and we're very fond of them Uh, but this non-profit which you know has been around for a while Um, they have a massive new campaign that they want to launch And they like their website and they have a lot of great pages and usually and definitely they have templates and components That can allow them to promote this event But what they want to create is really special and they really feel like they need to make a big splash And have more of like a campaign landing page type of experience for this event So in order to help raise awareness for this special event and raise money and get volunteers to participate Our contestants are tasked with creating a new campaign landing page to promote the recruitment of volunteers for that event The landing page will need to do the following provide event information recruit event volunteers Showcase the event experience and ultimately collect volunteer contact information All right, well, we're going to give the contestants 10 minutes on the clock to start designing If you all will share your screens, we can drop in and look at what you guys are working on and doing Uh, and while you do that. Oh, thank you. Who are we looking at now? This is john We're looking at john screen. John's got the uh, figma file open and before we do that I'm actually going to share my screen for a second If I can walk you guys through as they get started a little bit Um, essentially what um, what's in our design system? Pull that up So as I had mentioned before We have our figma file here and um In our design system for ffw. We've called it the meow design system It's you know, like I said, it's fairly mature. We have eight page templates over, you know, 20 components We've taken our figma file and we've broken it down Into a way that's kind of easy to get through and a little bit orderly This makes it a bit more simple for people to kind of find the exact Component or element that they might be looking for so we've broken this down into what we call fundamentals So these are kind of base components of the of the system. So things like grids colors textiles, etc And then we also go into uh things that are like more global components So something you might find across multiple pages like headers and footers or breadcrumbs sub navigation Uh, also we have the whole set of reusable components So all the different page elements that you might find things like hero banners and 50 50s icon cards info cards You know, you could see in here. We have you know examples of both desktop and mobile In some cases we'll even show a lot of various iterations or variants for those components as well So we have all sorts of components and then we also like to show how these components start to come together in certain templates So in this case, we have a home page template a section landing page template Some basic content pages nice We have an events landing page events detail page so There we go. We also have included a page builder This is essentially a way for us to do some work programmatically in sigma It actually allows our designers or people who even aren't as comfortable with designer sigma to have a drag and drop type of experience So they can essentially just take components and add them to the page and they'll be ordered in space properly using Things like auto layout So that is the overview of the design system So those are actually the pages and the components that our current contestants are working with right now So let me start to kind of drop in on people's screens a little bit So let's uh, let's poke and see what amanda is doing Amanda's currently uh digging through looks like she's going through uh check now what available components there are Um, they also have been given within this file an additional page that has all the campaign requirements on it So they have copy ready to go They have some imagery that they can use that's essentially like the creative brief they may have gotten before starting on this So that's amanda working on it looks like she's uh building out a form and let's let's see what uh john's doing right now John's uh, john's working on the hero right now It'll be interesting to see as this all comes together Essentially how they choose to even prioritize the types of content on the page, right? They have access to the same level of components the same uh mix of templates But it'll be interesting to see I think what their interpretation of the requirements are And what they felt might be from a content design perspective the more important to things to put at the top of the page Or even more interestingly, you know, you saw that we had a lot of different components And you know a lot of the information that they're working with could probably be expressed through multiple different components And in some cases it's like a decision that the designer or the content designer might have to make As to what is the best component available To best express this idea and convey that to the audience um So, uh, just you know, I wanted to kind of talk a little bit to our uh celebrity judges over here during chop There's usually some banter while the chefs are kind of cooking and making the work happen So, uh, just uh kind of really quickly. I think I want to start with um kind of talking about, uh jobs to be done Is a term we like to use when we're trying to understand what users need to accomplish On a given website. So oftentimes we will do, uh, workshops with our clients during our discovery phases Where we'll start to talk about the different users of the websites and the specific things that they've come to the website to do That allows us to populate what we call our jobs to be done list And these jobs to be done, you know, essentially made their way into this exercise right here Those requirements that you saw at the beginning essentially are the jobs to be done for the people who want to volunteer and attend this event So that's kind of one of the interesting things that's going on here another thing that Wanted to also talk about is that, you know, we have this design system. We do have these options for For the designers to kind of use like off the shelf But oftentimes that all those elements that are there aren't exactly everything that you might need And we like to say that a design system isn't intended to be Just a rigid set of requirements that you are forced to live within. It's actually a good jumping off point It's something to build off of to innovate and iterate on and uh, you know, brad I think you bring up a great point in a lot of the work you do where you talk about this distinction between things that may be Inherent into a design system and then something that you call a snowflake. Can you talk a little bit about a snowflake? Yeah, I'll take I'll take it a step further. We got recipes in the mix, right? It's a kind of a phrase we use A fair amount, but I think that you're right where where Basically a design system is in meant to contain Literally every single piece of the ui and I think that that's where like a lot of teams get trapped is that they see it as These are the only colors you could paint with which just isn't true and I think that It's helpful especially for kind of more marketing experiences like this it's important to be able to have the the ability and the flexibility to To create what you need to create, but it's it's important to So so it's helpful that to kind of differentiate between things that are really kind of like low level meat and potatoes The kind of boring stuff right like the buttons and the text fields. Please for the love of god don't don't Innovate on text fields. Like don't do that. There's tons of other areas to innovate, right? Things like heroes and stuff like that's okay. It's splashier market year Maybe knock yourself out but use those buttons use those sort of form fields So the more sort of atomic elements might make sense to like live in the design system proper But then there could be these kind of you're calling them global global components Like how those like recipes right like a global header for this website Might be different than the global header for Another maybe internal facing site for the same organization, right? So so the ingredients of that global header might be contained in the design system But that specific Composition right might actually be a recipe that's sort of specific to a given product So sort of having this kind of almost like layer cake approach to design systems where Some things that are meant to be truly shared across an organization Makes sense to live in the design system layer But then there's kind of layers that can sit on top of it that can sort of be shared within like a smaller sphere Thank you, Brad And I think that uh that actually I think is close to some of the challenges that you might deal with Jessica at Princeton Because you have probably a lot of different constituencies groups within the campus that you need to appease Absolutely. Absolutely. Um our our Princeton site builder system that we've created over the past several years we have roughly a thousand sites in this in the system and In academia, we love snowflakes. That's one of our favorite spaces to work in so we're very we're very familiar with all of the site owners and kind of looking at these these goals that you're talking about these jobs to be done and We do a lot of teaching of the teachers And really showing them that the site is not for them, but they're building for their users and Getting them to identify and build to those goals and then create and use those components Across all the sites that we can share. Um it can still look unique to them, but the the base is is Um common underneath which which helps our maintenance when we you have a very small team, which is what we do Awesome. Thank you And ryan, I mean you're probably involved in doing a lot of this training at least training adjacent stuff When it comes to this gms implementation and the people who have to operate it. Yeah, definitely. So One reason why I got involved with the solutions team in the first place is to you know Be more involved in the processes that are helping people decide what to build or what not to build as it were and One thing I think is interesting is that we use this word jobs to be done when we're talking about these We don't necessarily always talk about user stories Because a user story seems to be like something that will take me three seconds to do versus a job to be done Might be something that could take me three weeks to do There's there's a lot of like more scope When you stop thinking about it as like a distinct thing that happens when I push this button it's it's more about a thing that I want to accomplish as the user of the site and um You know coming back to what you're saying about like training people on how to use things it really means that the The The people that are you know carrying out the the content creation activities and the content management activities They need to understand Why the user is coming here so that they can direct them to to Achieve their entire purpose on the site not just to like make this button look good Thank you. Thank you. All right. So our designers are still plugging away. We're checking on Amanda's screen right now She's currently working on a little uh full row You know cta here about volunteering Drop it drop in and see what uh John's up to Like john's got his page flowing together Kind of move some things around here All right, we'll keep moving along and I'll keep bantering as they go Um You know one of the things that um I found um challenging From the agency side is that you know when we do a design system Um We There's there's a lot that goes into the work in terms of ultimately delivering and handing off that design system But I think we've touched upon a little bit is uh one of the other challenges is the adoption of that design system from the team that we've handed off Um again, we do a lot of client work So, you know, that's usually when our job stops at times that we've delivered this thing We put this out in the universe and now we got to kind of like hope And you know that uh this thing will be utilized in the future and then properly kind of governed and managed We've um We've seen a lot of different models around how organizations choose to govern their design systems oftentimes It is just you know an inherited responsibility of a person on the You know web development team or web design team of that group In other cases, it's a shared responsibility between our team at ffw and the counterpart It's in those cases where we've found we've been most successful Only because um it allows People who are not necessarily focused on the day to day of governing a design system You know having to take on that responsibility on top of all the other work that they have to do but really One of the things that we're really focused on is trying to not just deliver the design system But then help better socialize the design system around these organizations And so that means really taking the time to do some marketing yourself Of trying to convince the people who might be using the design system or being able to leverage it The actual effectiveness that it would have for them and what they want to accomplish Um all right, so how you guys doing Amanda? How much time do we have? Let's check the clock You gotta you got another five minutes on the clock, okay five minutes to save the cast great All right, so um While they while they have five minutes to keep designing I wanted to see if anybody out here in the crowd had any questions Yes, sir So how much time did it take for us to pull this specific example together? um Well, actually we used an existing design system Uh because that's part of the point of this exercise almost like how do we build on what we have versus You're creating all these things net new um It was probably you know, uh Good amount of time. I'm gonna guess ballpark, you know, maybe we spent like We probably spent like, you know a week pulling together all the things for this session But again, like the design system that we're using is based on a design system. We had done for another nonprofit Um fairly standard in terms of the types of templates that we would generally have to create the types of components That we would need and knowing that we had to put something together for this session Instead of creating something completely new. We thought okay. Well, how do we create, you know, a world around this example? And who doesn't like Over here, uh, that's a great question. Um, I would say, um In most cases, we are creating kind of design systems that are somewhat new They could be they might be based on some existing Platforms design system as like a kind of base layer before we start iterating and building on top of that um In other cases a lot of the work that we're doing oftentimes are Essentially like replatforms, right? So a client is coming to us They need to upgrade their technology stack and they say well, we might as well Take make that investment in the design as well So oftentimes what we have to do is actually take an existing website Then we have to essentially reverse engineer that Into a design system where we go through and we identify all the different components that exist all the foundational elements Anything that would possibly make up the ui or could ultimately make its way into a design system And then from there we would ultimately come up with that Well, what is that next kind of equivalent of that? So it's in some sense taking that design system that should exist Right and kind of creating one to ultimately then build on top of that And I can throw a little bit more in here. I would say this this act of like Breaking down the site that already exists can take weeks Um, we had a site where there were identified I think it was like 110 components And we we're trying to get it down to 20 So there's there's definitely calculus that has to happen when you're trying to decide like What things do we think of as more like a snowflake or what things do we want to say like well these two things are Similar enough that we're going to try to treat this as a building block versus something that you know Will be existing far in the future, you know, as it's its own special thing Or here Also try and design on the floor here. Well, it's honestly we make Amanda multitask like this all the time This is like part of the daily Generally what we do is we go through like a discovery process in which we're trying to figure out What the content that you need is in order to fit the components to that content Now we're going to have reusable components that come out of that for more generic content That's kind of what you're seeing here today But then we are going to have lots of structured components around very specific content types and very specific content needs And we do structure that at the beginning And we kind of continue throughout the entire design phase because as everyone knows once you see something in color And in a visual Things may change. We may want to change that content model up So we do our like ia around our site mapping and our general like conceptual content modeling and then We build out our templates and our components From there All right way back there Yeah, I think I can answer this one a few different ways One is I think it's still almost a struggle in some sense in terms of naming convention Especially because we have a lot of different documents and artifacts that are happening To get us to the design system and we have a lot of different teams working on stuff And so one of the things that we found is almost that we have to do some level of like reconciliation at the end of our Projects to make sure we're all on the same page as to what we're calling a component Because a component in a figma file might have been referred to a little differently in uh, you know In the development system or a little different than confidence when someone Referred to it or even like once it makes its way into a cms And it's like maybe even labeled something differently there So we're trying to keep a much better eye on like a very consistent naming conventions there um One of the things that um also Affects like how we approach that is also the complexity of the of the design system itself Uh, there are right now numerous ways that we can handle variations of a giving component or ui element from having design tokens Which allow you to kind of have these more global settings that can affect the ui To uh, you know just having a variation of oh this thing should have a extra button a secondary button, um, and so There's I guess ultimately a lot of different ways that a team could decide what the best approach is I think the most critical thing is that it's a consistent Naming convention that's happening that the team has agreed upon before getting started and ultimately It's one that makes like not just like machine sense But like human sense for ultimately the people who are going to be responsible for having to Use this design system edit in the future makes sense of you know, what some of these terms I think we could all agree that naming things is really easy It's the easiest part of this whole thing Yeah Yeah, it's a great question and one of the things that we hear a lot is like design systems are killing creativity Right, just all the time and like With all due respect to this it's like, you know, these are like kind of standard fair marketing components It's all good, right? Like it's it's doing his job. It's like very meat and potatoes But like yeah, where's the freaking cat walking across the screen or like is there opportunity for Some razzle dazzle there, right and and I think that that's where It's it's important to start with and I love how you guys did it Of starting with those jobs to be done and really start starting with The goals of the of the the page, right? That's the job of the The the product designer is to create the best product period right and then there's there's a natural tension with Reusability and holistic thinking and does a scale to other solutions and stuff like that And so there's a kind of a yin and yang that sort of happens where you sort of have to balance that tension between sort of just doing things that are totally bespoke and sort of you know Building for radical reuse right and again, there's like a time and a place for everything So it's like I like to say that It's good to have like hero components and we have those here And and some some sort of like marketing sections that are like, you know, kind of nice chunky center aligned kind of things That's all good. That's good meat and potatoes stuff But then yeah, maybe that top of the page Above the fold thing is the area for razzle dazzle and maybe that doesn't live in the design system, right? But like it's not an all or nothing thing And I think that that's like the trap that people fall into is that it's like you must use the design system Or you must reject it and go it alone and it's really not that simple, right? It's it's like kind of innovate where innovation is appropriate and use the system where You shouldn't be innovating again form fields Please for the love of god If there's one thing you take from me from this panel Don't innovate on form fields. Like that's not the place for it, right? Make the cat walk across the screen instead And if I can come at it from implementation land too, I think sometimes it comes down to budget You know, like we need to achieve all of these features inside of x amount of time and x amount of money And we can make allowances for you know, this one big splash or this other big splash And if you say well, this is for the annual report, then I might say well, when does the annual report come out next May? Let's put that in phase two. I don't want you to not get your creative Awesome cat walking across the screen, but it might not be a good idea for for you know step one I think a good example of this. There's some work we're doing for one of our clients Hologic where we you know built a large website for them and They also have A handful of other initiatives. Hologic is a medical diagnostics and device company And they also produce this thing called the global women's health index Which is essentially a global census on women's health where they interview women in over 200 different countries or something I can't remember the exact amount, but it's hundreds of countries Where they're interviewing women and getting a sense of you know what the health for women is like in these countries In terms of building a site to support the report that comes out every year that they deliver with gallup We needed to stand up a website now We had a design system that had most of the things that we could possibly need to convey the things in the report We had media galleries. We had article pages We had you know little cta's and cards and things that we could put like small little stats and icons in But we had no real way to actually you know do some powerful Sort of data visualization or really interesting like storytelling on that website. So Instead of them spending their money on just trying to build this stand up a whole new report site from the bottom up We leveraged the design system that we had for Hologic And then we spent all that time and that's all the money creating all the new things What are these new like data visualizations that we create? What are these new like infographics and animations that we can create? So having this design system allowed us to unlock all this creative potential to ultimately figure out new ways to express this information So I think that's a good way to kind of demonstrate how having this design system wasn't a limiter For us to build out that data visualization site. It was actually that foundation that allowed us to accomplish it I would also like to point out It leads back to your content question that was asked earlier A lot of times we spend a lot of time up front talking about that the content strategy and working on the information architecture and We like to create outlines Of just text of the content and the goals of a particular page And that's when my designer works with my strategist and they Figure out which pieces of content fit into the components that we have and which ones really deserve that creativity And sometimes that means going back to the site owner and saying You know, let's think about your content in a more creative way You can deliver this message with just a picture and a paragraph But maybe there's something more engaging here that we could put Um to really call out something exciting that's happening within it within a particular site or organization that they want to communicate So really partnering design and content Is just as you know, you think about the the development part at the end But you've always got to link back to what that content message is and that's where you want to find that those creative opportunities I think just to add on that I think that that's great and and that story is fantastic as well What are the things that we like to sort of say is that Design systems aren't the place to innovate right the design systems are there to kind of capture Solved problems right so in our work You know, we work with a bunch of jumbo sized organizations with you know hundreds of scum teams thousands of scum teams like Kind of all sort of milling away at their corners of the of the universe Doing great product design doing great development work and all of that And the the role of the design system is there to sort of capture the things that Have proven out in in products, right? Oh, wow This this really converted well, right? You know, oh, this is a really sort of novel solution to a hard problem And those are the kinds of things that sort of get curated into the design system And becomes an ingredient to kind of feedback out, right? So we we tend to think of these things as different pace layers It's interesting you you're all kind of talking through the lens of like specific Websites a lot. It's like in our work. It's like we we're like kind of out of that product Layer entirely we kind of treat them as separate pace layers where product is moving at its own often very fast pace And then the job of the design system is there to intentionally move at a slower pace, right? More of a of a sort of a nuanced and you know, again Sort of it's it's curating things that are happening elsewhere In pulling it into the to us a central place to serve as institutional knowledge All right, thank you Brad. Thank you everybody Time's up music So, all right pencils down or cursors down, I don't know All right, so just to reset for everybody We had two contestants Amanda and John They had to build a campaign landing page based on this design system And Let's see. Uh, we'll we'll make the guy on the phone go first. So John. I'm going to ask you to Well, you are sharing your screen So if you want to go ahead and take it away All right, you got it. So here we've got pause across america free with some some details about when and where it happens and a little bit of a brief summary about pause across america We've got a nice little stats section talking about how John could you just zoom in a little bit? Oh, yeah, absolutely Nope Oh, sorry, you know what I'm it's the problem exists right here All right John, I'm sorry take it from the top. Well, yeah, I apologize. Oh, yeah So here we've got pause across america 2023 on the top talking about Where and when it'll happen a little bit of a brief summary about the pause across america We've got a little bit of a stats section here that talks about how many participants we've got how many dollars have been raised how many miles are covered We've got our call to action giving people a little bit of a teaser information and telling them how to become a ball in the air Take people down to the lovely form We've got an informational section here that talks about how many pause are needed in order to cross america We've got how does the volunteering work talking about all the tools that you get as a volunteer And we've got some pause across america events along with the hot air balloon ride in new mexico cat herding demonstration live bands as organizational centers and speaking of live bands, we've got the musical stylings of Events for pause across america 2023 testimonials about all the cats who have been saved In a nice little form How you Thank you john and I did yes. Yeah, come around for us. Thank you. Yeah So john I did notice one of the elements in there was not like something I recall saying from the design system This one here. Yeah, I just kind of put that together on the fly All right, um, because we didn't have a cat band component. I assume Yeah, thank you. All right. All right. Well, let's uh, let's pass it over to amanda. Let me get the screen chair right All right, amanda take it away So at the top here, we've got some information about the event This would include information of where the event is what time Also to see more event details and that volunteer now would bring you down to the forum. That's all the way at the bottom We've got some information about the event. So some of the things that you saw in john's in those different cards I've chosen to use these icon cards to highlight those instead Next we talk about the experience so far. So trying to get people hyped about possibly volunteering Um, this is my personal cat. So Gotta call out chump Next we have information on why volunteer Um, and then leading you off to a landing page that has more information about volunteering Again some information about the event what we've accomplished so far if you've gotten this far down the page You're thinking about volunteering. We want to get you excited about all of the things that we've done So that you do want to get involved We also want to tell you what our volunteers think about volunteering And then at the bottom we've got our volunteer now for All right. Thank you, Amanda You know Side note, I noticed you guys both put the testimonials below at the bottom of the page and I know this session isn't about that But that's usually how people feel about them any way that That they should be at the bottom of the page. That's a that's a side note. Um, well, thank you. Thank you both Um, so what I'd like to do is we're gonna have the the celebrity judges confer over here And talk about you know what they've seen but in the meantime while they while they do that I would like to take a poll of the room So, let's uh by a round of applause. You're not gonna hurt my feelings John is way quicker and figma than I am So by a round of applause, uh, you know, if you if you prefer johns Uh, john if you want to scroll to the top here. All right, so we have johns who likes johns And amanda who likes amanda's Oh, wow Oh, I'm so glad we have the celebrity judges here because this is obviously a tie Based on what we have in the room All right, so judges have you conferred You need to riff for like one more minute. All right, I'm gonna I'm gonna riff for one more minute. Um Well, thank you all for coming and indulging us for this ridiculous session I hope you took something away out of it You know, honestly, we really wanted to do a way to kind of talk about this stuff in just a more fun engaging way Um, you know, you guys, uh, I've been here all day You got a few more days ahead of you with a lot of sessions And so we just wanted to kind of live in a little bit So glad you guys could all attend and join us And if you do have any additional questions, please feel free to grab anyone in a chef coat But I can't guarantee they'll answer it. But yeah, me too though. Like I can help All right They're still bantering. Yeah, I'll let them confer Any any last questions in uh right there Yep in the checker chart generally, um Our developers will go into this file and they will kind of extract the css that they would like from it And then put it into something like storybook where we can actually test On the fly in the environment in html and css if we like what's going on there and some of the responsiveness because as you know You know, as you're doing responsive design, there's sometimes Additional breakpoints that need to be added or things that need to be adjusted. So that really helps us But generally our developers are Very well versed in figma We do leave annotations This is a very bare bones design system that you saw there were no annotations in here Generally, we break down the components into fields and also give any sort of spacing and colors and that sort of thing as well So that the developers have that readily available This is definitely a lighter weight design system as Amanda was saying as you can see in figma figma also has like inspect tools You can see like the css and stuff like that. Uh, but as she said, we we will also include Either directly in the figma file or if the client has chosen another Platform to host the design system on we'll usually capture annotations that are both, you know functional behavioral Annotations that'll cover off for like a content editor so they can understand how many objects belong in that thing or how many characters should go in that thing We will include annotations for for developers And and also for designers And The great question this actually come up recently on some projects as well because As a designer it's interesting you look at something like a card, right? You're like, oh, it's a card It's got a picture. It's got an icon. It's got some text the little ui element But what's actually powering the information of that card can Can be completely different and actually change how you know a team might even implement that as well Right exactly. And so You know, one of the things that you know, we'll definitely do is you know as we're designing out these components either create a variation or otherwise And annotate like whether you know the content here is maybe it's driven by a taxonomy or maybe the content is Manually input for for otherwise and we generally do that in our content models Which are separate spreadsheets that help with annotating Because obviously if you're in sigma, you can't be annotating everything that you want to annotate in there It's a little difficult so we break it down by field in a spreadsheet and then Note where that data is coming from if it's coming from a PIM if it's coming from An external source if it's you know static or if it's dynamic content that needs to pull from another content type that sort of thing So generally we'll link off So yeah, so we'll link straight to the component or the page That's why we set these up as pages on the side because it really helps to be able to link directly to those elements And also sometimes we will have page level annotations that need to be understood and sometimes there's component level annotations Like it's not you know rare for us to have Some object on a page and you're interacting with it affect like another object on the page. All right. I think we have a decision Judges Yeah, um, we have a little little feedback um for for each of the contestants here. So Amanda, we think you definitely achieved all the points of the brief competently as well and I I like I like the use of the icon cards because it allows you to get more flexible going forward And you definitely like some of the pictures that that john chose and the way he chose to like put photos, you know More centrally. I think that was cool too, but other judges may have other things to say Amanda, I liked that you pointed out that the button at the top would take you directly down to the form for those folks Who are really just interested in getting straight to the action item So I think that was a great a great plus on your part. Um, and you told the story very well down the page I I have to say that there's a lot of character Added into the personality of john site. And so I want to give him kudos for that as well Yeah, I think I think you both nailed the brief pretty pretty well. I think that yeah yes Absolutely, I In again, it's a what's kind of fun is like seeing them side by side is like how the same Ingredients can be Sort of cobbled together and used in different ways to sort of tell different stories and and things like that you sort of have You know some different variety obviously some different page length as we're seeing here I'll I'll say that like in my view it's it's a draw with the with the exception Of I am a sucker. I'm a musician. So so john's a little sort of cat festival Snowflake is the is the snowflake that that wins me over we'll say so But yes Well, thank you. Thank you for everybody for attending. Thanks to our celebrity judges our contestants our hosts here at trooper con Everybody have a great evening. Thank you all