[Important: This post has now been archived and is no longer updated]: In this post, I’m going to share with you my website redesign journey for Fabrizio Van Marciano.
Here’s an interesting fact. FabrizioVanMarciano.com was never meant to be an active website.
I purchased the domain name from SiteGround back in 2017 to use in a hosting tutorial video. I had no intention of utilizing it until that is, I decided to move my creative services from my main blog at Magnet4Blogging to a new site.
So, before I talk about the redesign of this website. I want to quickly go over the history of my web design services.
A few self-employed freelancers and budding designers in my community have asked how I got started as a designer and web developer, so without diving too deep, here goes:
I started offering web design as a service over my main website/blog at Magnet4Blogging at the start of 2014.
Now, Magnet4Blogging was never meant to be a creative agency-type business. So by using the site to present my web design services, I was being forced to transform the site from an info-based blog into a freelance website.
I had to build and deploy new sales pages, inquiry pages, a new custom homepage, and terms of service page and began blogging mostly about web design and development, WordPress, branding, and so on.
Did this work?
Yes, kind of, it worked for a little while. But it also steered me away from my original aim to grow Magnet4Blogging into a successful blogging-based business.
My primary monetization approach for Magnet4Blogging was based on an affiliate marketing model, not an online services model.
It was a bonus that I could use my blog as a launchpad for my web services, and it certainly got me some clients. But, it soon became clear to me that I needed to offer those services on a stand-alone
In 2017, I finally made the decision to move my web design and creative services permanently to a brand new site, and it just so happened that I had purchased the domain name Fabrizio Van Marciano Dot Com the year before.
Planning and strategizing
So here was my process:
The first step is planning and strategizing. Sounds kinda boring, doesn’t it? Well, that’s because it is but it’s an important step.
At the time, Fabrizio Van Marciano only had a single landing page, the homepage, so there was a lot to plan.
Just for fun, here’s a snapshot of what fabriziovanmarciano.com actually looked like before the first redesign. I mean, it looks a lot different than what it has become today.
I mean, t wasn’t bad-looking by any means. However, it was a pretty mediocre design. There was nothing that made me go ‘Wow, I love this design’.
After some further thought and boring my wife Samantha to near death with my plans, in December 2018 I sat down to begin planning and strategizing everything properly. This process took me almost 9 months, largely because it was so boring… But, it’s an important step.
Just for fun: In the short vlog below, I share some reasons “why” I’ve decided to migrate my web design services to a new stand-alone site, my redesign plan of action, methodology, and more. A word of warning though, the video is a few years old now, and I sound goofy as all heck, but it’s great to see what my thought process was during those early days.
After all the planning was done, it was time to start bringing my ideas to life.
I wanted to make sure that I was doing everything that I could in accordance with the Growth-Driven Design methodology that I learned about.
Visual site map
One thing that I like to do is create a visual site map. Laying out exactly which pages were going to be included in the design really helped. So yes, I created these simple visual sitemaps using my favorite vector tool, Affinity Designer.
I also started some research on other freelancer websites, looking for ideas and inspiration, design styles, page layouts, typefaces, branding, logos and icons, colors, and all the rest of it.
This part of the boring phase was actually fun.
No User-data Or Analytics?
Usually, when I’m redesigning a website, I like to have access to some user data and visitor metrics.
This is important because data can be used to design a launchpad website that is expressly crafted for enhanced user experience and takes the conversion goals into regard too.
At this stage, I didn’t have much in the way of user data to work with. Remember, Fabrizio Van Marciano Dot Com was a one-page website before anything else.
Pinching the branding identity from Magnet4Blogging
Was this a good idea? At the time I think it was.
About halfway through the planning and strategizing phase, and being so indecisive over colors, layout, and styles, I just happened to be having a conversation with an old client and friend of mine.
I explained my plans for migrating my website design services, and one thing she pointed out that I hadn’t taken into consideration before now.
Branding identity and familiarity!
Let me explain.
Since 2014, many of the clients I’ve served have returned for repeat business from me, which has been great. There’s nothing better than having the trust and loyalty of returning customers.
So, when folks look for ‘the web designer over at Magnet4Blogging‘, I think there are a couple of things that tend to stick in their minds. I’m just assuming here.
The most important of which is the observable identity or style of my website.
Magnet4Blogging at the time used and still uses a simple layout and three fundamental color tones: White (although not a color), grey, and red.
Now, I could have quite simply come up with a completely fresh design style, with new branding colors, shapes, visuals, etc. for FabrizioVanMarciano.com, but now my fear was that some of my dedicated customers would not be able to recognize this was me, the trusty designer from Magnet4Blogging!
Maybe I was overthinking this, I’m not sure.
So, what I decided to do was to create a new design for FabrizioVanMarciano.com using the exact same branding style and identity as Magnet4Blogging.
I know… how boring not having to come up with something new and fresh.
Creating wireframes and sketching logos
One of my favorite things to do as a designer, especially if I’m working on rebranding a website as well as designing it and building it from scratch, is to actually get imaginative with wireframe templates and sketches.
Please check out my short vlog episode below where I share some behind-the-scenes stuff, creating wireframes, sketching logo ideas, and doing design research. Again, this is an old video, but it’s nice to look back at the madness that started all this off.
Design and development
So, it was now March 2019, and whilst working on several client project deadlines at the time, I managed to book a few hours each day to work on the redesign and development of FabrizioVanMarciano.com
The tools I used to create the site in 2019 were as follows –
- WordPress (Obviously and that will never change… Stuff you Webflow).
- SiteGround Web Hosting.
- Oxygen Website Builder (Theme builder plugin)
- Affinity Designer (Professional graphic design application)
- Affinity Photo (Professional photo editing application)
Other plugins being used –
- Insert Headers And Footer (For adding custom scripts)
- Thrive Leads (Building my email list)
- WPForms (Premium version, for creating custom inquiry forms)
- Social Warfare (Free version for now, however, I will change to another plugin later on in the year)
- Yoast SEO (Free version)
No WordPress theme Used?
Now, with most of my previous website design projects, I’ve always included a child theme that I could customize. I used to work primarily with Genesis themes (Genesis Theme Framework) or Thrive Themes, but on this occasion, I decided to use a new plugin that I discovered called Oxygen Builder.
Looking back now, in 2023, little did I know that this plugin would change everything in my business…
Oxygen Builder is a powerful visual website-building plugin for WordPress. Yes, it’s a plugin and not a theme.
It’s extremely adaptable because it allows you to build truly any type of website using visual design elements as well as your own custom code, i.e. HTML, CSS, PHP, and even JavaScript.
As a designer and front-end developer working with WordPress… this was a dream come true.
Unlike many DIY themes or even simple page builders, Oxygen Builder is a full-blown website developer application for WordPress that completely replaces the theme.
While I initially faced some challenges and steep learning curves with designing Fabrizio Van Marciano.com using this tool, it was a lot of fun, and the more I used it the more I fell in love with it.
Finalizing the redesign, and launching the “Launchpad” website
OK, so finally on the 8th of April, after a total of 47 hours of design and development, the all-new Fabrizio Van Marciano.com website was ready to be launched as a launchpad site.
Now, since I use a strategy called Growth-Driven Design, the Launchpad website isn’t the final product, even though it’s a Live site for the world to see and use, it’s still a work in progress.
So, you might be wondering –
“Fabrizio! Why are you launching a website that’s still a work in progress?”
There are many wonders to the Growth-Driven Design methodology, and you can learn “why” I do this here. But, I’ll also outline some reasons below –
- There’s no such thing as a perfect website, even when you think it’s ready to go live. Rather than strive for personal perfection, let others see it and use it. They will tell me what they really think.
- The website can begin collecting valuable user information and feedback.
- With user data and feedback, I can make then make improvements for continued growth.
In the short video vlog below, I share more behind-the-scenes stuff of me actually doing some work, finalizing the design, and getting ready for launch 🙂 Again, the video is probably cringeworthy… but who cares.
Wrapping up
Redesigning FabrizioVanMarciano.com has been a whole lot of fun. I have to be honest, though some of it was boring. Yet it has pushed me a little bit further with regard to my abilities as a UX designer and WordPress developer, and I’ve learned some new skills and techniques along the way.
Moreover, using a tool like Oxygen Builder, it’s made me realize something powerful, and that is the gap between visual design and front-end web development (or coding) is certainly diminishing.
I think that more web designers should become web developers and vice versa. I enjoy both designing and coding. Both skills prove to be very challenging a the best of times, and if a talented designer has some knowledge and experience in marketing and conversion rate optimization, then that is an added bonus, right?
So, the new site has been live for a week or so now and already I’ve received some great praise, productive criticism, ideas, and suggestions for future updates.
The next part of this project now is testing, tweaking, and building new features, however, I won’t be doing this until I have collected enough valuable website data.
Please share your feedback, thoughts, and comments.
OK, so that is it from me. I hope you enjoyed reading through this personal website redesign project. If you have any suggestions or ideas, I welcome you to get in touch with me using my contact page here. Again, simply select website feedback in the drop-down menu.
Thank you for reading and enjoying the new site.