by: Note: You can now purchase the theme designed by Chase that I discuss (my previous website design) on the StudioPress marketplace: SPI Pro Theme.
AskPat 303 Episode Transcript
Pat Flynn: What's up, everybody? Pat Flynn here. Welcome to Episode 303 of AskPat. Thank you so much for joining me today.
Awesome. Here's today's question from Chris.
Chris: Hi, Pat. This is Chris. I was wondering about your design, your website design. It's gorgeous. I was wondering how you had all these designs throughout all the years, and how did you come up with this one? What was the process like of creating it or working with someone? I would like to know a little bit more about that.
Pat Flynn: Chris, what's up? Thank you so much for the question today. I really appreciate it. Now the design of the Smart Passive Income Blog has gone through a lot of different iterations. I'm going to take you back in time. We're going to get into the DeLorean right now and go 88 miles per hour and head back into time in 2008. I'll go over the lifespan of SPI in terms of design and what the different features were. For those of you listening, obviously, this is a very visual thing to talk about. I'm going to go and do my best to see how we can do this for you and the things I've learned along the way and the things I was shooting for at each moment in time. There are a lot of iterations that I was looking back. I was like, “What was I thinking?” Here we go. Actually, if you do want to follow along, there's actually a post I wrote before the current design that you see now. If you're watching this in the future, maybe the design has changed even again.
Actually, if you go to Google and type “history of themes smart passive income,” we'll go way back to October 23 when the site started and man, the crazy design iterations that were here on the site. Look up “history of themes smart passive income” on the computer, if you're there. If you're obviously on your mobile device and are driving, don't stop for this. You can check it out later. October 23, 2008. I saw that a bunch of people who were doing online business at the time had this theme called Thesis. I'm actually on Thesis right now, but this is what I started with. I used the very bare bones minimum where all it was was the default theme. It had the Smart Passive Income Blog at the top. The tagline at the time was “Smart Ways to Live a Passive Income Lifestyle on the Internet with SmartPassiveIncome.com.” It had a little RSS subscribe button. Then at the bottom it says, “Hey, my name is Pat,” and all those things and a couple posts. It is the ugliest thing I've ever seen, the way it's set up. I actually tried to hack this myself and put different parts of it. The spacing is terrible. It's mostly white except the title is blue. There's no red or green like you see now.
Three days later I switched to a new theme that allowed me to take advantage of some of my PhotoShop skills. I actually PhotoShopped a logo that says the Smart Passive Income Blog where the “o” in blog is a light bulb. You'll see on the right-hand side that there's a subscribe via RSS thing. It says, “Subscribe via RSS or subscribe via email,” and there's a field there. I swiped that directly from ProBlogger.net because it's even the exact same colors that they had at the time and this little icon. I hacked my way into that. I didn't just copy all the code, but I created it and made it look like that. I remember specifically working on that little orange part of that subscribe area and taking a whole day to do that because, and I've mentioned this before, I wanted to do everything myself.
Looking back, I wasted so much time on the smallest things that didn't even matter at the time very much. There were several ways I could have done that, but I wanted it to look like Darren's at ProBlogger because he had a blog that was extremely popular, and he still does, obviously. He has 100,000 subscribers at the time. I was like, “Maybe if I put this I'll have 100,000 subscribers.” Of course not, but we all do that. We see what somebody else is doing and want to do the same thing. This is very much that way. This was a free theme that I got in the free themes repository in the backend at WordPress. You could see a little bit about what's going on there. Then what is this? A month or two later, November 3, 2008, that's when I had the first red and green design with the Smart Passive Income Blog logo with the little Post-It notes and the license plate looking thing. It didn't even look like a license plate at that time, but that's the introduction of “hello, my name is Pat.” The name tag that you see on the right-hand side which has stuck ever since. It's become something that I've been a little known for. Also, I have a backpack that matches that that people find me at conferences with.
This is where you start to see the red and green colors, like I said. A lot of the elements that you see now are pulled from this. This was actually a $200 or $175 design that was done on Elance.com that started everything. It was this guy named Michael. He was awesome. That was in November 3, 2008. June 9, 2009, six or seven months later, I had him design another theme that was based off of a lot of different feedback. Before I even tell you about this, there's some screenshots here on this blog post where I talk about the history of comments of people who are commenting about this new design, the one in June coming from the old one. Here's a comment from Glen Allsopp who you might have heard of before. He blogs over at ViperChill.com. He and I are good friends now, but here he was commenting on my site when I changed it to this new theme. He said, “Sorry, man, but the old design is much better. There's far too much text here in the sidebars. Everything looks crowded and squeezed together. Check out CopyBlogger to see how to make a three column design still feel simplistic.”
Looking at this design, it was completely cluttered. At the top I put a little 60 x 4 x 68px banner for an advertisement. It says, “Click here to get started the in-content ad leader.” Then on the right-hand side here in the sidebar I have my subscriber numbers. I'm actually looking at my subscriber numbers there. It says, “772,” I think is the number. Now it's well over 100,000. Going back in time, it's crazy actually to look at this. Under that I have four little blocks, each a different ad for something, one of them for a BlueHost, one of them for Internet Business Mastery, another for LegalZoom, another one for another thing that I never even used before. I was still in the very early, rookie stages of online business at this point. I was just trying as many ads as I could on the site. Even on the lower left-hand side here I can see there are some Google AdSense ads on Smart Passive Income. I remember specifically, the first thing I did was actually take those down. I actually called this six-month period, because it took six months before I redesigned it. I call it the dark days of SPI.
Then in October 2009 I connected with a company that helped me design GreenExamAcademy.com in a very, very professional, awesome looking way. There was this company called Blazer Six, Brady and Brody. Two brothers, Brady and Brody, who worked on that site for me. I hired them to really make Smart Passive Income look much, much better. They did a fantastic job. In January of 2010, when Ebooks the Smart Way came out for the first time, when I first started collecting emails, remember I talked about the mistakes I made. I didn't start collecting emails until this iteration. What was this? The third or fourth or fifth iteration. The “Hello, my name is” tag is still there. The content is still there, but it's much, much, much cleaner. Actually, you'll see that's where I start to put in this little gray bar under the navigation menu which I actually don't have any more.
I put that in there because I saw it being used on E-Junkie.com. It was an element that I saw them use. I was like, “That's awesome. It gives me a little thing at the top of the page that is a little message based on something I'm doing now.” I used to put fun facts there. Sometimes I would put promotions and stuff, but there was a sticky post at the top of the page. Usually it would be my income report or something below that bar. That's where more red and green things started to happen. I started to learn more about what worked and what didn't. I see a really nice looking opt-in thing here that has a really great picture of Ebooks the Smart Way and then some information and then a bright red button that says, “Free Instant Access.” I could see I'm learning, I'm learning.
Then in April 2011 I did a minor adjustment where not at the top was the monthly income reports from the previous month. Now it was this idea of the Getting Started page. That was really important and still is an extremely important thing. Actually, it's the most highlighted thing. That was weird. The most highlighted thing on the home page. If you go to the home page right now, Smart Passive Income, and I know this is going to be the case in the future as well. If you're listening to this in the future, it's going to be the same thing because it is so important. The most obvious call to action when you go to my home page is “click here to get started” or “don't know where to start, click here.” At least helping people who are at my page for the first time, guide them through the content that I have. It's not just the About page. It's the Getting Started page. That page is not only one of the most visited pages on the site, and that's probably because that's the clear call to action on the home page, but it is also one of the most profitable pages and also one of the biggest or highest converting page into my email list.
Then the design now, which I love, is completely different than how it was before. But it does pull a lot of the elements that worked like the picture of me introducing myself and then a blog post or a podcast you'll see that name tag, but the name tag isn't there on the home page. The home page is completely like a landing page where I want to show exactly in the first ten seconds who I am, what I'm about. To get to this point I had Corbett Barr and Chase Reeves from Fizzle.co, back then it was called, I think, Traffic.net. I flew them over to San Diego, and we locked ourselves in a conference room and tried to figure out okay, Pat has been doing this blogging thing for a while. Let's put this altogether. What is Smart Passive Income all about? It literally took us six hours of talking and brainstorming and chatting about what SPI was about and who it was for and what it was doing to come with this.
We didn't even have a design in our heads, but we knew the design was going to be about and what it was showcasing. That's where the whole idea of let's see what works comes into play. That's why that's the biggest text that you'll see on the internet here because it's right up there on the front. Let's see what works because I realized that it was the fact that I did these things that I talked about. I didn't just talk about what worked. I did things to see if it worked or not. It didn't always work, and I knew people loved what I talked about because I was always transparent and authentic about it, but that phrase worked so well, “let's see what works.” The entire theme that Chase created and coded the first go around was completely done based off of that, “let's see what works,” so okay, what goes with that?
First, who's showing me “let's see what works?” That's why there's a giant picture of my face and an introduction. Then it showcases all the things I'm up to. You can click on FoodTruckr, or you can click on Security Guard Training. These are the things that are working. Let's see what works, here is what's working right now. Then the really interesting fun fact about the home page where it says, “I'm the crash test dummy of online business, sharing what works and what doesn't, so you know exactly how to build your business better.” That was just placeholder text that Chase put there. He was like, “Hey, Pat. We need to put something clever and nice here, something that shows exactly who you are. I just put this here because it fit the spacing.” I read, and I was like, “That's fantastic.” He was like, “Wow. That's the first thing that came to head when I thought about you.” I was like, “Leave it. This is perfect.” Ever since then I've been known as the crash test dummy of online business.
Then in the bottom I show my latest podcast episode and then my latest post. There's not a whole magazine aisle of things to choose from. It's less overwhelming, and you choose from my latest podcast and latest post from here with a little blurb behind it. Then when you go to the blog page or the podcast page, there's a lot more design elements put into but a lot less happening as well on the sidebar. There's still a lot of work that needs to be done. The “hello, my name is” name tag has been updated as well with my son in it. He's much older than he was featured in that name tag back in the day. Then the other thing was the income report. That's at the top of every page. People can click to see the latest income reports. That was done purposefully because that's the page that most people go to.
A lot of this is a combination of talking this out with somebody who's knowledgeable about design, talking about who I am, what I'm doing and why and who's here and what they like but also what's working on the site. Whenever you're doing a redesign you want to know what people are going to and make sure to keep those things and then also make sure that you have all the elements that are there to make sure it's a great experience but not overwhelming. Even after Chase designed this, and we launched it, there were some things that didn't go right, and we switched things up. We made some changes based off of feedback. You got to make sure you really pay attention to the feedback. You don't want to respond or react to the first thing that's said at you.
If you do a redesign, and somebody says, “That's terrible, you got to change this,” don't change it right away. Use that as a starting point to start that conversation with others. You'll find maybe that person is just an outlier. Maybe that person is somebody who had a bad day. Make sure you don't react, but you take that information, you listen. You pay attention to the feedback, and then you come up with a smart way to validate that truth or not. Then you redesign based off of that, if you have to. That's how I went about it.
Probably the biggest thing after we launched the new design that happened was actually in an effort to declutter the site even more because that was one of the things that people said about my old site is that it was too cluttered, too overwhelming. We put the podcast episodes in the resources page. People had to click to the resources page, and then the podcasts were featured there because I figure the podcasts are a resource. The resources page is one of the top visited pages on the site as well. When I did that, my download numbers that were showing up on Libsyn.com, which is my podcast host, were cut down by half. Literally cut down by half simply because people could not find the podcast as easily as they could before. That was a big eye-opener for me. That's why the podcast tab is still and will forever live in the navigation menu on SPI. That's where a little bit of the inspiration for the Smart Podcast Player came from because I knew that a lot of my people who are listening to the podcast are listening directly from a website. Why not enhance that experience of listening on a website as opposed to just having a play button with a little slider and a volume thing? That's it. That's where the Smart Podcast Player came from. You can check that out at SmartPodcastPlayer.com.
That's a long history, or not very long but a decent amount of information about the lifetime of the design of the SPI blog. It is being changed right now, actually. You always want to make improvements and optimize. Some of you might be thinking why fix it if it's not broken? It's obviously working for you. Yes, it is, but it can potentially work even better and especially with the addition of AskPat and the addition of SPI TV. Those things aren't necessarily featured in the way that they should be featured on a site. Even when you look at the icon, the podcast artwork for AskPat, it looks completely different from the rest of my brand. We're not doing a blog overhaul or design change. We're doing a brand audit and really connecting everything together. You'll see that in the near future hopefully in Q3 of 2015 here. Chris, thank you so much for the question. This has been a lot of fun to talk about. Thank you for allowing me to do that, everybody. Hopefully, it gives you some inspiration and things to think about in your next redesign whether it's coming soon or later. Hopefully, you can have this in your back pocket for later.
Chris, an AskPat t-shirt is headed your way. We don't have your email, so shoot me an email. We'll get that to you very soon. Those of you listening, if you have a question you'd like potentially featured here on the show, head on over to AskPat.com. You can ask right there on the page.
Thanks so much for listening in today. As always, I want to end with a quote. This quote is from Sir Richard Branson. He says, “When you're first thinking through an idea, it's important not to get bogged down in the complexity. Thinking simply and clearly is hard to do.” Cheers, take care. I'll see you in the next episode of AskPat.