- Welcome to a new episode in
my personal website redesign series.
This is a series that's been going on since 2018,
and honestly, I feel like it's probably
never gonna be finished,
because I feel like my personal website is never finished,
but that's also kind of what I love about designing
for the web is that we always get a chance to iterate
and improve on our designs.
And that's exactly what I wanna do in today's video.
I'm gonna take a page on my site, this page here
to be exact, which has a page that I designed to sell copies
of my font Grayscale.
We're going to look at the conversion rate.
We're going to analyze the page performance and see where
we can make some improvements to it.
To help with this,
I'm gonna be using Hotjar, who are the sponsor
of today's video
to look at some heat maps and get an idea
of my user behavior on the site.
It's going to be fun.
So, let's get into it.
(Exciting instrumental music)
- Okay. First, let's take a look
at some numbers to get the lay of the land here.
So in the last month,
this page has had about 1,000 unique visits
which is pretty good, but I've only sold nine copies
of my font through it, which is definitely not good.
There was a lot of room for improvement here.
That's a conversion rate of like, less than 1%.
So there's plenty that needs to be worked on, but looking
at conversion rate data like this,
while it's great for figuring out where a problem is,
like looking at the pages on a site
that are underperforming,
the ones that are like, I'm not converting
at a rate compared to others,
it's great for figuring out
out where you should be putting your attention
where the opportunity is, but it doesn't really
tell me what is going wrong on this page, right?
It doesn't tell me what I need to fix.
That is where things like heat maps, like recordings
of people using your site really come in handy.
They give you a much clearer idea
of how people are actually interacting
with it and what's really going on.
So I want to take a look at some of the data that I have
in Hotjar about this page's performance.
You can see here
I have generated a heat map of my Fall Sales Page,
and then if you haven't heard of Hotjar before
it's a tool that you add to your site
just like you would any other analytics tool
like Google Analytics, for example,
but it gives you a way to
analyze your user's behavior visually.
I find it gives an extra layer of understanding
that as a visual person being a designer, I just don't get
from looking purely at the numbers, the data itself
and at the company I work for, ConvertKit, we use it
on our marketing sites being super useful,
and I don't know why I never considered using it
on my personal side until now,
because it's been fascinating to look at these heat maps.
Hopefully, it's pretty clear from looking at this.
I mean, the, the click heat map right now
that you can see all the spaces
that people have clicked when they're on my site.
The more clicks, the like, you know, brighter color.
You can see where their mouse moved around
on the site as well,
where they scrolled to.
Super interesting. Looking at my scroll data,
actually, this is really encouraging, I guess
to see that 75-ish percent of people
on the page actually scroll to reach the "Buy Now" button.
That was my first concern, when I saw how low
the conversion rate was of my page,
I was like, okay, well maybe people
aren't even making it to the "Buy Now" button.
You know, I've got quite a big header at the top here, so,
that's encouraging.
That tells me that that's probably not the problem.
at least on desktop.
Let's go back to clicks.
So there's a lot of people clicking on the menu,
which makes sense.
I can see some people here clicking
on the name of the font itself.
This isn't actually clickable,
and maybe they're trying to highlight the text
which won't work because it's actually an image,
so it would be something you'd need to change.
I need to get the web font actually
on my site to better promote it.
I can see people clicking on these images here
which is good because they are like a light box,
when you click on them.
If I go over to the actual page and show you,
it opens up the image large that you can see it clearer,
so that's good.
That's working as intended.
What else?
I can see people are flicking back and forth
between standard and extended.
So they're checking out the difference in price
between my two licensing options,
or I also see this interesting though,
is people clicking on the standard license
or for personal use.
Maybe they're trying to get an idea of what that includes
and that's not actually a clickable, so maybe
I should make it clickable up there so that I'm
giving them that information.
What about mobile?
Let's see what's happening on the mobile version
of this page.
So again, we have a lot of clicks on the menu and a lot more
on the "Buy Now" button, it says.
So what this "Buy Now" button does is actually
scrolls you down to this point here where you're
picking your license.
I want to see the scroll data here.
Interesting. Okay,
so unlike on desktop where 75% of people were making it
to the Buy Now button,
we've got only about 48%
of people are getting there on mobile.
So that is an opportunity that tells me that maybe
I need to bring this button further up the top somehow,
so that more people actually reach that point
on the page.
Going back to the tap view.
This is interesting,
people are clicking on this little flag.
I don't know what to call this.
It's a little note that I made to say, like
this is a bonus item, but clearly
because of the way that I've designed it
it looks like a button and people are clicking on it.
So maybe I need to change that
so that it's not like a bad user experience for people.
Again, we have a lot of clicks back
and forth on the standard and extended license, but yeah
this bit up here with so many people clicking on
the "Buy Now" button tells me that
maybe that's the thing I need to fix.
Maybe I need to just literally allow people to click
to buy the font right away at the top of the page.
I mean, if they're interested in it,
why put an extra step in there?
You know, like I have right now.
Let me just show you that in action.
So you know what I'm talking about there.
So you click it and it brings you down to the section.
If people are ready to buy
and they want to click that "Buy Now",
then I should just allow them to do that, right?
Okay, so that's already given me some ideas.
Now let's check out the recordings,
and I only want to see recordings.
I'm going to go to visit a URL where someone
has visited the shop page.
This is a part of, like,
analyzing your work site performance.
It gets really cool
because you can actually see
what people are clicking on
and how they're navigating around your site.
A few things to note here:
One is that with these recordings,
all the data is anonymized,
so it's not connected to someone's email address
or, you would think any other personal data on my site.
And then the other thing is, that any numbers
and personally identifiable information is starred out,
that's why you saw there
that the price has an asterisk instead
of the actual number.
I'm going to go through and watch a few of these
and see what I can learn from it,
so let me go back to my list.
Probably won't watch all 221
but we'll go through a couple
and I'll pull out some trends to tell you about.
(relaxing instrumental music)
Okay, I've watched a bunch of recordings.
Man, it's always so fascinating to see people interact with
the site you've designed.
A couple of things
I want to point out about watching the recordings is
as you can see down the bottom here,
it marks when there's some sort of activity
like a click or a scroll on the page.
So I don't have to watch all this bit here
of blank where there's nothing happening.
I can just jump ahead to this point
where they start scrolling,
and I'm also watching things on 2X speed.
So it makes it much faster as well.
As you can see,
we've got like, the little movement
of where the mouse is going on the page.
So it's kind of like seeing the,
that heat map data but in real time.
Couple of main things I noticed,
people were doing on this page.
One, was a lot of people would go to the about page next,
so that makes me think maybe I needed to add
like a little thing about myself onto this page,
like about the font designer or something,
I dunno, to give people that information
right here to avoid them leaving the page and then like,
you know, forgetting to come back.
I saw a lot of people sort of like,
idly scroll down and then back up again,
sort of like doing this action
that makes me think there was nothing that
really, like, hooked them.
It made me realize that I don't really have a strong
like, selling point on this page, right?
It's just sort of like telling you about the font.
So I think that I could do better there
with some sort of like, a hook.
I also think that I could put this licensing information
which right now, it opens in a separate tab.
That might be better served
if it opened in a modal on the page itself.
I think honestly, I had it on a separate page
because it was easier for me to build at the time.
So yeah, that's my fault. Lesson learned.
I should probably put that
in a modal to keep people here on the sales page.
I also noticed people on this page,
like, several people opening the menu and clicking Store,
and then, sort of like, clicking Store again when they ended
up back on this page.
And then they realized that that's bad UX
because I don't have a full story yet.
I had this in my menu intending on having more products
but right now, it's just my font.
So, I should probably be clearer about that in the menu,
so that people aren't sort of like, you know, clicking
trying to get to a page, not realizing, no, no,
this is the store, you're on it.
But yeah, super interesting to see
and interesting to see how little time
people spend on the page, as well,
like I said, a lot of people do a quick scroll
so I really need to, like, hook their attention a lot better
than I am doing now for sure.
Alright,
I think I have my plan of what I want to iterate on now,
so now let's jump over into web flow and I'm gonna
make some changes and I'll explain what I'm changing
as I go about doing it.
Alright, the first thing I want to change, I think I
mentioned before, is this Buy Now button in the header.
Instead, I'm going to have two buttons: purchase
standard license, $12 purchase extended license,
$26 in the header
so people can, like, jump straight in
and buy immediately if that's what they're interested in.
(bubbly and calm instrumental music)
Okay, so we've got that up there now,
and this will link
to just directly buying each license type.
The next bit that I want to tackle is specifically
on mobile.
Remember how only 48% of people were reaching this Buy Now
button on mobile?
Obviously, part of this might be fixed by having the buttons
in the header space now, but I do want to
make this a little bit easier to scroll through.
So what my plan is, is instead of having this, this is
like a tab system down here.
See where you swap between standard and extended?
Instead of having it all the way down here, I'm sort
of gonna combine with this stuff.
So you'll click standard and then you'll see the information
and then you'll click extended and you'll
see the extended license information,
so it just brings that interactive element up higher.
That's the goal anyways is to see how that helps.
We'll, we'll see.
I think it'll be better on mobile to click between, so
let's try that.
(bubbly and calm instrumental music)
- Okay. So what I've done here is that everything
looks the same on desktop and on tablet too, actually.
But on mobile, I've done a hide-show thing.
So I've, I've hidden these top blocks,
and instead on mobile,
we display that sort of card
within this tab system.
So, we see you standard and extended and we can swap
between there instead,
so people can repair by tapping back and forth
which I think it'd be a good experience and they
can buy right from in here.
Next stop, the other thing I said I wanted to tackle was
putting the licensing information in a modal so
that we keep people on the page.
So let's do that.
(upbeat lo-fi hip-hop)
- Okay. That was difficult,
but I think I've got it in place.
That's going to View mode and see.
So now when you click on "See Licensing Information",
it just shows up here right on the page
so that you can view it in line
rather than having to go off to a separate tab
to see it.
So, I think that that's going to be better.
Let's add in a "Learn More" link in here
as well, that we'll also open up.
(Music continues)
Then we'll do it over here as well.
Just because, remember, there was people clicking
on these areas looking to, yeah, learn more.
So, might as well make that an option for them.
(Music continues)
Cool, and then the last big change
that I want to make is
leading rather than with the name of the font
with like a hook, like a reason why you would use it.
And the main way that I've seen people using
my font has been to annotate designs.
So I'm going to try make a different header
section now that I think will help to explain the value
of the font better.
Let's try it.
(ambient instrumental music)
Okay. So this change ended up
changing the look of my head at section a lot, obviously.
There's a couple of things I've done here.
One, is add in my font as a web font.
So now when people are clicking on this area,
they're actually able to like, highlight the text
and see that, yes, this is a real font really in use.
I've gone with this "Annotate Your Designs With"
as a sort of pre header, so that it's
telling you, like,
what a use case could be for the product.
And then, obviously, I've got this image in here
which sort of shows some annotations.
Sort of, like, how you could use the design.
I also changed up some of the copy here
because I think one of the benefits of it
is that it's really legible, but it still looks handwritten.
You know a lot
of handwriting fonts are like, I don't know, hard to read.
This one is still really legible
but definitely still looks handwritten.
And then on mobile, I swapped
out the image for a mobile image,
so that, yeah, you're seeing an example more
in keeping with the platform that you're on.
Still not totally sure about these buttons on mobile
but we're gonna, we're gonna test this.
We're gonna ship this and see what happens.
I really did love the blue
and purple header that I used to have.
So I think I might continue to work on this
over time and find a way to get the design on there, as well
as the image,
but I didn't want it to be too, like, overwhelming,
and I thought, you know, clearly the old page with its less
than 1% conversion rate was not working properly.
So, it's might be time for a drastic change like this.
You know, we're going to test it
out and see.
Let's hit publish right now
and get this thing out in the wild.
I'm really looking forward to checking in on this
in a few weeks in Hotjar and seeing if I notice any changes
in the heat maps and the recordings
of what people are doing.
See if I've fixed those issues.
Obviously hoping more fun sales come through as well.
Something else I might turn on
in Hotjar, they have this survey option.
Let me just show you what this is doing.
So basically, it's a little pop-up
but it'll come, you know,
just like this at the bottom of the page,
and I've set it to ask this question:
"Is there anything holding you back
from purchasing the Grayscale?"
It'll give people a chance to tell me like:
"Oh I wish that I could see this" or whatever.
And I've have it set to only show on the shop page
and to only show when a user is about to abandon the page,
so it was not going to interrupt them,
it's just going to show up
if they're about to leave,
this will, like, catch them, hopefully
and give them a chance to give me some feedback, so yeah.
We can turn that on and see how it goes.
Hope you found this interesting,
not only to see what changes I make to a page to try
and improve the conversion rate, but also
to see how I've been investigating it all using Hotjar.
Maybe you got you interested to try it out for yourself.
Hotjar has a bunch of plans.
There's a business one that I believe we're on it.
Convert kit.
It's going to be perfect for if you got ideas for
from this for things you'd like to change
on a site that you work on for your job,
but they also have his personal plan.
The basic one is free, which is great,
because it means you can install it
on your personal website.
You could investigate the user behavior happening there.
Maybe if you sell a product like I do, or a service
it can help you improve the conversion rate.
Or maybe if you're just applying
for jobs that you want to check
on the user experience of your portfolio,
that could be interesting too.
You should try it out.
It's super easy to get set up
and like I said, if you worked for a company,
I hope that this gave you some ideas of how
useful all this data could be to help you improve your work.
So, yeah.
Huge thank you to Hotjar for sponsoring this video,
looking forward to seeing how this page performs
and what comes of these changes that I've made.
And if you're interested
in hearing more about that, please subscribe.
I'll likely report back in a future blog
or a future video about it.
Coming up next in this website redesign series,
I think I'm going to explore workflow interactions more.
You saw me play a little bit
with them today for making that modal
but I've been exploring them a lot recently
for a site I've been working on for my job,
and it's made me want to involve a lot more
on my personal site.
So stay tuned.
We'll play with that in a future episode.
Thanks for being here.
Thanks for watching. Have a good week
and I'll see you next time.
Bye!
(upbeat instrumental music)