GitLab Digital Experience, 16 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Recap sprint 3 marketing design system

Description

Related issues & merge requests :

Homepage https://gitlab.com/gitlab-com/marketing/inbound-marketing/growth/-/issues/758

Related OKR: https://gitlab.com/groups/gitlab-com/marketing/growth-marketing/-/epics/92

Inbound Marketing handbook page: https://about.gitlab.com/handbook/marketing/inbound-marketing/

A

All right, hey everybody, so this is the design team for inbound marketing. We're going to talk about our latest sprint, which we have dubbed experiences: the comb that life gives a bald man.

A

That is our irish proverb of the week. The goals of this sprint were kind of making a decision about what technology to use going forward. So we'll have some of our guys talk about tailwind and storybook and some other things that they they made. A decision on um that'll help us kind of improve our design system and then also some iterations are made to the home page, which we'll have presented to you as well all right. So, let's first talk about um that decision with a tailwind and uh javi and sami.

A

If you want to go ahead and take it away.

B

Yeah sure so something that I was working on was making sure that storybook works well with tillwind and is deploying via netlify, and what this is doing is I'm going to share my screen right now. Real quickly is try to get us to have a place to have documentation for some of the things that we're working on. So I'm going to share my screen real quick- and this is a netlify link that I will make publicly available if anyone is interested. um All this is is a git button, that's following the tailwind specifications.

B

So that means that tailwind is being used under the hood to make this button, and if I go back to design, I can see that this is the slippers foundation button that exists. So what we're getting at here is trying to create as little variance between this button and this button over here as possible from an engineering side. One of the big things that we're trying to work on is making sure that our foundations are matching.

B

What that means is that tailwind comes with their own opinions on like what different buttons and styles look like, and so something that we're working on is making sure that both of these are sharing the same dna and making sure that there's as little variance between design and code, and it translates on a one-to-one basis.

B

So that's that portion um we also tested pushing that to npm. So this is an npm package. If we go, I'm gonna share my screen one more time really quickly, um and this is just a test package. This isn't anything fancy. um Part of this was also figuring out how much effort it was to actually push something to npm, and here it is um so. The repo is linked, we'll link the repo and sami right now is going to talk a little bit about uh trying to test nux, tailwind and gitlab ui.

B

C

Okay, thank you driving, so another thing that we tested is to ensure that uh deep, lab, ui, tailwind, css and knox dx can all work together inside the same framework framework so that we can ensure that whatever we are developing can work all across the world so that we just don't develop something that is still gonna fall behind just because we couldn't support one uh one of our libraries, such as gitlab ui.

C

So I'm going to share my screen right now, which will yes, I'm sharing my screen right now, which is showing uh the next year's app that we quickly created, so it's using t1 css from so imagine padding and the utility classes that is provided by t1 css, and it's still also taking styles from our gitlab ui, which is this section right here. The red color is coming from the lab ui the margin and the padding is coming from tailoring css, so everything can still work together and we are good.

C

So this looks like a very good impression that uh combining all these two kids together is going to give us some superpowers. Thank you.

A

Oh thanks, tommy. I think next brandon is going to talk about the iteration to the homepage.

D

Yeah, so let me figure out my way around um zoom here for a moment as I am currently recording.

D

Okay, um let's see sorry wrong window there we go okay, um so this is the newest iteration of the home page. It looks pretty much the same with some minor differences. We moved the logos and the used by text to a different section and, as you can see here, we have some larger blocks that showcase statistics and uh are much more prominent in contrast and information relevant and they all link out to case studies, and uh you know so increasing time on site and relevance to people at this point in their buyer's journey.

D

You know visiting the home page uh and then we also restored up at the top here this banner uh for downloading ebooks, to link our users to relevant content, and then one last thing is these uh cta blocks here now have links to path factory tracks so that our users can get the information they need, and that will help us all these, hopefully, uh shall increase our engagement metrics.

D

So yeah, that's that's about it. The rest of the homepage is mostly the same, but yeah this. This is the thing we were. I was focused on for this sprint, so yeah on to whoever's. Next.

A

uh um Bobby I'll, have you talk about um how we're tracking towards our okr.

B

Yeah, so one of the big things that we are focusing on during this iteration was trying to figure out where we're actually going on the technology vision side, and so I'm going to share my screen one last time and we had this big old discussion between the engineers to try to figure out kind of where we're headed and one of the big things that came out of this was having a dri on the engineering side.

B

I think that helps within the context of making decisions.

B

The big win here is having a set direction and then closing the issue and then trying to work within the principles of having a two-way door and disagreeing, but committing to wherever the direction is going and understanding that, if our needs change, so can our execution of those needs, and I think that's the good that way so, hopefully we'll try it forward in that direction.

A

Great thanks, avi, um the only other thing on our agenda is just uh letting you know that the homepage iteration is aiming to re-release later today. uh Does anyone else have anything else they want to add before we uh close it out?

A

No all right! That's it well done.

B

Cool thanks. Everyone bye, everybody.