Since launching DollarSprout last month, Ben and I have been getting a ton of positive feedback from readers and other bloggers.
We’ve invested months of work into this project, so it’s been great to hear that people like what we’re doing. Furthermore, a lot of bloggers have expressed their curiosity about our web design process.
One question I’ve been asked a lot is “How did you guys make the site look so good?!”
I wish I could say I just whipped this up in my spare time, but that would be a fib.
When we made the decision to rebrand our old site and transition into DollarSprout, Ben and I decided to ditch pre-built themes and go custom — because we wanted better results.
Here’s what the DollarSprout home page looks like:
So far, the results are looking really good.
Readers love the new design, affiliate sales are up, email opt-ins are up — and we’re only getting started.
Regardless of what path you take to start or optimize your blog, we learned a lot in this process about creating a successful blog and wanted to share those insights with you.
That’s what this post is about.
5 Things You Need in Your Web Design Process
After a crazy amount of research, we ended up hiring Reliable Design to take on our project. I shopped around for design agencies for about a month. Reliable’s design portfolio and price point eventually won us over (more on that later).
For this article, I’m teaming up with Reliable co-founder David Tendrich to put out some advice for you on what it takes to create a blog that your readers will love — without spending tens of thousands of dollars.
We also discuss pros and cons of going the custom-build approach like we did vs. using a pre-built theme.
If you’re thinking about redesigning your site, here are some things to consider.
1. Hone in on your key goals.
During our initial phone call, I was surprised that “what do you want your site to look like?” was not one of David’s first questions. That’s what I thought he wanted to know.
Instead, this is what he asked me:
He came with the hard-hitting questions and had me pondering life right out of the gate.
But if you think about it, it makes perfect sense.
Your web design process needs to revolve around the key goals for your blog — not just how you want it to look.
For me and Ben, we were focused on 3 main areas:
- Driving affiliate sales
- Growing our email list
- Not looking like every other finance blog on the web
Your goals might be different. If you’re trying to build your own personal brand or sell online courses, for instance, your design needs will be totally different.
Think about what the top 1-3 priorities for your blog are, and build everything around that.
2. Research your market and evaluate competition.
Since this was a rebrand of an existing blog that we already had (vtxcapital.com), we wanted the design of DollarSprout to cater to our audience even better.
Since we were already making money with VTX — a brand and design that, admittedly, did not really illicit any sort of loyalty with readers — we knew that there was a real opportunity here to hit it out of the park with DollarSprout.
To get a better understanding of our market, Reliable needed to dive deep into the data we had on hand and research our competitors.
It started with some screenshots from Google Analytics:
In a nutshell, millennial women. We already knew that to some extent since a lot of our traffic is from Pinterest, but having hard numbers really helped bring clarity to what we suspected was true.
Competitor research was also an important part of this phase of Reliable’s web design process.
To give the team a head start, I provided a list of several competitors that Ben and I look up to, including The Penny Hoarder, The Simple Dollar, NerdWallet, and The College Investor.
There were a few other sites on our list, but these four were the main focus.
Here’s what David had to say about their research for DollarSprout:
In studying your market, we focused primarily on The Penny Hoarder. Taylor Media, the company behind them, is getting a ton of attention for their success, so we wanted to study them more than any others (though we studied quite a few of your competitors altogether).
We noticed they are big on keeping things above the fold, and in cramming items together, but without making them “feel” too crammed.
Negative space is used sparingly.
We deduced from this that this market is impatient and just wants to get to their content.
Our design will take in what you gave us in your drawing and add in some flair we found in studying your market.
Flair. I think this is the point where I knew I was hooked. I’m all about flair.
In all seriousness though, it’s important to put a lot of thought into this step.
Your successful competitors are successful for a reason. Take the time to figure out how they are serving their audience, then think about ways you can do it even better for your audience. It all starts with your website design and messaging.
3. Create a mood board and wireframe.
Once the team finished up their market research and competitor analysis, it was time to get down to creating.
But before building the actual website, the Reliable team started with creating wireframes and a mood board.
I had no clue what either of these things was. This is why we have professionals do this.
Here’s a quick and dirty version of what each one entails:
The popular design site, Canva, describes a mood board as “A physical or digital collage of ideas that’s commonly used in fields like interior design, fashion, and graphic design. It can include just about anything — photography, designs or illustrations, color palettes, textures, descriptive words — anything that helps you define the direction of your project.”
Here’s what the DollarSprout mood board looked like:
Here’s how David described our mood board to us:
As we’re dealing with millennials here, we compiled a series of photographs, websites, and graphic elements that we felt would speak to them most directly.
The Penny Hoarder does a great job of selecting photography to appeal to millennial women. We broadened that a bit to include some photos more for women, some more for men, but altogether, they make both genders feel equally at home.
The overall vibe is success and savings – but with a flare of independent thinking, millennial quirkiness, and a touch of artistic-ness too which is big for millennials.
The overall feel is modern, clean, successful, uplifting, easy.
You guys are making investing and saving and earning easy – so that’s what we wanted to convey more than anything. Easy and modern and savvy.
Definitely some “designer-speak” in there, but I liked where his head was at. This is part of the expertise we are paying for.
There were a couple items I nixed from the first mood board, which helped their team get a better sense of what Ben and I liked and what we didn’t like. Very important.
This is basically just a sketch of how your site will be structured and where things will go.
Here is what the initial DollarSprout wireframe from Reliable looked like:
Overall, I liked it. It was very close to what I originally had in mind, which is a good thing.
4. Design with the future in mind.
Even though we started this project at the beginning of Summer 2017, we wanted to make sure that our design fit in with where we anticipated future trends going.
There were some specific standards that we discussed with David and Reliable about what we wanted DollarSprout to represent in 2018 in terms of design:
- Not cluttered
- Not overwhelming
5. Understand the importance of clean code.
One of our biggest hesitations with having a custom site built was that we would be at higher risk for being out of luck if something broke at some point down the road. We have some tech knowledge, but by no means are Ben and I coders.
Ben preferred having the site built on the Genesis framework since it’s such a widely supported platform and we know so many bloggers who use it.
What we learned from Reliable is that they don’t like using pre-built themes or frameworks.
This isn’t what we wanted to hear. In fact, we almost chose not to work with them because of it. After talking it out with David, the reasoning behind their decision makes a lot of sense:
We don’t work with Genesis or pretty much any other pre-built themes / frameworks, and here’s why:
Most of your traffic is mobile. That makes load speed more important than anything.
Genesis themes come packed with tons of extra code for the million and one uses they provide.
The problem is even if you only use a handful of those million uses – you still have to load the code for them all – which bogs down your site.
It’s like walking around with a parka in your backpack in the middle of summer. Why carry all that extra weight?
We start with a completely clean slate. The only code on your site is code that is absolutely essential. This is key to fast load times.
Pros and Cons of Themes vs. Custom Build
The only reason Ben and I were able to go the custom-build route was because we were already earning substantial revenue from our blog. We had money to invest and knew exactly what we wanted to do.
That being said, there are some pros to choosing a pre-built theme:
- Way cheaper
- You can get up and running overnight
- You can change themes as many times as you want
And of course, the cons:
- Lacks originality
- They aren’t created from research
- They’re packed with thousands of lines of extra code and scripts
Most themes are built to dazzle you into buying a theme . They’re not built by experts in conversions and getting people to take action, which is why so many people buy them but then are disheartened when their sites don’t look as good as the theme examples on the creator’s site.
The End Result
For a project of this magnitude, communication is so important.
After several back and forths during each stage of the web design process, Reliable came out with an end product that blew us away.
We now have a clean, fast, beautiful website that is tailor-made for our specific business and audience.
Reliable knocked it out of the park.
We’ve got the foundation set — solid branding and an awesome, modern web design. What that means is that DollarSprout is now positioned to grow really quickly, and we can’t wait to see that happen.
If you choose the custom-build route…
Overall, Ben and I had a really positive experience with Reliable and are happy to recommend them to bloggers who have been following us.
This was our first experience with taking a leap like this and getting serious about investing in the future of our business. David, Mary, April and the rest of the team took really great care of us and poured their heart into our project, which was a huge relief to us.
Right now, Reliable’s going rate for a comprehensive blog design (like our project) is not cheap: $8,800
If you can’t quite stomach spending $8,800, don’t worry. Ben and I cut a deal for you.
If you’re interested in working with David and the Reliable Design team, they’re offering a $1,000 discount to our readers.
Even with the discount, $7,800 is a lot of money. Do I think it’s worth it? 100% yes.
As long as you are financially ready to make the investment, I definitely think custom is the way to go. I’m so glad we did it.
$1,000 off is not a small discount, and as far as I know, Reliable isn’t offering it anywhere else but here. To you guys.
Remember, Ben and I funded this project on the successes of a blog built on a $50 theme.
You don’t need to go all out like this in order to make money from your blog. This is just an option for when you’re ready to take things to that next level.
If you do end up talking to Reliable about working on your blog, just drop our name and David will make sure you get your $1,000 discount applied to your invoice.
Website: | Email: [email protected]
A Final Note
I was debating for a while whether or not I wanted to write this post.
To be honest, I wanted to keep our web design process a secret. I didn’t want our competitors in the personal finance space to know who we hired.
But the more I thought about it and realized how many bloggers follow us that aren’t in the PF niche, the more I started to come around.
The whole reason Ben and I started BTOP was to document our successes and failures in blogging and hopefully teach others along the way. Sometimes that means oversharing a bit.
Oh well. If it helps someone, then we’ve done our job.
If you are just starting out and have been inspired by this post, here’s some helpful stuff for you:
Want to start your blog? We personally recommend Hostgator to get you up and running today. Use code BTOP42 for 42% off.
Not sure where to begin? Here’s a straightforward tutorial on how to start a blog.
Just starting out and need help monetizing your blog? Check out our article How to Make Money Blogging for Beginners: A Complete Guide to Your First $1,000.