- I really love the beginning stages of a project.
I love figuring out exactly what this thing needs to be,
and what it needs to do.
I love the wire framing, the strategizing.
In this video, I wanna walk you through my process
and approach to starting off a new project
by showing you the start of a project
that I recently started working on,
a new learning page for the Convertkit Marketing site.
So, I'm gonna talk you through
how I approached getting a brief from my teammates,
and how I get started working on it.
(upbeat theme music)
So, this project that I wanna show you today
is a learning page and a sign up page
for our free migration service.
So, we offer to move anyone
who is coming over to Convertkit,
we'll move you over from the previous
email marketing software provider for free.
So, this is a page that needs to tell people about that
and about how this process works, show them their options
for what type of migrations we'll give them,
and allow them to sign up for it as well.
This is the current page and it's a part of our site
that hasn't really had any design attention before,
so that means there's a whole lot of potential here for me.
As you can see, it's kind of just a big block of text.
It is all useful information,
it's telling you about what to expect,
how the process works, and then there's this form here
that allows people to express their interest in it.
This project came about, not only because,
obviously this page is one that could use some design help,
but also because the migrations team
want to change the process a little bit.
Whereas previously people would fill out this form
and submit their interest.
And then the team would send them a link to this form here,
which is much longer, much more detailed,
where they'd give them basically everything
that the migrations team would need to know
in order to get the migration done.
Wow, how many times am I gonna say migration in this video?
This form is really long,
and there's a lot of text and stuff going on with it,
and then we've had feedback from people that it's confusing,
it's like difficult to fill out, it takes a lot effort.
The migrations team really just asked me
to change out this form part
and work on maybe some styling in this form
to make it a better experience to read
and a bit easier to understand.
But I think that there's a lot of potential here
to properly market our migration service.
It's a great feature,
it's not one that our competitors offer across the board,
so we can stand out with this and it could be a reason
for people to sign up and choose us.
So, I wanna put my efforts
into designing a marketing learning page for it,
as well as making the forms and everything
a good experience.
So, where do I get started with all this?
The first thing that I do is talk to the team
who are requesting this design from me,
kind of like my internal client, and I listen to them.
I hear what they want, what ideas they have.
And actually one of the people on the team, Morgan,
who'd put together this wire frame
to show what she was thinking for it.
Thinking of the idea of that maybe people
would submit their information saying
how many subscribers they had, who they're moving over from,
and based on that, we'd show them what the options were.
So, that way, we're not bombarding people
with all these different options
if someone don't apply to them,
they're only gonna see the ones that are available to them.
Makes sense? That then someone would click this card
and fill out the relevant form that applies
to whichever type of migration they're choosing.
So, once I'd had a few conversations with them,
and felt like I was understanding
what they needed from this and where some of the potential
like huge impact we can make with this was,
I got started, as I do with every project,
on my iPad, with my Apple pencil in the app Concepts,
and I drew this wonderful picture.
Um, yeah. Right about now is probably when a lot of you
are wondering how on earth I'm a full time designer,
but yeah, you can be a designer and you can draw like this.
This stage of wire framing is really just for me.
I'm not showing these to anyone else,
I'm not expecting anyone else to understand them.
They're just for me to get my ideas out,
and I process my ideas clearest when I can see them.
So, that's what I'm doing here
is just doing some rough sketches
of some vague ideas I have for ways we could arrange things.
Right about here is where I started thinking,
perhaps it should be a marketing learning page
and adding like a testimonial quote
and maybe some easily scannable checklist of some benefits,
that sort of thing.
I also started to think about some of the challenges
and how I'd address them.
Things like, what if someone doesn't want
to use our service to migrate over,
what if they just are looking for information
about how to move themselves over,
and they happen to end up on this page.
So, I'm thinking, okay, maybe that could be in the FAQs,
because it's not the main point of the page,
but I do want there to be a link available somewhere
to information for someone about how to switch themselves.
I also started thinking about that giant wall of text
on the current page where most of it
is explaining exactly what we migrate to do with forms,
exactly what we migrate to do with sequences,
and all of that, so I thought maybe we could have
kind of like a little tool tip
next to the thing where it says "We'll migrate 30 forms,"
and there's a tool tip that'll tell you
exactly what that entails.
Here I thought that maybe we should have a diagram,
I've seen this work well on other pages on our site.
I do a bunch of user tests and research,
I talk about this in my previous vlog actually,
link on the screen if you wanna go watch that.
But in those tests, I've seen people really stop
and take in this diagram that we have
on one of the other pages on our site.
So, I thought maybe this would be a good chance
to put this in here.
I briefly thought through a couple of different ideas
for the page itself,
maybe an illustration, maybe we lead with a quote.
I also started thinking through the form
and ways that I could arrange
that overwhelming number of forms fields and information,
maybe into sections with little check boxes
when you've gone through them,
so that you feel a little sense of completion and progress
as you move through.
Normally, I would push the wire framing
a lot further honestly, but at this stage
because there were so many different parts to this project,
and so many eventual different pages
I'm gonna have to be making, I decided to go from here
and just straight into wire framing in Figma instead.
And I decided to record my screen as I did that,
so this is me basically taking those ideas
from those very rough sketches
and bringing them to life in Figma.
As you can see, this is much more understandable, right?
At this stage in wire framing,
I'm really not trying to make things look perfect.
Things do end up kind of looking half-designed
because I'm utilizing our design system.
I have done a video all about how I set up
this design system for our marketing site in Figma,
which again, I'll link on a card.
But, basically, I have all these type styles,
and I have these elements like buttons
and components like the checklist,
and the testimonial quote that I can just drag in
that I reuse all the time.
So, I make use of that when wire framing,
even though I kind of don't like
that it ends up looking like a half-designed thing.
At this stage, my design is really just about
the structure of the page and where I'm thinking
of putting the information, the hierarchy of it,
all of that sort of thing. It's not meant to be about
should this button be green or red, you know?
But sometimes I can't help myself
but make something the right color.
So, the first stage of wire framing on the iPad
really helps me think through
all of the content that I'm gonna have to fit into this page
and start thinking about possible ways to arrange it.
And then when I get on to the computer
and I'm doing it in Figma, that's when I focus more
on the details.
So, thinking about things like,
okay, should these things be laid out as four cards?
should it be a table?
Should the process diagram be horizontal?
Should it be vertical?
Those things I find much easier
to visualize and make decisions on
when I'm seeing them on the computer
versus a hand-drawn wire frame.
I thought I liked the cards better than the table,
so I dug in on them and tried to refine them.
I thought that perhaps there shouldn't be an icon
next to each one of these points with the tool tip.
That was kinda feeling a bit complicated and confusing,
adding additional noise
to this already quite busy part of the page.
And, obviously, a lot of what we do as designers
is try to make complex information seem simple
and easy to understand and I was adding in something
that was making that worse basically.
I tried a couple of different ways to lay out
the differences between the migrations.
I wanted it to be easy for people to scan them
and see what the differences are.
So, that's why the numbers are bolded,
and then I'm trying them kind of at the sides,
so they can just read down the list
and see what's different.
I added the crossed out ones
on the quick migration one as well,
because if someone has over 5,000 subscribers,
we really do wanna encourage them
to do one of the more involved migrations.
It gets more of their stuff over,
makes the product more useful for them.
So, I just thought that adding those in
made the quick migration just a little bit less desirable,
it showed you what you weren't getting, if that makes sense.
At about this stage in the process
is where I start to look outwards for my inspiration.
Up until now, I've been trying to just think of my own ideas
and think through the information that we have
and see how I think best to lay it out.
But, I always do reach a point where I wanna start
bringing in some inspiration from outside.
So, I look on Dribble for how other people have handled
like, I don't know,
a pressing table showing different plans,
different options, different forms
that people have designed.
That inspires me and I get ideas for it
of things that I should try out in my own design.
So, that's what I got to on the first
like wire framing session I did.
The next day, I came back, and I did another session.
I spend most of my time focusing on the cards
and dealing with that information.
As you can probably see, when you look through
these different iterations of my design,
I haven't iterated at all in the FAQs,
or this bottom section yet.
I like to just focus on one challenge at a time
and I don't force myself
to redesign the whole page for every iteration.
There's things that I'll tackle later.
And I always like to deal with
the most complicated parts first in the wire frame.
Then I thought, okay, I really didn't push this very far,
this initial step of the thing that someone submits
in order for us to know what options to display them.
So, that's what I started working on next.
I thought it could be fun if it was like a sentence
someone filled out instead of just form fields
stacked on top of each other,
because this is still a form, you know?
A form doesn't have to look form-y
in order for it to be a form.
Here's the fun part too where I started thinking through,
different cases. So, I'm like,
okay, what if someone scrolls to the bottom of the page
and they haven't filled this out yet.
Maybe we can show them a little box,
encouraging them to, you know, make sure they do that.
And then I thought, well, if this is the main thing
we want people to do on a page,
why not when you scroll to the bottom,
and you haven't used the form yet,
just showing the whole freaking form again,
really encourage them to do this to see their options.
And then once they fill it out,
that's when we change out this bottom call to action here
to be about signing up or requesting a demo if,
kind of as a secondary CTA if they haven't,
if we haven't convinced them yet
to get started with the migration.
This is where I've got on to actually,
so far with the learning page.
Starting off, there'll be a header of some sort,
I'm not sure if I want an illustration up there
or not at the moment.
A diagram, the form, a quote, FAQs.
And then, once they've filled out the form
and they're seeing their options displayed,
I've added some little benefit check marks here
to further try and convince them.
A quote, of course, stays there.
So do the FAQs. This swaps out.
And if they have less than 5,000 subscribers to bring over,
if they're not eligible for our more involved migrations,
then we'll just show them this one.
And you can see that
I haven't left these crossed out options on this card
when we're only showing them this card,
'cause I don't think it's fair to make them feel
like they're missing out on something,
when this is the only option that's available to them
at this stage.
I also added these little free icon things.
I just think even though none of them cost,
I think it's nice to be reminded that,
hey, this is an absolutely free service.
And just because we say it in the heading
doesn't mean that people will understand or see that
or realize it when they're seeing
all the things they're getting, you know?
So, why not repeat it?
So, then I started moving on to laying out the forms.
This one is for the quick migration.
I did a few different options, trying to think,
should I split it up into two sections?
Should I, like, give it some sort of progress?
Have it on the right when you're seeing a quote on the left.
It could encourage you to keep going
and filling it out if you're seeing that someone else,
had a really good experience with it, you know?
But, in the end, I think that I decided this one here
is probably gonna be best.
It's a fairly short form,
so it's all right to be on one page.
I don't know how exactly to do this yet,
but I will work with my developer, Cory,
on making this happen.
But I wanted to bring over information
that they submitted previously on this page as well.
So, when they're on this page,
we know how many subscribers they have
and who they're migrating from.
So, I want those fields to be pre-populated
when they come to this page.
I think that'll just make it a nicer experience.
But that meant I also had to think about
what if someone just comes to this page directly,
maybe through search, or someone sent them a link to it,
they found a link somewhere else on a site, I don't know.
I needed to think about that option as well?
So, that's what this one here was. No fields filled out.
And also this little block here that shows them
that if they have over 5,000 subscribers,
we can basically give them a better service,
and linking to that. I'm still not 100% sold on this,
but the idea is there for now anyway.
And then laying out our longer form.
For this, I decided to have this little like bar at the top
that we will fill in with a little tick probably as you go.
And I like this idea of having information on the left
and fields on the right.
I think it's easier to understand what section you're in,
and also splitting it up like this does make you feel
like you're progressing as you go through.
This is the idea that I had drawn up.
So, it went from this to this. Go figure.
I think this would make for a better experience
as people are filling out the form,
and that we're also gonna use this,
'save and continue later' option for them too.
So, if they're feeling like,
"Oh my God, I've been figuring out all these things,
I just want to take a break."
They can do that without worrying they're gonna lose
all the information that they've submitted.
Somewhere down here, oh yeah.
I also have our confirmation page as well.
I took the header and the footer off the form pages
'cause I didn't want people
to get distracted, I suppose,
and go looking at other places on our site.
I want them to stay focused and finish the form,
but back here when they've reached confirmation page,
now we want them to stick around our site, right?
So yeah, giving them some options, I suppose.
By this point, after all these iterations and options,
I felt like I was at a stage where I was ready for feedback.
I always make sure not to ask for feedback
and solicit that before I feel like
I've put my best ideas in place.
I'll ask for feedback when I feel like I've got something
and I wanna see what other people think about it,
get their thoughts,
or if I'm really struggling with something,
that's when I'll share and get feedback.
I don't wanna waste people's time asking for feedback
when there's stuff I already know I wanna do differently.
So, at this point I was ready,
I exported the screens and I put them in Envision,
which is my preferred way of gathering feedback.
I know I could do it within Figma,
but I just really liked doing it through here.
What I do in Envision is I do set up hotspots
on the buttons and things, people can click them,
and go through to different parts of the flow.
But what I also do, is if I turn on common mode here,
is I add these little tool points throughout the design.
And I encourage people to read these
when I share it.
When you share the Envision file with someone,
they like glow, so they are quite enticing to click on,
and this is where I explain my design basically.
So, I tend not to have a meeting and present my work,
because we work remotely
and we try to be asynchronous at ConvertKit.
Then this works well
as a way to give a tour through my designs
and to share my thoughts and explain parts
that perhaps don't look immediately obvious,
like this part here, explaining that this gray box
will in fact be an illustration.
Yeah, I went through all of these designs,
edit all these little tool points throughout
explaining various things,
and now is when I share them with my team for feedback.
From here, there'll be
two different ways the project could go.
If I've got everything right, if the flow is right,
the structure of information is right,
I haven't forgotten anything
or miss anything out that's really important,
I would probably move on to doing the visual design.
So, that's when I do start thinking about the colors,
and the exact shapes, and what type of illustration,
what kind of background would go on this part.
More of that part of the design.
But if there is something glaring that I've missed,
or I don't know, if people have feedback
that this isn't the right direction,
then I'll stay in this wire framing stage a little longer.
And like I said, this project is ongoing.
This is literally where I'm at with it right now,
so I don't know what's gonna happen next,
but I'm excited to share it with you
when that does come about.
I hope this was useful, or at the very least interesting,
to see how I get started at the beginning of a project,
see how I strategize in wire frame,
and think through things.
I would love to start sharing more of my work in this way,
so please do let me know if you enjoyed it
by leaving a comment, giving a thumbs up.
Tell me what you wanna see from me.
If you're a designer, I would also love to hear
how the beginning stages of your project process
compared to mine. Is it very different?
Is there a lot of things that are the same?
Let's have a chat about it down below in the comments.
All right. Thank you for watching everyone.
Have a good week and I will see you
in the next video. Bye.
(upbeat theme)