- Okay, here's the story.
I need to design a landing page that will send
ad traffic to promoting the new email ad
that we have in ConvertKit, and instead of just designing
this page, building it, shipping it,
I really want to use this opportunity to start
building a system so that for future campaigns,
we don't have to design a page from scratch
and we can instead pull together a page
from various different components.
If all of this is sounding like something
that you would've expected we had already,
you're not wrong, we have had other priorities,
but now is the time to create this
or at least make a start.
I don't have the luxury of a whole lot of time.
For one, I'm the creative director at ConvertKit,
I lead our brand studio team,
there's a lot on this week, it's performance review time,
we've got a team retreat coming up,
so I've got a lot of like team management stuff to do,
but this is a project that needs to get done
and I also really like to still get my hands
into the pixels from time to time.
Realistically, I need to have this page designed
and be ready to build within the next four days.
So we're on a bit of a time crunch,
I'm gonna do what I can, and I'm gonna bring you along
on the design journey with me.
(calm music)
To start with, let me show you the brief
that our wonderful product marketing manager
has put together for me.
So to start with, she's put together a few examples
where a product feature page differs from an ad landing page
from a few different brands, so it's super helpful
that she's put together these examples.
And over here, she's also started to plan out
what she would like to see in the system.
So ideally this is gonna be a system
that she can use herself to put together designs.
She's got quite a design mind, fantastic to work with,
it's always great when people have that.
And so the goal, the dream is that we have the system,
first in Figma that she can put together
like this is what I'm imagining for the landing page,
ask designers, myself or David,
the other designer on the brand studio team,
could come in and make tweaks from there,
and eventually maybe we can get to a place
where she can actually build out the page herself
from our code base in the backend.
That'll probably take awhile but we can at least focus
on getting things into Figma for now.
So yeah, we have all of these different hero options,
testimonial options, pricing options,
this sort of thing, and she's got here
what she would like to see as the like MVP
for this page.
We are both in alignment on the fact
that we're not gonna get the full system
built out for this one-ad landing page
that I have to create in four days,
but we can at least make a start,
and I think knowing where we want to end up
will help me make the right design decisions
for this one page that I'm designing like in isolation.
When she says animation here,
luckily for my four-day timeline,
this is something we've already created,
we worked with a fantastic motions graphic contractor
on getting this animation here made
that shows our email editor, product, and use,
and like a demonstration of some of the things
you can do with it, and I think that that will be
a really great thing to include in the header of our page.
I don't have content for this page that will go
into this structure that our product marketing manager
has laid out, but I know our product well enough
to write a draft myself, so that's what I'm gonna do
to get started.
I don't feel like I need to let that hold me up
or anything, so I'm going to actually set a timer
for myself, we'll use the Forest app,
and let's commit to spending an hour on wireframing.
(calm music)
Well for having only spent like maybe
an hour 20 minutes on this,
I think I've made great progress.
I think my next step is to make a little Loom video
walking through these designs and share it
with the team for feedback because I don't want
to move forward too much more without their input,
but let me walk you through what I have done.
So I took a few of my favorite of the hand-drawn wireframes
that are made in, marked them up
to honestly much higher fidelity than perhaps
I need them to, but because we are working
on a design system for our marketing site,
which by the way, you can watch our video about,
I actually had a lot of pieces I can pull from
to end up with a fairly high fidelity-looking design.
So this first one has the animation at the top,
that's what this is a placeholder for,
and it also has like a little tab
with the search term in it, I noticed that
on one of the example ad pages.
Seemed like a good idea, could get confusing though,
be too many elements, so I don't know,
I want to get input on that.
Then we have this block here.
Right now, we have this testimonial group
as just like the three images,
but I know we've been wanting to turn it into a carousel,
so maybe this is a good opportunity
to build that component, make it happen
for us to be able to share more stuff.
Then we come down here to a bit more information
about the product, and then our pricing table
to end of the page, and this second one,
instead of having an image to the right
with text on the left, I've decided to try out
a big large product image, because the animation here
is quite stylized, you're not getting
a real sense of our product from it,
and personally, as a creator, I always like to see that.
So yeah, I feel that this could be a good idea,
and then we have three points down here.
Obviously all these icons won't be the same.
This next one has the centered hero image
that our product marketing manager asked for.
The reason I didn't do it for these one
is because I felt like the animation was kind of too small
to be centered, that it needed left hand,
left-aligned text to make that work.
But here, I had the idea of bringing the product image
up to the top and then putting the animation
further down the page and then here,
the same idea but with that staying sticky
and adding in another CTA button as well
so that there's more as you go down the page,
it is a page for ads, after all.
It's pretty basic and it makes use
of a lot of components that we already have,
but I want to share this now for feedback
and see if I'm on the right track,
and also hopefully get some real content
into this for the next design session
just so I'm sure of exactly how many like feature call outs,
for example, I need to be working with.
Not bad though for having only spent
an hour and a half on this and I will fill you in
on the team feedback.
Okay, it's like two weeks later,
this project got put on pause a little bit
as we went on our team retreat.
I'll leave a link to that video on a card
I think up in that corner if you want to watch
my vlog from that, but I have copy for this page now,
I have feedback on the designs that I shared,
so and now, I'm going to set another hour timer
and get into updating the design,
adding some details, and adding in the correct copy.
(calm music)
- [Announcer] Two weeks later.
- All right, it's a few weeks later again.
This page is finally live, and I want to walk you
through some final design decisions and of course,
show you the finished product.
So from the initial designs,
the one we chose to go with was a version of this one here
with the motion graphic, because that's gonna be
the graphic used in ads and it's good to, yeah,
create that connection between what someone saw
in an ad and what they see on a page.
So we went with this, text on the left,
motion graphic on the right.
A key piece of feedback that I got
on like these original designs was that the pricing section
felt a little bit overwhelming, which I agree with.
There's a lot of details to do with our plans,
and we felt like perhaps we just didn't have
to give all of the details presented in this format
on this page, like maybe there's enough we can tell people
to help make a decision without them feeling
like they have to go visit our pricing page,
and so that's what I was exploring down here.
This is like a version of a plan box
that we've done in the past,
but I really wanted to find a way
to allow people to see how the price changes
as their email list size increases,
'cause I think it's really important to know
before you're signing up for a plan.
And so this was my different variations
of like trying to figure this out.
And in the end, instead of doing the slider
like we have on the pricing page,
I actually went for a dropdown where you can, yeah,
click in the dropdown and select your plan level.
So if I come up here into my to build section,
this was the final file that I handed over to Cory,
our developer, to work on with some little notes
around here as well.
So you can see we have like a gradient on the page,
so that we don't have like full yellow butting up
against the full pink.
There's time for the colors to sort of like fade out
a little bit along the way.
The design translated really easily to mobile,
a lot of things stacking or like in this case here,
having the carousel show just one image
with slight peeks of two off the side
rather than showing three with slight peeks of two
off the side.
One thing I wanted to do, because it's kind of hard
to see product imagery at this detail on a mobile screen,
is that I created a simplified version for mobile
of the product so that we're still showing off
some of the features like the fact
that you can do A/B testing, like a little bit
of our UI so people can see how the text editing
and what the experience would be like.
Definitely doesn't show as much detail
as on the desktop screen where we can see
this new layout block being edited,
but I felt like going for clarity was more important
than showing a lot of detail on mobile.
This element here is kind of new for us
to show such a large-scale product image like this,
but it's something that we want to do more of
on our feature pages so it was fun to experiment
with this here in this ad landing page
which is kind of like a self-contained asset.
But as you can see as well, it's one that could easily
be swapped out with different content
to promote a different feature, you know,
different motion graphic image here at the top,
different product image in here,
different copy, different points,
the plan is gonna be the same no matter what feature
we're gonna be promoting, just like maybe the CTA above it
will be different, but it's gonna be really adaptable
and help us out with our ad traffic hopefully.
Let me show you the final page.
So here we can see the motion graphic embedded.
We did briefly try to embed the motion graphic
directly on the page through I think it was called
Body Moving, it's like this plugin that goes
with After Effects to help you export an animation
as an SVG animation.
I don't actually know all the detail,
I'm sounding like I do, I don't.
(chuckles)
But there was just like some little parts
about the way this animation was put together
that didn't work well for that, and so yeah,
we just embedded an MP4 in the end
and I know we want to come back to trying
that direct SVG-embedded animation in the future
'cause not only is the file size a lot smaller,
it's a lot clearer and sharper, too.
But you know, for now, this serves a purpose.
It's gonna connect with the ad that someone will have seen
which I'll briefly show onscreen here
so you can just get a feel for what that looks like.
Yeah, another compromise we made was to this scrolling
testimonial carousel, I guess we'll call it,
instead of having like a little peek off both sides
like this, we had to have it load like this for now
for time constraint reasons, but again,
it's something we want to come back to.
This product image section turned out really well
and if I shrink in like this, you can see
it swaps out for the mobile image when you get
to a smaller screen size.
And yeah, this plan dropdown, we ended up not including
all of the levels of our plans, because we have
like a 7K plan and like a 15K plan,
and you know, as you get up higher, you've got 155,
165, 175, it was gonna be an overwhelming dropdown,
so instead, we're giving people a good sense
of what they'll end up paying for their list size
before they sign up, but once they actually start
using the product, they can get onto the correct plan
for them anyway if there is one in the middle.
But I think this turned out really well
and much better than the slider for helping people
make just a quick decision to get a rough idea
of the price.
We only just started sending traffic to this page
very recently, so I've not yet heard how it's doing
in terms of conversion rate, but I'm definitely
gonna check on that and perhaps I'll report back
to you on that in a future video about how it's doing.
Maybe we'll make some updates, do an iteration
based on what we learned from how people
are using the page, what they're clicking on,
'cause that is one of the things that I love
about being an in-house marketing designer
is being able to revisit work like this
and make improvements.
If you enjoyed this style of show and tell
taking you along the process of designing something,
showing you the finished product, then you should check out
a video I made about creating our brand guidelines.
This was a project that was well overdue
that we quite honestly should've done years ago,
but in reality we only did it a few months ago.
You can go watch that process and hear
about that experience right here.
(calm music)