Here's How It Went and How Much It Cost
I hate to be a buzzkill, but I'm not a fan of redesigns. I get the excitement behind changing things up and refreshing your site every couple of years, and I understand why so many people love to get themselves through that, but that's just not me.
My mindset has always been that design needs to be "good enough," and that it's something that will not make a huge of a difference in the grand scheme of things.
But with that said, ThemeIsle was long overdue for a change. Even I could see that things were no longer 2019-ready. So when the decision was made to shake things up, I made sure to document the process so that we can learn as much as possible from the transition.
Now that the new ThemeIsle design has been launched let's look back at the previous design, the decisions made, the goals set for the new design, and how it all played out.
Old ThemeIsle design and its issues 👎
1. The problems of the design itself
Honestly, I never saw ThemeIsle's original design as bad. I mean, I knew it wasn't great (I have eyes, after all), but I didn't think that it's an issue that can be affecting our brand or negatively impacting sales.
Plus, it's been a while since the site launched, and during the early days, the design was pretty on par with what else was out there.
However, over the years, we started doing a lot of A/B tests, other so-called improvements, various SEO tweaks, etc., and since there was no leading design benchmark or control above it all, the site lost its consistency. For instance, we had this normal page for our ShopIsle theme, and this fairly custom one for RokoPhoto:
At the end of the day, since selling to designers is an area that we want to expand into, I've realized that a more polished design might boost our brand a bit and generate more buzz.
That was my primary reason behind overhauling the site.
2. The website structure and business model
This was one of the things that bothered me the most. When we first started and built the website, it was meant to be a theme club. We had 10-20 themes and wanted to sell them as a package. Fairly straightforward.
We also had a support forum at the time, and after launching the main site, we stumbled upon a plugin that needed a new home. It was a good deal, so we brought it on board and threw it into the main offer too. It didn't make that much sense to have it there as part of the package of themes, but it was the best we thought we could do at the time. 🤷‍♂️
In the past five years, the market has changed and we've understood that we don't want to have to build and maintain 20 different themes anymore. It's also not what anyone expects. We're in the era of "flagship themes" – where a store offers one main theme or just a couple of them and then additional upgrades or design packages.
We've decided to follow a similar path as well, and work on just two or three themes; same for our plugins.
We've also learned that individual product brands are more powerful and have more potential than "main site brands," so it makes more sense to emphasize those. Think the X Theme vs Themeco.
One more contributing element is the ThemeIsle blog. It has grown a lot over the last five years, and it has allowed us to secure a market position that we didn't think was possible when we first started.
3. Our technical debt
Two things I want to talk about here:
a) Website speed
The old site had a lot of legacy stuff and technologies in place. We started by selling our products directly via the site, using our hand-built system.
There were many iterations of the site's engine, which resulted in countless different ACF fields that got difficult to manage over time. We also ran a forum, hosted an affiliate program, hosted the docs, and probably a number of other things.
Overall, the structure wasn't very efficient, which resulted in quite poor performance.
As a side note, we've moved into FastSpring since, and are no longer handling the sales on our own. While we got rid of some of the other systems similarly, a lot of it was still there.
b) Shopping cart structure
Due to the nature of the business – with multiple products and with individual brands that can grow more than the parent company's brand, I've realized that it's time to split the actual technical setup of how things are.
Specifically, it's better to separate customer data from the front-end part (the theme listings and also the authors and their content plus all marketing efforts). This way, the front site speed won't be affected by plugins like EDD or anything else that's going on in the background to make the business run.
The marketing team would also get more control over the site, and we'd be able to establish separate sites/brands for the products while keeping a unified customer area on store.themeisle.com.
4. Landing pages and mobile
When we launched the original site, mobile wasn't really a thing. Specifically in our niche, where hardly anyone was buying themes while on their phone. Even right now, we still have very few mobile customers.
However, mobile has grown in importance nevertheless, and the trend is likely to continue. After all, Google now uses its mobile crawler over the desktop one.
Long story short, we've decided to build custom landing pages for our top products and work on improving conversions on them. Mobile is vital here since we've set out to not only make the pages mobile-friendly but also compatible with AMP.
In comes the new ThemeIsle design 🎊
Okay, so with the stage set and my reasoning explained, let's now see how it all played out.
1. Design and aesthetics
This you can judge for yourself, but for me, this has been an absolute success!
Here's the old design:
And here's the new one:
The website looks much more consistent and pleasant to the eye. John Fraskos of AnalogWP crafted the design. João Santos, who usually works on comics for us, created some custom illustrations. And finally, Catalin Vasile, the original ThemeIsle designer, worked on the new logo.
This part alone probably ended up costing around $10,000-$15,000. While the design itself is something almost impossible to track the ROI of, I believe that it's worth the investment. Frankly, considering that it took us five years before deciding to redesign the site, the cost only represents less than 0.5% of the revenues. So if this results in any upside at all, it'll make the project easily worth it!
2. New website structure
Introducing a new structure has increased the complexity a bit, but it has also resulted in boosting the traffic to our top products, which is always a good thing. On the downside, the traffic to our theme categories has dropped. But that's okay.
The main thing here is that we don't want for ThemeIsle to be a "themes place," but to be known as the "creators of Neve and Hestia."
To achieve this, we've decided to feature those products on the homepage, the themes page, and remove the generic pricing page entirely (it made no sense). We also set out to create individual logos for products, and then original landing pages for the top products (with their own branding and all). Plus, we did a few tweaks here and there to emphasize the individual brands.
3. Technical debt solved
Again, two things:
Our loading times are 50% faster now. But we did get into some trouble in the process.
In an effort to force us to both use our own products and also use the new block editor (which our developer wasn't familiar with), we've messed up the website building experience completely.
Gutenberg isn't there yet, or at least the way we've been using it isn't helping. It's still not the best choice for landing pages, and if you want speed, you better rely on something like ACF with hand-built structures. If you prefer flexibility above all else, you can go with Beaver Builder or Elementor, as we have done for the homepage.
When it comes to building websites with performance in mind, the task is still not easy. You cannot really depend on plugins to solve all the problems for you, and you have to do a lot on your own. Here's a comment by Cosmin Serbanescu, the lead developer on the redesign project:
It's been a real pleasure to work on the ThemeIsle website redesign and it is definitely one of the most complex and challenging projects I've ever worked on.
Probably the trickiest part was that because of the speed-oriented approach we had from the beginning I had to think at least twice before implementing a feature or a website section, without any third-party plugins or unnecessary libraries and keeping the code as clean as possible.
b) New shopping cart structure
This part went pretty smooth, as we now have everything set up at store.themeisle.com.
Of course, as usual with these things, we did face some trouble on launch day, but we managed to figure it out just in time.
In this setup, as I mentioned earlier, all customer/user data is stored in a separate instance from the front-end, which holds the theme listings, blog, marketing pages.
4. Better landing pages and mobile
As part of the redesign, we built new landing pages for all of our key products like Neve, Hestia, ShopIsle, Zelle, Feedzy, Visualizer, and WP Product Review.
Of them all, the landing page for Hestia – where we put most of our efforts – seems to be getting the best results. Currently experiencing ~10% better conversion rates. We're looking at around a month's worth of data right now, which makes me feel optimistic.
Overall, for the whole site, it seems like we've lost sales. But there have been so many changes, including getting rid of 10+ products (which all contributed a small number of sales) that it's hard to attribute anything to the design itself.
This relates to another goal that I've set for this year. Even if we keep only 90% of the pre-changes revenue but at the same time get to manage a 50% simpler business, it's going to be worth it. By simpler business, I mean fewer products, which translates to fewer pages to manage, fewer things to document and support, and thus more time to work on making the existing products better.
Optimizing the new site for mobile went great overall, but not super 100% problem free. Choosing Gutenberg as the basis on which we built the new pages wasn't easy and didn't boost our mobile performance a lot in the end.
We didn't manage to get the implementation below the 50KB mark for product landing pages, so we were not able to serve them in AMP (there's a restriction on how big the CSS can be for AMP). We've got AMP on category pages, though.
Overall making sure that the design can work with Gutenberg, Elementor and other builders was a tough deal. And it's not just about purely making sure that those builders can output their structure, but also make sure that the result on the screen is what you'd expect. After all, we want to be able to modify the pages later on, and not have to redo stuff on the code level to make it possible. This is why the design has to work with builders.
Here's what the lead designer, John Fraskos had to say about this challenge:
The biggest challenge was to create a consistent, scalable design that would be "builder-agnostic" since parts of the project are executed using different layout builder technologies. We managed to narrow down and maintain a baseline visual language for all the components, that would be easy to replicate with any layout builder, giving us a future-proof peace of mind.
The pages are much easier to navigate on mobile now, and this is not by pure chance. We put a lot of effort into designing the mobile experience and thinking on what's important for mobile visitors vs desktop visitors. Go ahead, check out some of our product pages on mobile and desktop and see what's different (this one, for instance).
The whole implementation, along with the marketing work around copy and texts, landing pages and other campaigns took quite a bit of time; 1,500 work hours, to be exact. We made it one of the goals to do some serious time tracking and take stock of every minute spent on the project.
If you multiply it by whatever hourly rate you want to calculate, this gets us probably in the range of $50,000-$100,000. Or, in other words, if we wanted to build a similar site for a third party, we would have to charge more than $100k to make it profitable.
The biggest challenge for us overall was the fact that this was a one-time, unique project. What I mean is that we don't usually build e-commerce sites, so we don't have the processes in place, and the team and their skills aren't structured for website building projects.
We struggled to organize our work, and didn't know how to lead or structure it all. We also didn't have (we still don't) a dedicated team that would handle all front-facing projects and sites. Building themes and plugins for users is just a completely different kind of thing. Ultimately, thanks to John Fraskos, who steered us on the right path, we settled on using Sketch for UI design, Invision for design collaboration and feedback, and Slack for everyday discussions. And we did go through a lot of iterations, so each of these tools was certainly needed.
So, the main question would probably be; do I consider the project a success?
It depends.
We're not seeing any short-term boost in sales resulting from the redesign. We still have some trouble with the editing experience and tweaking the site. The project could have also been run smoother. However, at the end of the day, I still can't see a better investment that would set us up for long-term results.
The next year will tell if the project is a success or not. I'm curious to see how things play out.
Also, along with the Neve Pro launch and our WCEU sponsorship, this marks the beginning of sort of a new era for us. An era of trying to become a more established business vs just a store with some themes.
I also wasn't the only one running the show here. It was a good team effort, and a major change in our business direction – getting closer to the customer and resonating with their needs more by focusing on fewer, higher quality products.
Thanks again to everyone who took part in this redesign!
Don't forget to go and check out the new ThemeIsle!
Don't forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
15 Best Places to Learn How to Code in 2019
How to Create a Custom WordPress Login Page (Ultimate Guide)
New Editor for WordPress.com + Jetpack
2018 in Review and How Gutenberg Will Change Page Building
How to Easily Deactivate WordPress Plugins (Beginner's Guide)
How to Run A/B Tests on WordPress to Improve Your Website
Improve Your JavaScript Knowledge By Reading Source Code — Smashing Magazine