we've got like three weeks worth of agendas crammed into one
knock them all out right
well that's why I was late because I remembered I was the last person on the agenda and all of a sudden I was like I have not prepped at all, subsequently hoping we don't get to the third agenda item
we're all friends. We're all friends here
let's just give folks one more minute and then we can get started
alright, so as usual, we have our kind of round robin of updates. I think the main thing on the agenda today, which we've been waiting for a couple of weeks for is the conversation with Mike and Gabe about Paragon and how we can better bridge the gap between Paragon and the UX guy working group. So really looking forward to that conversation. Osma has a an item on here around tutor, tutor Indigo plugin. And then we've got a kind of a show and tell for studio search. We've got the usability tests pretty much done. We've got the frames pretty much done. Alex done a great job on studio search. So we've got a few minutes at the end. We'll do a little bit of a presentation of that of that UI. Anything anyone else would like to add? Alright, since we've got a whole contingent of folks here from to you, I'm going to suggest that we maybe start with the Paragon conversation, and then we can come back to the updates and the other projects. Everyone okay with that? Okay, cool. I will hand it over to Mike. Hey,
everyone. I'll introduce Doug. He is my right hand man in regards to design system stuff. Gabe is on paternity leave. But he'll be back by the next instance of this meeting. But I brought Dugan he did a lot of the updating revamping to our library. So he kind of just went through the whole process that we're going to show you from a design system Open edX, edX creation within figma. So it felt like it was just a really good time to bring him in. I will like per the agenda. I will kind of walk through what the what the Paragon Doc site looks like. And kind of explain a little bit about theming. And then I'll hand it over to Doug and he can kind of walk through the library. We're gonna have some future asks, I think we need to at the end of this, I want to get everyone's email because I want to who needs access to our figma instance because I want to get that setup. And then we'll we can kind of, I think the questions about next steps in the agenda is something that we can probably table but it's just some things that I think I just wanted to kind of pull up and start chewing on. So I actually I will start sharing. All right, everyone. Oh, and the people don't know me. I am Mike Leary. I am one of the I'm the senior UX manager for the edX space working within the LMS marketplace, mobile app. And just everything Paragon up to this point managing the work and the project. So well, I will just quickly talk through which will hopefully set the table is I put the link in the agenda doc so this is our doc site. And Brian, of course jump in if there's anything technical that that comes or any insight or anything you want to add to it. But first thing is
that you're using the edx.org theme right now and we have the option to also do the Open edX theme I just wanted to call that out right at the beginning.
Yeah, that's, that's, that's a great point. That's why we I wanted to kind of walk you through and show you what the Doc site is. This kind of breaks down all the components that we have. Doug will kind of walk through how they look in figma, which is probably how you are mostly interact with them. And I think we'll start with let me just go to button so you can see.
I do want to interject here for one second. Just getting everyone is on the same page. I don't we've talked a little bit about Paragon before but could you just give us like a quick two sentence like overview of what what is Paragon and why we're using it. Yeah,
that's awesome. So Paragon is a component library. There's two versions of it. One is within the React codebase which is what Brian's working to pull over from a reporting perspective. And then from a design sense, what we'll show you is is basically a library so what that what this designs what Paragon gives you are components, colors, form elements, specific navigation container thing. So as you go down, I'm going to actually have Doug show you how he designs with it. So as you move forward, you'll kind of see how we pulled those things in. But basically, Paragon is our design system. Our design system will help these pre formatted pre vetted from an accessibility color, usability perspective, all these things have been vetted. So when you sit down and start designing for some of these projects that you have, you'll be able to bring in and you won't have to rethink these components. It actually doesn't eliminate creativity. It actually streamlines that creativity. So there's things that you know, you you'll see within that figma library. You know, when you bring these things in, I need a button, you'll dragging that button engineer, I need format ones, here's that format element. So we have specific things that we've created and built out that really help help with that, the creative process. I hope that I hope that kind of summarizes what Paragon is and the string.
Just to add to that really quick from a development perspective, it's really helpful to not need to reinvent the wheel to be able to implement these designs as they come through. And so seeing places where we can actually reuse the components from a code standpoint makes it much easier to get stuff implemented and actually coded up quickly. So yeah.
And as you move forward, we've really seen the strength of design systems working between engineering and designers are you can even communicate those things. Hey, oh, yeah, I actually wanted a button in that place. And the engineers will be able, you won't have to even mock that up. You can kind of just talk through that process. And then you know, some of that creation can happen a sync between engineering and design. Since like I said, a lot of these things are already created and vetted for and we don't have to think about. But yeah, just real quick, the theming because that's what we'll get into this. I think the strength of all this is I think Brian alluded to it is we actually have three themes. Now we have this new theme that we're we're building we're building for our new design, which is on Open edX, Open edX, I'm sorry, which is on edX. And then on the Open edX side, there's an existing theme as well. So you'll see when we toggle between the two, the variances in this is the Open edX, this is the space that you'll that you'll be working in. And this is just for example, the buttons and you'll see how that variance changes when you go to the edX. So the libraries I mean, sorry, the themes allow us to create new instance without breaking down and rewriting, you know, recreating the wheel. What we'll have you do and what Doug is going to walk through is, we have an instance, in the design library for edX. We don't have one for Open edX. So I think that that's part of the exercise that we'll have you do in the next couple of weeks, working together, you know, we can even you know, help with that. But I think creating a library within figma for Open edX will really help you understand the strength of a design system, but also understand how that different theming works, and then how those things can be altered and updated. You will see double show you when you change specific things like colors, like say, we're in here and you're like, oh, you know, we want to change this color. When you change it within the figma library that will persist and change throughout all of the documents that you work on. And that same thing can will happen when they change the style within the code as well too. So you'll see that as you that flexibility as you move forward to create. Everything's already pre built in one that react codebase and then also the figma library. So I'll stop there, if there's any questions just about like just the basis of how what we're putting together here from a team perspective. Let me know any questions about the Paragon as well. Cassie?
So I haven't been in a few of these meetings, but I'm getting updates from Ellie here and there. I just wanted to find out what is happening in terms of the edX versus I mean, you know, the Open edX theming is that going to be brought together at some point or you're wanting to keep them separate?
We'll keep them separate just because it helps us like for example, not to get into the weeds but we are updating on our front end we're updating a lot of our styles and colors we have like a new brand. So this theming allows us to we'll we'll show you is literally duplicate like basically copy and paste that library and figma and Doug was able to go in Change Styles, change the wrapping of how the buttons look circular square, so we'll want to keep those themes different. And I think, Brian, how from a code perspective, that also helps as well to just to kind of separate those those needs as I guess the two companies move forward is that is that best way to explain it?
Yeah. So from a code perspective, we have the brand Open edX package that is installed by all the MFPs and that includes the default Open edX theme, but anyone that is deploying an instance can choose to override that package and use their own theme. And so one example of that, that it's great that it's an open source version is the brand edx.org theme. So we can point to that and say, Hey, if you're looking to customize all of your MFPs here's the example of how edx.org Does it and you can look at that and how that works compared to the default theme that we have in the brand Open edX package. One thing that I'm really looking forward to doing on the dock site standpoint is allowing people to just pull in and load in whatever theme that they want. So that way instead of just having a binary toggle between Open edX and edx.org, we would be able to actually say, Yeah, pull in your own themes, see what all of these components look like when you add your own colors and whatnot to it. So yeah,
it gets you to that point, we can. We can make we can make that transition visually over whatever we I think that's a conversation we need to have. I think that's part of the the questions about next steps of like governance, approval process decision makers, like I think that is probably one that would be best for our next meeting after people kind of get into the library and feel around, see how that feels. And I think there'll be questions that bubble up. But I think from a theming perspective, that can be whatever we want it to be as we as we move forward. So I think that's a really great question. Because it's like, would we want to combine them? No, I think just from the the flexibility of having that open source and being able to stay in specific things, different regions, I mean, you know, ours majority is within the LMS and tying that brand to enterprise and then tying that brand to like our marketplace. So there may be different needs from an open source. That would make sense just to keep that theme. Separate.
Okay, that makes sense. But that was just looking at the if the thought was to modernize the Open edX theme eventually.
Yeah, exactly. Yeah. And that's a great point to just like, hey, we have different needs than at x, what have we want to make sure that that flexibility exists? And that's it's kind of already built in. That's why when we were kind of kicking around was like, how do we how do we get everyone into the library and have them check it out and figure it out? As well. Let's just go through the process that we went through that we just went through to update our brand. Awesome, great. But yeah, there's a lot I think, like I said, we need to figure out for next steps. Hopefully today is just like an intro to how it works. If if there's things that are mundane, and we, you know, you have that knowledge and it just let us know, we can kind of move on. But we tried to like pare this down as much as possible because we're going through almost the same process within edX as well as we're changing and updating the brand. All right, um, any more questions? Doug, do you want to take it over and you can kind of explain to them what we did with the library and you know, kind of walk them through those the next steps
Yep, I'm going to share my screen here. Thanks.
You guys able to see this? Fine. Alright, so like Mike said, we've just recently went through that or we're going through this currently on the edX site. We've duplicated Paragon and made an instance of it here, and we're calling an Open edX Paragon design system. And this one I'm sharing right now is the documentation of the design system, basically. So this might be basic for you guys, you may have have experienced with this already, so please stop me if this is too. too simple for you guys. But I'm just going to kind of walk you through how the library's laid out. So Well, we start with this cover page on your left hand side over here. It's you just work your way down the list. And you'll see what we're getting into here is like the foundational elements so you'll see things like colors, the color system, the typography, accessibility, whether it's working on different types of backgrounds, laying links, spacing for your grids, your container sizes, layouts, elevation, etc. These are all the foundational elements. There once you make changes here, they're going to affect all the components within the design system. So you'll see icons here we use material icons, you'll see layout this these are the different container sizes that you can make changes to goes into alerts annotations, etc. If you want to make changes when you're playing around with upgrading your theme, you would make it over here in the Styles. These are considered local styles to this document, so if you hover over, let's say the body styles, you'll see this little edit style icon. And you can go in and change the point size, the font size, the spacing, and then when you apply it, it affects all the components that's using that that header style. Same with colors. You have your primary color, these are all add extra colors right now. But that's for you guys to go into and make edits to so you can change the color to whatever you want here and one it'll affect across the it'll take place across all the components. So then basically, you can edit anything within your styles over here. As far as your your fonts, your colors, your effects, and your you can add grids and then if you need to export imagery you exported from down here. So once you have access to this file, you're going to want to and you're going to want to start using it you would you know create a new document, new design file and then you attach the design the design system to to this file so it talks to it. Up here in your assets panel, you would just hit this little book and then when once your design systems load
I have a bunch of different design systems. You probably won't have all these you would click on the edX for Open edX, add it to the file. Now that that's added to the file, you can see over here all the the foundational elements, you can see everything that was in that design system that I was in that I that I was just editing. You can see it all in here now. So every time you publish those edits to that design system, the user gets a notification that updates have been made and then they can they have the opportunity to dismiss it or apply those changes to their document that they're working on. So now that this is connected to the design system, you know, and you're getting ready to build a page, you would set up your your, your canvas, basically build everything within frames, just the recommendation if you're not familiar with it, and then you can start pulling elements over from from your assets panel. Over here. You can see our buttons. We'll see you would bring that in. That's how you placed your button. And then if any styles get made into that existing design system at all take place here so you don't have to go back and update anything. So down the line you guys decide to make the buttons until form. It'll change automatically on all your files. If once you get that dismissal notice, you can pull things in. Here's some cards. They kind of they get deep, they bury they have variants within them too. I can show to try to show you how to do some of the variants with like this is a horizontal card with like, that's probably the only real example. But anyway, so a lot of the components have variants within them also. So maybe for this button, we can show it here, zoom in, get this variants panel over here. So if you need to change it from like, primary color to tertiary it changes oops, sorry. Right here, size default or small it changes. So you have some some components have options within their icon before icon, no icon icon after things like that.
Can you show how to change the like the copy of that as well too, because you want to be mindful to not detach it.
Yeah. Oh yeah. So if you detach a component, like if you really need to make some changes, you can go in here and detach the instance and then it no longer talks to your design system. So any edits that are that are made there won't won't affect this take effect on this button. But if you want to go in here and change the the copy, it's it's done right within this, this instance of this component and it's set to auto layout so it'll, it'll respond to, to whatever copy you put in. There. There's a slew of elements here. I'm mainly work on the marketing side. I don't work on the back end, the LMS part, but everything from Foreman foot PIO, input fields to page banners, search fields. It's all here.
Can you pull some of those in just so you can see that so they can see how like that interaction works?
Yeah. Okay. So you need to, if you need a select menu, you can bring this in, if it's purple like this, I mean, it's a component and it's not it's still attached to the design. system. So if you want to take something out, you'll notice over here, this is my component at a component level. If you hide things, turn things off. It just you know, kind of adjusts as needed. And, like what else should I show him?
Um, maybe go back to the list. I'm trying to think if there's anything some like building a page, like if you can go maybe put in some of those more complex one like the date of the date. Yeah. Yeah. I think that's a good one. So you kind of see those variances of it. But it's See how it's like it's it's super nice, how allows it allows the flexibility of the system, that it's all pre built. So as you start to work through some of this, the first thing that we do from a design team is like, Okay, let me either go to the Doc site, or if you know the library well enough, it's like, oh, I'm trying to solve this problem. These components are already there. Like, I don't know, I kind of pieced them together to give you the, the, the most complete way of designing like, Yeah, I think that's a good point to Doug when he was turning on and off. Those are specific variances that we can account for on the code side. So if you're designing and you don't want specific things, that's already pre built into the to this library. So it's like, oh, cool. Can I remove that? Yeah, no problem. And then Brian's like, oh, yeah, that's, that's great. That's, I can just remove this, this. This either list element, or div because that's already pre built into the,
the code and you kind of see here were, you know, this variant for this data table. There's a filter and no filter version. So you can you'll see with filter, no filter, there's little descriptors there. You can get really specific to in here and add more detail of like, like right rolls around, when to use it. Within this in the in the variant panel. So that keeps everybody kind of in track and keeps things consistent. Let me show you like me update the Open edX, I'm going to update a color and they're just going to share something so it shows you so I can show you guys how to how this is working. So if you want to go down here and say you want to change your buttons from Square to round, you got to find the the main component. So this main component is indicated by this icon, where it's kind of filled in purple and then instances of it are just a diamond empty diamond. So if you if you go in here and you change the corner radius up here to let's say 50
It turns it into a pill. And now when I go to my assets up here, there's this little blue dot.
It's saying that I made a change to the design system and I publish it. I'll get a notification in this file since it's attached to it. Eventually it'll once it catches up it'll say you know, would you like you know updates have been made to the design system dismiss or apply or whatever and then this button shape will will change with it. So I think this was
Does this make sense? Like, do you want us to get into a little bit more detail like H tags are built into this fonts? You know, pretty much everything that you really need to build a page from all those elements. A lot of that a lot of that work is already pre built and it's just harnessing the power of the the library. So, you know, let us know if there's any anything else from a layout perspective that you'd want to get into? Or if this all makes sense okay, so I just published that let's see if this works. Yeah,
does does that notification system go the other way as well? Like if somebody makes a change to a component that's being used, and they want to like sync that change back to the design system? Does it go both ways?
Yeah, you can, you can apply it to the existing Yeah, like say you're in your document and then you make an edit and you're playing with a button in your page layout, and then you want you can actually like then right click on that component and apply to main component and it'll Yeah, yep. Yeah. Okay, so you see this little notification down here. This toast I got. So reviewer dismissed. So I'm going to hit review. I'm gonna hit update. Okay, let's see. Oops. You can see my now my pill. My button is pill shaped here. This must be a different instance here in this this component but so you'll see how that applies. So now I got the notification. There was an update button style changed. I applied it to my I accepted the change now my file is current with the most up to date design system.
Do you want to drop pull over even just like maybe the h1 and Texas but is there anything with the grid or anything with the padding that's kind of built in that that you want to
so you know, working within a grid you when you select your your canvas that you're working on. Over here, you'll see the layout this thing says layout grid, it defaults to this once you click it to this eight pixel grid, and then but in here we have all these preset grid, so 12 columns at 1440 you can within the main design system, you can go in and change the gutter as the margins, the size of the columns, etc, etc. So if you want to play with with your grid and your column setup, it's totally up to you guys. But you can see some of the basic grids that people have created in here. Now I wasn't part of the original creation of this paragon design system. I've only duplicated it and made updates for use on the marketing site. So I can't speak to why there's all these different Column Grid Setup, but you can see here where you can kind of fine tune it. Now notice, I can't make the edit in this file, I can only make it in his design system file. So I'd have to go I'd go to style definition. And it takes me to to the design system file. And then I could go in and change Yeah, so actually, if it's over here, we can change it in here. So if you click this icon here, you can go in and change the how many columns you want, the color of it, how vivid it is on the screen, and then whether you want it to stretch center right or left, side margins and then the gutter width. So these are the preset for Paragon. That's what Paragon is based off of so insane with anything else within the design system. You can edit within here
it's also nice to everything from an auto layout perspective to which I'm always can be very complex. But with the auto layout format as well too. It allows you to also harness so all of the components will be able to flex within that space as well. So if you make the canvas larger or smaller, all those components that are built in are already pre Yeah, do you have do you have like an existing design dog that I'm gonna show you like,
what kind of using some stuff I've built for this this marketplace redesign that we're doing? So let's say this Learn page, you can see how the grid is turned on on here. Turn that off. Over here. If you just hit the eyeball, you can turn it off so you don't lose it. You don't delete it. So this is done with auto layout. I'll paste it over here too. So don't mess up the original file but as you take things away the page adjusts. So I just removed the hero. The content moves up. Here's a good example. Like if you take one of these cards out, they auto layout and they go three wide and the width of the card expands but it's all on how you build the components. So you have to each little element of that component has to be in an auto layout frame nested within an auto layout frame, etc. So we don't we decide we don't want this banner ad here anymore. We delete that the content goes up the page. We don't want this banner ad here anymore either. So those cards move up. Here's an accordion with a variant you can open and close it and then it holds guide you can see how it kind of you know shows if you need to show it open and you need to show copy in there. You can kind of do like that. Notice the purple on here that's a that's a local component that that I created. So I I edit it in one spot here in my local Components panel. These are outside of the design system. So you can create local components to I recommend doing that if it's something that you're exploring and you're getting a bunch of feedback on it. I would create a local component and play with it here. So if you make updates to this local component, it'll change on your designs also, so but you'll notice here my here's my footer that I created. And here's the desktop version, and here's the variant of the mobile and but you'll notice the icon here also is this showing that this is the main component, you adjust the variance over here. So you can see like property one that's that's the mobile, the mobile version, and then you can actually change that right there. Also the naming for it. So and this is the desktop version.
Ali, you have a question.
Yes. Doug, about that local components page. Is that just a normal page that you've created and put a little emoji ahead of it? Yeah, exactly. The type of page okay. Yep,
exactly. Yeah. Let me uh, sorry, I didn't mean to click out of that. Let me go back to that. Yeah, there's like some, like, there's a bunch of figma kind of like Best Practices stuff that people do. And that's kind of like indicators of like, this big list of like, it's like almost like layers in Photoshop and a way, the way that this is kind of set up over here where like, this is our this would be like our prototype page where we might have an interactive prototype, the local components, that little like building block icon beside it, it's just an indicator. People use checkbox Muxes to like say that it's done. Tools that say that it's in progress, just there's this if you do a little research, you'll see some best practices out there. This is something that I've been doing to try to keep our files a little more organized. It keeps things consistent. And then like people start getting used to it and then they'll realize if they're in that file that if they see that icon, maybe Oh, that I don't touch that yet. I don't want to get ahead of the designer and do a build if it's not ready, you know? So that like, yeah, like local components, like when we were exploring the visual design. Here. We were like, I was like thinking to myself, Okay, my instinct is going let's have a white navbar at the top. But I know someone's gonna say let's have a look. What's it look like? Like in green? So I made green variants that I can just kind of switch on and off because I wasn't gonna go update it 55 times and different files, you know what I mean? So these are local, because they live in this file. They don't live in the design system.
We can also walk through some of that to ally I think this is a good like jumping off point. So these next couple next couple of meetings are just like hey, can you just walk us through how you like to do this or like, if there's anything that from from a group perspective that we can like shed some lighting as well too, you know, there's 1000 ways to do things in figma so you know, we can always just, you know, Doug can always just break down like, Oh, this is how I like to do it. I feel like that was always helped me in my career. I'm just like, oh, wow, that's cool. Like, but like we didn't we didn't also want to put this together. And then it's like, yeah, we already know that stuff. So like, kind of let us know. You know, if there's anything we can share in the next couple of weeks, you can start putting together less together. And then we can kind of walk through through some of those experiences. Like I said, I think what I'll ask for in this in this group of who do we need to get access to our figma library and I can submit that ticket, because then you can start getting in and using the library and updating it.
You'll also see like in here too, as you start exploring the design system. They've written rules and guidelines on how to use some of these components to so you know, if you want to change that you can kind of get in if you want to get into the weeds like that and change that but it goes into the hat, how much padding you should include around info, you know, messaging and alerts and stuff. Like that. And I mean, it just gets it's pretty, pretty dark, pretty well documented. There's, you'll probably notice a few things in here that didn't get that may have got lost along the way and don't don't talk to a style. It's very easy to connect it back to it. I've noticed that when I recently done this duplication thing for the marketplace. So you might need to adjust a few things by hand in here to make but it should be pretty pretty close. So they like for instance here they use these like little construction icons that this components being worked on. So this is like dude, I duplicated this yesterday. So as of yesterday, apparently in Paragon they're still working on badge and bubble updates. Jenna
I have a question about how this how this design system kind of works operationally and this is gonna be coming like a question from a product perspective. And so I don't necessarily necessarily have like the right words the right jargon for it. So apologies but like how does the who maintains the design design system? And so as an example, like if somebody creates a local component that they're playing around with, and they get some good, like user feedback on it, or do some usability testing on it and find it's like the, you know, a good way to go, and then they want to update the system with that new component. Like, are there Are there guidelines are there is this is what the Paragon working group does in terms of kind of like, reviewing the new updates. How does it work operationally?
Yeah, Paragon working group is exactly the answer there. If you have like a local thing that you're playing with, and you're and you would like that to make it into Paragon there, of course, the technical considerations that people like me and the Paragon working group would be able to address also, all of the design UX considerations, maybe there's another component that is close to what you're trying to do, and we can expand that just trying to figure out what's the best path forward to provide the functionality that you're looking for, as part of the design system? So yeah, Paragon working group, we have those conversations all the time.
That's a great space to join in, because then, you know, we'll kind of work out that interaction between the two of us as well, but basically between the two themes, as well. This is a good opportunity for us to be like, Oh, that's really cool. Like, I didn't realize you were working on design, I love the pull that over and we can pull that over to our library and that you know, and once that is coded, then we can take advantage of that or vice versa. So, you know, that communication between the two of us, Team wise is wherever theme wise, rather, is, is going to be really powerful as well.
Is there I know this was a lot, you know, I know this is it may or may not been a lot. I know for the first time with me, I've just Gucci's let us know. You know, I think these subsequent weeks, I think, you know, I think some of the questions I had was around like ownership and governance. I think what once we get everyone into this file, you know, Ali, I can you know, we can work with you, Ali or Jenna of like, I think the first thing would be updating, or, I think or Cassie to your point modernizing the library to match what we have in the code base, I think is probably the first step is like going in looking at what what the Open edX theme is and making sure that the library within figma matches, I think that's going to be probably the first task. And then after that, it's like any changes you want to make, but then and then I think a lot of that's communicated with engineering, but it's like, I think we're starting you know, this is this is the beginning of the relationship. This is the beginning of like, getting in there starting to work through these these sorts of things. So as we move in, you know, maybe you know, we can work with all of you of like, what can we what can we do next time? What does that look like? Is it around governance is around that conversation is around the process of it, or maybe by the next time it just like maybe we walk through and maybe we can walk update those styles within the library together if that's a good exercise like I think, just communicate with us what makes the most sense. I know some people just like to jump into it. But sometimes it's also easier and like, we've been working on it. It's so much easier for us to go through and take the time we can share our screen and we can spend 30 minutes we can spend an hour let's update the design system together. So yeah, I think like I said, this is I think the beginning of the relationship of what we're thinking. I think definitely updating the library is probably the first step. I think that makes the most sense. So you know let us let us know I think, Jenna or Allie if you can get me all the emails and the people who would need access to the library. I can start requesting that because the figma licenses have changed so I can start requesting that and I think at that point, then that I'll unlock. Get into the open edX library start playing around with the design system.
Perfect we'll do and Mike when you say access to the library, or you mean access to the Open edX first. Yes,
yes, exactly. Yep, yep, yep. Yeah. And then, like we had said before, is like, you know, that makes the most. So giving you access to our figma makes the most sense, right, because otherwise, we haven't found a good way. figma doesn't work really well, especially with that from a library perspective. They like to keep everything within that existence, right, everything to persist within it. So that's why I think it makes the most sense of all of us working within that same figma license. Okay,
thank you sort of limit or anything because I can see that the, the need for like the number of people to have access to this is probably going to be pretty, pretty large. Okay.
So it'll it'll change like it will be. I think we can let's, let's figure that out. Because I think that that's I think the biggest concern right now is being able to share libraries. I think that's the biggest concern. And then there's also two different types of licensing there's a view and there's an edit view will be you don't think it's I think the licensing is different with those Brian, did you have something I was gonna
say? The link to the figma on the dark side is publicly viewable at this point. Okay. So as long as we keep it publicly viewable, that's good from an SEO standpoint, but I don't know what we need. From a design standpoint, I'd assume it's access that we're more worried about that.
You got it. Yeah, there'll be edit access. And I already checked, you know, the, the, if we just get these initial emails, I think that'll open up that open up the conversation like okay, this is how we need, we're definitely going to expand so then I think it'll kind of give the people who are charging the license, or at least an idea of how large the group would would get to Jenna?
I think Cassie may have had her hand up first.
Oh, it's fine. Oh, Mike answered my question.
Yeah, I mean, we can we can start by putting a list together. But I would say like from a, like a policy perspective, like any any provider who is doing a project doesn't be contributed to the core product, I would think would need by default access to it to the right so that we're all designing from the same the same point of view. And so like, I'm just looking at this group right here, we've got like four or five different organizations just right here in this group represented. I know of a handful of other projects just off the top of my head. So yeah, but we can start with like a list of names and organizations and then go from there.
Okay, great. Yeah, yeah. Well, once we I think we have that larger idea. I think that we can kind of look to restructure. And then like I said, in that time, yeah, maybe. Yeah, I don't know it. Maybe it does make sense if we see that it's getting too large to separate those libraries. I think once we get to that point, hopefully the library will be in a in a mature space for Open edX. And then maybe that transition is isn't as difficult. So yeah, let's let's, let's, let's see what they think.
Thanks, Ali. Thanks, Ali.
All right. Thanks, Doug. Is there any questions? Anything at all? Like I said, I can work with Jenna and Allie about maybe the next step of some of the things that we can walk through once everyone get set up with the figma instance. Like I said, maybe the next conversation is, will collectively open up that library and start making those updates, if that makes sense. But maybe, you know, I can talk with Jenna, Cassie and ally, whoever and then we can start setting up I think in the next what is it? bi weekly? Is this limit this meetings every two weeks, maybe in the next two weeks? We'll come up with an agenda and little by little we'll keep chipping away at just making everyone feel comfortable within the design system. And there's any questions or concerns? I don't know. I'm such a visual person. I think I'm sure a lot of people here are that getting in and having someone kind of walk through it makes you helps me out. But I also know everyone learns differently. So like, as we move forward, just be you know, this isn't this is a safe space. So like, just whatever you want to learn, however, we can help or this is this is this. I don't need this information. We can also kind of take that and move on as well too. So yeah. Awesome.
Thank you. Thank you, Doug. I think you should start to channel on YouTube
other side hustle, I guess? Yeah.
Awesome. I'm happy to answer any questions or like, do a little tutorials. I just didn't really know what to show anyone's level of comfort or experience in figma. And it's hard on the fly like that. So like totally reach out. If you want any tips or tricks or anything. totally open to help and
yeah, maybe maybe we could discuss moving forward with this group. Like if we since we meet bi weekly maybe it's like once a month like every other meeting we do like a dedicated workshop or something to this so that we have a regular cadence for it or something like that. Just as one option we do
brought in study group where we learn about someone presents about a specific thing on the front end and how that could work. So I could see a similar thing happening in here where there's a someone presents some something cool that they know how to do in figma now or something like that. So
yeah, one thing that really, that's really helpful is the auto layout thing. And there's tons of tutorials out there and it's super efficient and amazing, actually, once you get the hang of it, so I want to dig in, dig in there. If you're looking for something
the place my mind was going to I mean from like a product perspective, it seems like figma has a really well thought out way to link libraries to the file that you're working on. And there's I think a like a direct parallel there with the future of content libraries, right and course authoring, right if we could figure out a way to draw inspiration from figma is a reference, right? Like you put a library with content into your course. And then you can just kind of like pull content directly from the course. It's like sits a little widget and you can just pull content in the course outline.
That's neither here nor there, though.
All right, huge. Thanks, Mike. And Doug, any other questions? We've got like 10 minutes left, but I want to make sure we close this loop here.
No questions about figma but I do know that Esma wanted to do a presentation so maybe we can use the last 10 minutes for that. Yeah, let's do that.
Thank you Ellie. Actually, I share my screen
is my screen visible?
So I'm on board on tutor project and I'm currently working on dark theme of a tutor and we are going to call it midnight Indigo. And I wanted to gather everyone's feedback on the colors, composition etc. I have designed three main screens register screen, my course screen and discover new so if you guys have any comments on this theme or any questions I can answer that
I guess my first question is, do you have the contrast ratios between text and colors documented somewhere?
I haven't documented them but I have checked the accessibility and they do meet accessibility criteria. Okay, cool. But if that's a necessity, I can like document here in this figma file as well. Yeah, I mean,
I feel like it's just a question that people will have sometimes. So just having that documented. It's like yep, tested this. This is the ratio we're getting is kind of a nice thing to be cool.
Any other feedback that anybody else has?
As soon as you know I've already given you. Yeah.
So I guess he has have given me feedback before which I have incorporated in these designs. Also, I wanted to discuss another thing. So this My Courses screen. This is exactly how my Open edX screen looks right now these cards in which the organization name and the course and date are in one line. While I was redesigning, I redesigned this card like this, in which I separated the organization name and the due date and two separate lines and added some icons. And I think this card makes this design makes it more visually appealing the use of icons. And it's, it would be easier for user to get all the information that he needs in one glance. So I wanted to know if there's a way we can change the design of these cards
I believe that should be possible. I don't know if it's possible the theme itself it might be something that needs to happen in the on the component side. So that could I mean, it's not the component itself. It would be the use of the component on that page. But yeah, that could definitely be looked into.
Yeah, there's there's kind of like a product angle to that as well right like deciding because like I look at the these course cards, it's kind of like a feature. And I know it's one area that we've been thinking about. So that's a couple of places where these these kind of course cards live right let the learner dashboard is one place. On the authoring side. There are the course cards and studio home. different personas but we've been sort of thinking about course cards in general, like which metadata is going to be important to include in the cards like is there at a glance metadata that's that's going to be key. And so as well we could we could engage the kind of product angle of this this with the product Working Group and put together a little proposal around you know what you have it I don't know if you've had like any input from your product team as well about why the decision was made to kind of separate them what you know what icons were chosen, what made the data was included, if there was anything excluded, then I'll be good to know. So I'd be happy to work with you to put together a little proposal with you and any any product folks on your side and then we can put it through the product working group.
Okay, sure. Sure. Thank you. Thank you, then I'll reach out to you after the meeting and then we can sure work on the proposal. Great. Thanks.
This is a great one where once we land on something and get it vetted and tested, we can add that and make the adjustments within the theme. And then anytime anyone uses it moving forward, you know we'll have this darker theme we can have the lighter theme so or the lighter component. So this is a perfect idea of as it progresses and moves forward. We can contribute that back to the to the Paragon design library.
I think totally empty Thank you. Thank you Mike.
I'm just I have like a curiosity question more than anything like what was the what was some of like the user feedback driving the decision around making it like like the midnight theme like the darker theme? Was this guided by like these are input or I'm just curious like what the where it came from?
Okay, I got told by Sookie biller that the requirements of the Dark Theme came from the Open edX community.
And I feel when always if there's a dark theme, I go for it and if I am using anything that doesn't have a dark theme, I actually immediately get frustrated. And I've got a an extension on my Chrome that can make things stuck. Even it's a dark theme.
Got it. So there was like a gap there. There was no dark theme in existence. And so that's got it.
I'm also a dark mode always person I'm pretty sure it's because my monitors are now very bright as opposed to how they used to be like 10 years ago and now it's something where I just can't handle that much light coming into my face. So having a dark theme is helpful.
Like yeah, like the choice of like contrast and hues and it's not just like black like a lot of like if you a lot of the dark themes are just black, but I like the conscious decision to kind of go with a range of hues in that in that color space, I guess.
Thank you Thank you, Xanax.
I guess I am just thinking about how a snow mentioned the splitting out the two things on the card. I have a question. But I think it's better to do it in the next meeting, but just about how much can we stray from the existing components and isn't that rigid that if I just want to add an icon here I need much rather much rather gets Paragon working groups go ahead like how much freedom is there.
So specifically with those cards, the card component can have lots of different content in it. So you wouldn't need to edit the card component to be able to change what's being displayed in there. It's specifically that pages use of the card component that right now the contents have that card component have it as one line and it would be changing the contents of that card component to have it as two lines. So it wouldn't be a you need to talk to Paragon and get card to now support having those two things. It would be there's a product decision to be made about the way that the MFP is using that card components to display that information.
Got it that makes sense. Thank you
give you what you need. In terms of feedback.
Yes, yes, yes.
And then the last thing on the agenda was just about the search that Jenna Cassie and I've been working on. I've created a prototype for it. So I think I'm going to share that in the Slack channel and anybody who wants to click through it can check it out and get a better idea of what we have in mind and how it's how we're envisioning it working.
That sounds good. Thanks, Ellie. And then when you share that as well, I'll drop the product requirements in as well just for context.
Perfect. Thank you, everybody. That was That was great. It was one of our fullest UX UI meetings. In a while.
