In my last post, I took you back in time and shared the history of themes and design updates for The Smart Passive Income Blog. It wasn’t pretty and I did take a few steps backwards here and there, but it demonstrates that you don’t need a perfectly designed website to make amazing things happen – you just need to get started.
You can work towards improving your website over time.
Recently, the 7th major design iteration of The Smart Passive Income Blog went live and the feedback from the community has been nothing but incredible!
In this post, you’ll get the detailed run-down about why it looks the way it does, and the big lessons I learned along the way. The site still isn’t perfect (and I don’t believe there is such a thing as a perfect website – every website can be improved), but it’s doing what it needs to do now more than ever, and the numbers are proving it too.
Lots of lessons and details here, so let’s get started…
Chasing the Purpose
Plans for this redesign started in December of 2012 – exactly one year ago.
Around this time, Corbett Barr went live when an incredible, eye-catching redesign for ThinkTraffic.net (which recently turned into The Sparkline at Fizzle.co) thanks to the help of designer extraordinaire, Chase Reeves.
I reached out to Corbett to compliment his new design and we started talking about a potential design update for SPI for 2013. The site hadn’t been updated for years and it became this Frankenstein concoction of things that I liked over time, which was completely unorganized and disconnected, and it was leaving new visitors overwhelmed and confused.
After a few more minutes of conversation, I ended up inviting both Corbett Barr and Chase Reeves to San Diego to help me talk through and hash-out the new design for Smart Passive Income. In exchange, I would do a founder’s story and a course module for Fizzle.co, which I happily agreed to do (and I would have done for them anyway).
Soon enough, we were all in Downtown San Diego renting a conference room at a co-working space and eating California Burritos until our heart’s content.
The design process, however, was frustrating.
Going into our brainstorming sessions, I envisioned a whiteboard full of grids and website design elements: boxes, shapes, squiggly lines where text should be – but it was far from that.
It all started when Chase went up to the white board and drew this:
As he was drawing this, I thought he was going to say something like:
“Pat, this is what the design process looks like. It’s not linear at all. It takes some back and forth but eventually we’ll hone in on a design that works for SPI.”
But instead, he said this:
“We need to figure out the purpose of Smart Passive Income. It’s unclear. It goes in all of these different directions and we have to get it HERE…focused. It’ll take some discussion, but before we figure out what it’s going to look like, we have to center in on its why. Let’s bring it here.”
Some incredibly hard questions were asked (similar to the 24 questions found on this post) and hours were spent discussing various topics ranging from target audience to unique advantages and even the legacy I wanted to leave.
By the end of two exhausting days in San Diego with the guys, no boxes or wireframes or squiggly lines were drawn, but the major breakthrough came on day 2 in the form of a phrase:
Let’s see what works.
This phrase, which you can see in massive, giant letters on the homepage, is exactly what this brand is about. It represents the honesty and transparency that I’ve been known for since the site started, it represents the idea of being open about the process of building an online business through case studies and experimentation, it represents the idea that sometimes things won’t always work out, and most importantly, it represents all of us doing it together.
Let’s see what works.
It was perfect.
Even though the design of the site wasn’t even discussed, and it was 2 days of deep thought and brand dissection, I knew it was worth it. It really helped me center in on the focus of what the brand was about, and where I was going to take it.
Wax On. Wax Off.
After the major breakthrough in San Diego, I was eager to get into a wireframe. I just wanted to see what it would look like already!
Patience Pat-San, patience.
We were far from that point.
Chase is an incredible designer, and it’s probably because he’s incredibly meticulous. The look of the website, he promised, would come as a result of other design decisions that we would be making over time.
The first one being the color scheme.
Through Basecamp, where we were managing this project and sharing all files and discussion, Chase sent me 7 or 8 design tiles with various color combinations, but I ended up sticking with something similar to what I had before: a red, green, black and white theme.
My only comment: Just make sure it doesn’t look too Christmas-y.
Then, we got into typography, which I learned was going to have a major impact on the spacing of many other elements of the site.
I could see how all of this was coming together now.
Here are a few of the Headline + Body combinations Chase created for me:
Looking at the examples above, you can really get an idea about how much the font on a website can change the feel of it.
(By the way – TypeCast.com is an awesome tool!)
I liked the one from the last sample above the most. The headline font is Proxima Nova Condensed, and it seemed very clean, clear and friendly. The body font has changed over time, but I believe that the site is currently displaying Helvetica Neue.
After that, a wireframe for spacing purposes was created, and it was created almost mathematically, so I’m told. This was way over my head as far as how it all came together, but there are certain ratios that look and feel good on the web, and Chase designed with those ratios in mind.
It’s an if this, than that type of thing.
For example (and this is another cool tool that you might want to use or share with your designer) check out the Golden Ratio Typography Tool by Chris Pearson, creator of the Thesis Theme. Insert your font size and content width, and it will calculate the perfect line-height for your page based off of a website’s golden ratio.
Crazy stuff.
After the spacing was locked in, Chase asked me about what elements I wanted to include on the homepage and sidebar. The motivating factor behind the redesign was to clean it up and be more purposeful with what readers do on what pages. To keep it simple.
By this time, it was mid-March of 2013, and we both had other projects to focus on at the time, so the redesign was set aside for a couple of months.
The First Design
Fast forward to May and Chase and I were finally able to revisit the project and get things rolling again. He suggested that we be in the same place for a couple of days to just focus entirely on the redesign and take advantage of quick communication.
Chase ended up flying back to San Diego and stayed at my house for a couple of days, which was a blast. Not only did we get a lot of work done, but my kids totally fell in love with him.
Eventually, he created (in Photoshop), the first iteration of the design that you see on the site now. Note that this wasn’t the version that went live in November – this is just the first look at what Chase created in Photoshop. The first stage, if you will:
The homepage was no longer setup to share my latest 10 posts, it was designed to be a landing page that was purposeful and showcased only the most important items.
Our focus phrase, Let’s See What Works is big, clear and right there at the top. When Chase first showed it to me, I thought it took up too much space, but after some thought and conversation with Chase, I was convinced. This is what the site is about. Now you can’t miss it.
Underneath the headline were more specific topics that the site was about, and below that, a picture and some copy to lead people into a button that drives traffic to my getting started page.
The “crash test dummy” copy was actually just placeholder copy that Chase put in, but I kept it that way even through the launch because it seemed to be a unique, memorable way to share what I do.
We added some social proof to the homepage by sharing popular sites where the site has been featured before, and then links only to the latest post, and the most popular posts.
Below that, some bigger, more graphical links to featured elements, like the resource page, my book Let Go, and the Podcast.
The navigation menu was also cleaned up big time, only linking to the About Page, the Resources Page and the Getting Started Page. Although there are a lot more items on the blog to find, I didn’t want to overwhelm the readers with too many choices (which was a complaint in the previous design), and I had planned to better utilize the Resource Page and Getting Started Page to eventually get people to where they needed to go anyway.
Simpler and more purposeful – that was the idea, and this seemed to do the trick.
Now, let’s take a look at the first iteration of a blog post page:
A few things to mention on the blog post page.
In the sidebar, the About Pat name tag got a much needed upgrade. For the longest time, it was me and my son when he was just a few months old. He’s grown up a bit since.
It’s also a little tilted and “peels” off the page a bit – thanks to some clever shadowing – and it’s a lot cleaner looking too while still giving off the same vibe. It was important for me to keep this element on the page at the top of the sidebar because it does a good job of showcasing who I am and what the site is about for new visitors who first land on a blog post, instead of the homepage.
Below the name tag are bold graphical links to, again, extremely important elements on the site, including the Start Here Page, The Resource Page, The Greatest Hits Page and My Income Reports Page. Then links to popular posts, and finally some more interesting graphical elements that link to my podcast, and my book.
Opt-in Forms
At the bottom of the post, you’ll notice an opt-in form to subscribe to my email list. This is the only place on the design you’ve seen an opt-in form thus far, and besides being on a few strategic pages – the About Page and the Getting Started Page – that’s it.
There are no email opt-in forms on the homepage, and none in the sidebar either.
This is something I wanted to test. Could I capture more emails by simply having an opt-in form at the end of my content (which I already had), but focusing on getting people to read my content first – and then subscribe?
My ideal subscriber would be one who would have enjoyed reading my content, and wanted more, hence only showing the opt-in form after my posts. This would also clean up the homepage and sidebar of the site to make room for other things. That was the idea, and it was put into place knowing that it was going to be tested over time.
Responsive
Another big focus was making sure that the site would be mobile responsive and look nice and be navigable no matter what device it was on. The design for smaller devices was not done in Photoshop, although I’m sure Chase was thinking about how the site might “collapse” as the screen got smaller during the design process.
A few minor tweaks to the design were made and then we decided to green light the design and take it through to the next step, which was to code it in HTML so that I could then hand the files to a developer to complete the theme, hash-out some of the specialty pages and then go live with it on SPI.
On June 17th, Chase finished coding the design (and he made it mobile responsive too to make sure the developer knew the ‘rules’ that Chase wanted for its responsiveness), and it was at that point that Chase’s job on the redesign was complete.
Although the site has been updated quite a bit since that initial Photoshopped iteration, as you can see, the design you see now would have never happened without Chase and his amazing talent. Chase – if you’re reading this, you are awesome, and I think I love you almost as much as my son does.
Again, for everyone reading this – that’s Mr. Chase Reeves over at Fizzle.co. You can say hi to him on Twitter here.
Put on the Shelf
With Breakthrough Blogging launching on July 1st, followed by work on FoodTruckr.com for Niche Site Duel 2.0, the implementation of the code for the new SPI redesign was not going to happen anytime soon (especially because I was using my developer for each of these 3 projects), so it was put onto the shelf until October, when we decided to stop letting it sit there, and finally get it up on the site.
After a month, on November 7th, the site finally went live.
SPI Redesign Version 1.0
I waited to do the “grand announcement” of the latest redesign because I knew there would be some immediate changes that were going to be made, and within the first 24 hours we had made about 10 different changes to the site:
The font for the body was darkened because it was too gray and hard to read.
Links were not obvious within the content, so they were changed to always be bolded
The cutout image of me on the homepage was converted to the actual image of me in my office, which matches my profile picture in several social media platforms.
Icons were added next to the large green graphical links in the sidebar.
The “Get Started Here” button on the homepage was enlarged – big time.
The comment bubble on blog post pages was brought back.
New images were added to the About Page.
A summary of the first post was added below the title on the homepage.
At this point, the reaction from the community – from emails I got and comments for those who were surprised to see a new design – was mixed. Some loved how big and bold it was, while others said it was too dramatic a change. Others enjoyed how much cleaner and navigable the site was, while others said it was much harder to find things.
Based on past redesigns that I’ve done, I knew it was important to listen to everyone’s opinion, but also that there will almost always be a completely mixed reaction – it’s impossible to please everyone – so I wasn’t going to react too quickly to community comments until I got some data.
On that day, the data that came in didn’t look too good:
Pageviews and visits go up or down each day, but 33%? It was obvious the redesign has something to do with it. Furthermore, look what happened to the data from my podcast:
That’s not good, and the drop in podcast downloads really surprised me, because I thought that most people who listened to the show did so from their mobile devices – not here on my website. Boy – was I wrong.
You see, there’s a balance between how great a site looks and how well it functions. An amazing design is a balanced design between form and function, and I wasn’t quite there yet.
Here’s an overhead view of how I was running around my office when I saw this data:
After some digging, which included emailing a few dozen people in the SPI audience (thank you for those of you who responded with your honest input!), and going more into the data, it was made apparent that I cleaned up too much. Even though the page was more navigable and less cluttered, it also meant that I was hiding a lot of pages that people often clicked through to see, including the Income Reports Page and the Podcast Page.
Sharing was also not as intuitive as well (because it didn’t exist) and so including an easy way to share at the end of the post became a top priority too.
The solution that made sense was to put back the old navigation menu that included all of the important items, and even though it would add more options on the homepage, it was made apparent that cleaning up didn’t work out so well in this case.
Three major lessons here:
The importance of tracking. This is why you have to track, so you can understand exactly what’s going on and figure out how to respond when things like this happen. If I didn’t have analytics installed, or I didn’t check my stats (which you should do on a consistent basis – not every day – but definitely after a major change like a site redesign) I wouldn’t have known right away that there was an issue, and how to address it.
Along the same lines, know where your traffic goes. I wanted my traffic to go to my Start Here page or my Resource Page, which they continued to do, but I ignored the fact that one of my most visited pages was My Income Report Page, and I didn’t even know people listened to the podcast on the website.
If you have a podcast, optimize your website to make the listening experience on your website as smooth and easy as possible.
SPI Redesign Version 1.1
Chase’s design scheme was amazing – and it was my ignorance that led to specific design decisions (based on my requests – like to not include a full-width navigation menu) that were reflected in the terrible numbers after Day 1 – but after a couple of tweaks on the site (after realizing what was happening), it’s obvious that the design was just one step away from being awesome. The next iteration came out three days later on November 10th, and it seemed to change everything.
The “Old” Navigation Bar Came Back
The navigation bar on the old design:
The newly designed navigation bar:
Cleaner. Less options than before, but just the right ones. Podcast and Income Reports page is back in!
My worry is that it would clutter up the homepage, but it fits in really nicely thanks to Jonathan, my developer, who has a nice eye for these kinds of things too:
Since I knew people were listening to the podcast on the website, I decided to get rid of the list of popular posts on the homepage, and instead include a feature for the latest podcast episode. So on one side of the page, I’d have the latest blog post, and on the other, the latest podcast episode – side by side.
The podcast player and a featured image was included with the podcasting feature, to differentiate it from the blog post on it’s right.
Homepage Items Moved Around
I also switched up a few things on the homepage. Instead of having the “As Featured In” section right underneath the cover image and call to action, I put that at the very very bottom of the page, because it was less important, and I had other things on my site that I could use as proof.
Where those items were, we replaced them with Social Media icons, as well as a proof element:
Opt-in Forms Revisited
Conventional Internet Marketing wisdom says that the more steps required, the less likely someone is to complete an end goal that you want them to complete. This is true when it comes to shopping carts, typically, because if you have to fill out 100 fields before you can make a purchase, then you’re likely not to finish.
The same thought goes for collecting email addresses, but when Clay Collins from LeadPages was on SPI Podcast Session #78, he debunked this myth saying a two-step opt-in process was converting much higher than the traditional way people were collecting email addresses with a form field to complete up front.
So naturally, and especially since I’m an advisor for LeadPages, I wanted to put this to the test.
At the time, there was no quick way to create the two-step opt-in process, so I had Jonathan manually code this in. You’ll see at the bottom of every post, a call to action box and a button that looks like this:
When you click on that button, you’ll see a pop-up that looks like this:
Does this work?
Holy cow – yes it does!
Note: I’m testing different copy on this light-box pop-up so if you see different copy when you click, that’s why.
Even with removing the sidebar opt-in form, which was the form on my old design that collected the most email addresses, my opt-ins per day has increased by about 25%.
Unfortunately, Aweber only shows data for the previous 30 days so I don’t have a visual graph to go along with this data, but before the change, I was averaging between 90-110 subscribers per day.
When the new site launched (SPI Redesign 1.0), the numbers obviously went down because the traffic and view count went down. During those two days, I was getting 60-80 subscribers per day.
Now, I’m seeing an average of 130-150 subscribers per day, which is awesome!
Now, the opt-ins could be up simply because there is more traffic now (which I’ll show you in just a second), but the metric that really matters here is conversion rate.
When it comes to conversion rate, site-wide, the two-step opt-in process is converting new visitors at an average of 5%. What this means is that every day, out of all the new visitors who come to the site, the two-step opt-in process will convert 5% of them into subscribers. That’s 5 out of every 100 people.
With the old design, my site-wide conversion rate was less than 3%.
Unfortunately, the one thing I’d like to track is how many people click on the first button versus how many people fill out the form on the pop-up, but I don’t have that tracking element in place yet. I suspect the conversion rate is quite high though, because that’s why this process works so well. When people click on a button, they are already making a decision in their head to subscribe, and so they are likely to fill out the form.
This is as opposed to seeing an impression of a form on a page and still deciding whether or not to subscribe, or completely miss the form all together.
By removing the front facing name and email field, the page becomes more like a giving page, rather than an obvious taking page.
Instead of saying: “give me your email address” up front, you’re instead saying: “click here to get my free gift”.
I’ll be testing more of this very soon, and have since also added the two-step opt-in process on the footer of every page, including the home page as well, although most people are completing the forms on the individual post pages, which is pretty cool.
Fortunately for everyone, including myself, LeadPages just came out with their biggest update yet where they added a feature called LeadBoxes. This is included in the LeadPages software (so if you have it already, try it out – it’s in your account!), and it gives you this two-step opt-in capability.
This was a feature that was actually very heavily influenced by me pushing for them to create it, and I even got credit in their announcement video for it – woohoo!
Check out their announcement and demo video for LeadBoxes here.
What’s super crazy is that you can create regular html links that will generate the pop-up that you design…and you can post that link on other people’s sites when you’re guest posting (with their permission I would hope!) – but seriously, how awesome is that?
The Verdict After 1.1?
Much much better. Check out the stats after putting all of these elements into place:
Phew. And how about the podcasting numbers?
I went from record lows for months, to record highs – ever! Putting back the podcasting page, adding the podcast feature to the homepage and going back into every episode and making sure the players were working and the show note links were correct (not all of the players and show note links were correct) made a world of a difference.
WOW! What a roller coaster.
SPI Redesign 1.2
After successfully adjusting to the initial redesign, it was time to optimize. The site works now, but that doesn’t mean it can’t be better.
So where do we go for answers?
Data.
I installed CrazyEgg (which I should have done centuries ago) to see what people were clicking on and what they were not, and almost immediately I saw some interesting data that were going to be included in the next set of changes.
Here’s a heatmap so you can see what I see:
The colors you see in the image above represent where people are clicking the most. Red is super hot, blue means they are clicking but not quite as often.
What’s cool is that you can see just how often people visit the About Page and the Blog, but what was interesting to me is that people were clicking on those words below “Let’s See What Works”.
Those weren’t links.
So, that’s when we turned them into links. I had old resource pages for Blogging Tips and Affiliate Marketing that I could link to them, and the others I had to create from scratch. Here’s a list of their destinations in case you didn’t know they were links. It’s okay if you didn’t know they were links. It’s not okay if you thought they were links and then then didn’t lead anywhere:
Blogging Tips
Affiliate Marketing
Social Media
Podcasting
Lifestyle
The Best (Negative) Comment Ever
Someone sent me a “negative” email about my new design, which I will paraphrase below:
Pat, your new design looks pretty cool, but I don’t like the homepage. I hate your copy and how you call yourself a “crash test dummy” because if I was new and saw that, I’d be like, “Oh, so he tries some stuff, so what?” because there’s nothing else on the page that shows you know what you’re talking about. There’s this giant picture of you, but why should anyone listen to you?
Negative? Actually, this comment isn’t negative at all – it’s extremely helpful! Rarely to I react immediately to a comment like this and make changes right away, but this person was right. I called myself a dummy (on purpose), but there’s nothing to say “now pay attention ’cause this stuff is going to change your life”.
That’s where the idea for the following came from:
What is Pat working on?
I thought it would be cool to immediately showcase the sites and businesses I’m working on. This will help establish credibility, especially because when you look at all of the sites together, they are completely random. A food truck site, something about an exam, security guard stuff, a map thing and iPhone apps?
If I can pique someone’s curiosity here and immediately show them I’m more than just a blogger, but a business owner (and experimenter, which aligns with “Let’s See What Works” – then awesome!
Right below the image on the homepage, you’ll see this:
Hover over any one of them (on the homepage) and they change color to match the brand.
Are people clicking on these?
Let’s see…
Why yes! People seem to be enjoying these pages and feel that it’s a nice touch. They get a couple hundred page views each.
And this reminds me, I still haven’t finished the iPhone Apps page yet – like I said earlier, a site is always a work in progress!
The Earnings Counter
The other installation that came out of that email, which happens to be the most commented about feature on the new redesign, is the earnings counter!
It was just a random idea, but after installing it – most people see it as the cherry on top.
The point here isn’t to show-off my income. If I wanted to do that I’d post my yearly earnings, which I did for a day and immediately changed it back to monthly because showing over $700k didn’t look right – like it was WAY out there, even though those numbers are true.
The point of this is to highlight the most read articles of the month – my income reports – and give a quick, exciting and interesting way to get people into those posts and show that it’s more than just about the money – it’s about the lessons learned.
Do people click on the link?
Let’s see…
Yup! Red hot in fact.
You can see it reflected here in the traffic report when the counter was added on November 14th. This is traffic going specifically to the income reports page:
Overall, things were going well on the site.
SPI Redesign 1.3
After some more data mining, CrazyEgg told me something else that was interesting on the blog post pages, and actually any page that included a sidebar:
There was no activity in the sidebar whatsoever!
It had to be redone.
For one, my posts are typically incredibly long (like this one which has 4955 words at this point), so when people scroll down, which is what I want them to do, they miss all the goodies on the right hand side. This is good that they’re probably reading the post more than looking at the sidebar, but the sidebar is a great opportunity to add additional items for your readers to find.
My first step was to get rid of the 4 ads. Ads on your site that aren’t getting clicked on should disappear.
Second, those huge, big green boxes – they gotta go. The same same stuff can be found on the navigation menu anyway. Gone.
The popular posts widget should probably leave too, although I’m testing a new heatmap now that those other elements are gone to see if that does anything.
And lastly, to solve the issue of white space in the sidebar when people scroll through these longer articles, Jonathan created a sticky widgets, which you can see on the right hand side of this content if you’re reading this on the blog. If not, here’s what it looks like:
They fade into appearance once you get to them, as if to say, “hey, I’m here if you need me but keep going”, and then come down with you as you scroll down the page, so they’re there when you’re ready for them.
Three images for three different links, and then a 4th gray box to link to the previous post.
There may be room for more – for example – if you’re not on the last post on the blog there could be a box for the previous post and the next post, so it would essentially become a cool navigational tool, and I may rotate the 3 others (i.e. split test them) to see which ones are getting clicked on and used.
This feature was just released last week so I don’t have any good data as to whether or not these are getting clicked on because they are working, or just because people are trying them out since they are new.
Social Media Sharing Icons Updates
And the last feature to have been added was an updated set of social media sharing options – at the top of each post, and at the bottom.
Here’s what you’ll see at the top (unless your browser is less than 1200px wide, in which case these icons are hidden):
And when you get to the bottom, this is what it looks like (and again, depending on your browser size and device, they may be stacked differently since it’s responsive):
They look slick, and instead of a bunch of numbers for each, it’s one number that combines them all. I think this is more relevant and gets the social proof picture across better.
These social buttons are a custom job, unfortunately, but I’ll check with my developer to see if something like this is available as a plugin or elsewhere.
And Here We Are…
Data is continually being collected and minor changes will continue to be made, but you’ve seen the evolution of the latest iteration of The Smart Passive Income Blog, and I hope you enjoyed the journey.
Props to Chase Reeves and Jonathan for being amazing and helping the site get to this point, and thank you to all of you who have left valuable feedback, both positive and negative, along the way.
Before I go, I have to tell you something funny…
When I signed up with Crazy Egg and saw some of that immediate data coming in, I shared that and an image of the heatmap with my Facebook community.
An hour later I check my heatmap, only to see this:
All I can say is, I love the SPI community
Let me know what you think and if you have any questions in the comment section below. Cheers!
The Mega-Details Behind the New Design of The Smart Passive Income Blog is a post from: The Smart Passive Income Blog