- Welcome to episode two
of Creating the ConvertKit, marketing Site Design System.
Now let me address two things right away.
Number one, I've been sick.
That's why my voice might be sounding a little bit odd.
And number two, I know
that I uploaded episode one of the series back in like May,
about seven and a half months ago
and I've had people asking, "What happened to the series?
Why is there one episode?"
And those are very fair questions, and I have to be honest,
progress on the design system has been a lot slower
than we wanted or expected.
If you watch that first episode, you'll know
that we are a very small team working on this project.
Just two designers, one developer, and quite simply
we had a lot to prioritize in 2022.
Aside from developing the design system
the biggest thing being shipping a brand new code base
for our marketing website, let me tell you about that
and catch you up on what we have been working
on in our system over the past seven months.
(upbeat music)
So the code base
you will have heard Corey talk a little bit
about what we're calling Beloved site 2.0 in the last video.
But basically the entire convert kit site has brand new code
behind it now.
Visually it hasn't had very many improvements
but all of the code that's putting content
on the page has been updated
to this new flexible system built using React.
That's gonna allow us to have parity
between the components that David and I build
in design and Figma and the components that Corey builds
on the site, which is very cool.
Now we had big dreams of shipping a ton of new components
with new code base, lots of redesign pages
but in reality we ended up just rebuilding
and shipping what existed previously for the most part
that was just the fastest way we could get
the new code base live, start filling the benefits of it
not only in our process between design and dev
but also in our site speed.
So that's what had to happen.
We rebuilt a lot of things that we know are not gonna
like live on past this year hopefully
but we got the new code base live, we shipped it on time.
I'm very proud of the team for that
especially of Corey as our sole developer.
The majority of the work for this project was
on his plate and he deserves a big round
of applause for getting that shipped.
Now though, let's move on and take a look
inside Figma at what we have been working on
since that last update video.
So you know how in the last episode I joked about the fact
that we'd already refactored our button component
like three times.
Well, we did it again.
This is what our button component is looking like now.
David went in and did a bunch
of refactoring to set it up with.
We've got hover states, focus states, disabled states
there's component properties.
Now for like the button labels for the icons, I'm
hopeful this will be the last time we have to refactor it.
Touch wood, please let that be the case.
But yeah, this is a much more robust system now.
As you can see, David's also documented it really well
and hopefully this will serve us going forward.
David also refactored our grid component or like styles
I guess it's not really a component in the grid.
As you can see, he's documented this too.
This refactoring was mostly to add in this margin
and padding here at the side of the page
so that we can have content in a container
like the navigation for example, if this was behind here
content can have a container where the content still reaches
to the edge of the grid, but then there is enough padding
and margin that a container can be
around it without touching the edge of the page.
I really should have had David on to explain this part
'cuz he did a much better job of it than me.
But yeah, this new grid system has been serving us well
in the new pages that we've been laying out so far though
I did just notice
that we need to update this component here
which is our like website frame that we drag
in as a starting point for every new project
because it's got our old navigation and footer in it.
And we did redesign those when we launched the new site.
But now let's move on to some newer components, shall we?
So first thing here, pretty basic, this is a heading
and text block component that needs a better name.
If you've got a suggestion for that
please leave it down below the comments.
But this is a component that is basically all over our site.
Anywhere there's a page with content
this component is probably gonna be used and I've set it up.
If I drag one in from the side here
I've set it up with all of the different heading sizes
all of the different paragraph sizes and you know
then you can mix and match between them.
You can have an icon next
to the heading on top of the heading without an icon.
It's responsive as well.
So if you want to drag it out to go over more columns
than you can, this is one of those components that I'm sure
like the button is gonna end up being refactored a few times
but it's served us well already.
It's been very helpful to have in the system just to grab
drag it into a page that you're mocking up
and be able to quickly have that heading
and paragraph there.
And as you can see when you start to think
about all of the options there is, yeah
there's a lot of variants down here as well.
I started laying out a few rules
for how we use these components together, like
whether there's paragraphs after a heading at the start
or if it's just a heading and what happens
to the image when we stack it on tablet and mobile size.
We're not completely settled on this yet.
We need to apply these
to a few more pages first before we can be sure of that.
But yeah, this is a start
of defining some like yeah, section types in our system.
Another one that I set up is this curved divider.
We use these often on pages like between site sections
and this is set up with options for color.
You can change the direction that this goes in.
Well, you're meant to be able to, okay
well something's broken in this component.
I don't know what's going on there.
We're gonna need to fix that later.
But yeah, also there's this break point
for different screen sizes as well
'cuz the curve divider gets shorter when it's
on a smaller screen and this is also responsive as well
so you can drag it out to fit whatever screen size you need
in between these break points.
Okay, noting that is one to fix later.
Moving on, we've got this article card here
which is currently in action on our blog.
There's two different like versions of this article card.
One has a shadow behind it
which is used when the card is on a colored background just
so it like sets out from the background a little bit.
Then the other is this one with a border.
This is a component that has been built
in the new site system, but it hasn't really
been designed QA'd as a component, if that makes sense.
So we need to go back and do that
and I guess I'll probably talk more
on the next video about how we're doing design
and dev QA for building these components.
But yeah, for now the base of it is there.
We have a starting point to work from, which is exciting.
I feel like I've already seen a few things about this
like the interactions of this component that needs to change
after being live and like experiencing it
getting to play around with it.
There's a few things we wanna do differently.
So this will be one that you will hear
about refactoring in a future episode.
And then the last new component to tell you
about is this one here, which is a testimonial quote.
This one entered our system.
When I designed the product overview page
we just decided we wanted to have a way to feature
a nice large testimonial quote that got a nice big photo
of a creator in there.
Again, this is one that's been built in the new system
but not QA'd as a component as such.
So yeah, there's a few things that we need to tweak.
Like the photo at the moment isn't expanding
in height with the quote, it's staying as a little square.
But yeah, if I drag this in and show you
this is one where you can change the color
of the border that goes around so
that it can match whatever background that it's on.
You can have the photo on the left or the right.
Oh good, I'm glad this component is working.
And then I've set up also component properties
for the quote so that you can edit the text in here
and have an update in the component.
I think this is a really useful component
that's gonna appear in a lot of our like feature pages
across our site when we wanna bring
in some social proof as well as nice image of a creator.
That's definitely a big part
of our brand is making creators the hero.
So I like having a nice big photo of them
and shout out to my friend Austin.
He animated the Charli Marie TV intro
that you see at the start of all of my videos.
And he's also a ConvertKit customer
so now his photo lives in our design system.
I'm sure that in a future video I'll be updating you
on ways with added other testimonial quotes.
This is like a very large one and I know we're
gonna need much more subtle ones as well in our system.
But yeah, this is what we're working with for now.
Okay, the last thing I wanna talk to you about
in this video is our illustration system, which is like part
of our design system, but also kind of a system of its own.
Previously our illustration styles were kind of all
over the place.
There was like generally a hand drawn feel to them
but the way we used color and
like what hand drawn pens we used varied wildly.
And yeah, we just didn't have a system behind this before.
We had never defined the rules.
So that is what we are now setting out to do.
I've been working really closely
with our wonderful freelance graphic designer,
Holly, on this.
We've been doing a ton
of explorations as you can see in here.
There's like lots of different pen styles
and weights that have been used.
And yeah, we're really settling in
on what we want the rules of our system to be.
This was, if I come back over here, I showed this in a vlog
but this is the mood board for our illustration system.
It's like we want things to feel kind of loose
and sketch notey, definitely hand drawn
but not in a way that's like too cutesy, too textured
too detailed as you can see here.
And I'm really happy with where we're ending up actually.
So what we've come up with is a system of three levels.
Level one is the smallest level.
This is for an illustration that's essentially
just a small step up from an icon.
We want it to be a little bit more detailed
than that feel a little bit more custom.
Level two is
for an illustration that is more of a spot illustration.
It's gonna be larger, a little bit more detailed
it wants to command a little bit more attention
or like help explain a concept.
And then level three is our like largest size
of illustration.
These are for the hero feature illustrations.
We'll use an empty states in the app on the blog
perhaps like on social media as a standalone image as well.
And as you can see
they get more detailed as you go up the levels.
So this process, everything you see in here
and all of these comments has been
about figuring out what we want our rules to be.
And I feel like we're getting pretty close on this.
This is something that I think I'll go into in more detail
in a future video, but our next steps here are to
start applying the rules we've defined
and the system that we wanna work
within to some of these key concepts that we
know we're gonna need illustrated.
So we're gonna work on a level one, two
and probably three for each of these things.
And then as we go about designing new pages
as the product designers take a look
at applying illustrations within the app
we will create new illustrations as
and when we need them and make it this
like living breathing system that we're constantly adding
to that people can pull from
for presentations and things like that as well.
I'm really excited about, this has been super fun to work
on and it's fun to be seeing it come to life.
Next up, we need to start working
on our product imagery system as well.
This is again, something that needs some better definitions
and rules in place, as well as
some like base images pre-created living
in a system that people can just copy
and paste and pull from when they need to.
So that's what's coming up next
for us as well as finishing off the illustration system.
Also, what's coming up next is redesigning pages.
We're gonna be tackling a redesign of our homepage next
and I'm sure there'll be new pieces added
into our design system as a result of that.
I'm also working on like a simple template
for an ad landing page that will again
require some new components or us figuring
out what the rules are
for using the components that we already have.
I will definitely share updates much more often this year
I promise you, as we work on developing this system.
If you miss the first episode in this series
then definitely go back and watch that right here.
It talks about what our goals are for the system
like why we're working on it, as well as
what our process is gonna be
for tackling it and bringing it to life as well.
So make sure you're subscribed to see future updates
in this series and I'll see you in the next video.
Bye.
(upbeat music)