Fabrizio Van Marciano dot com Website Redesign Journey (Vlogs)

In this post, I’m going to share with you my website redesign journey for Fabrizio Van Marciano.

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 using 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, 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 great clients. But, it soon became clear to me that I needed to offer those services on a stand-alone platform.

In March of 2018, 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

The first process of my design methodology is to plan and strategize.

Fabrizio Van Marciano only had a single landing page, the homepage, so there was a lot to plan.

Here’s a snapshot of what fabriziovanmarciano.com actually looked like before the redesign.

At the time, it wasn’t bad-looking by any means. However, it was a pretty mediocre design. There was nothing eye-popping, and to be frank, it looked quite uninteresting for a freelance designer’s website. That being said, I left it for a while.

After some further thought and a million discussions with my wife Samantha, it wasn’t until the end of December 2018 that I sat down to begin planning and strategizing properly. Almost 9 months had gone past…

So, was I going to transform FabrizioVanMarciano.com and make it the new home for my freelance web design services.

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. The video is a few years old now, but it’s great to see what my thought process was during those early phases.

After all the planning was done, it was time to get excited. At the time again, I knew this was going to be quite a nit-picky project.

I wanted to make sure that I was doing everything that I could in accordance with the Growth-Driven Design methodology that I learned.

I also created several visual website sitemaps to work with. Laying out exactly which pages were going to be included in the design really helped. I created these simple visual sitemaps using my favorite vector graphic design application, Affinity Designer.

I also started researching other freelance websites, looking for ideas and inspiration, design styles, page layouts, typefaces, branding, logos and icons, colors, and all the rest of it.

It was a lot of fun, that much I will say.

No User-data Or Analytics?

Usually, when I’m redesigning a website, I like to have access to user data and metrics, if possible.

This is important because valuable data can be used to design a launchpad website that is expressly crafted for improved user-experience and takes 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.

Pinching the branding identity from Magnet4Blogging

OK, so 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.

I explained my plans for migrating my website design services, and she pointed something out that I hadn’t taken into consideration before now.

Branding identity and familiarity!

Let me explain.

For the last 4 years or so, many of the clients I’ve served have returned for repeat service/business from me, which has been great.

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. The most important of which is the visual identity or style of my website.

Magnet4Blogging 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 loyal customers would not be able to recognize this was me, the trusty designer from Magnet4Blogging!

Maybe I was being dumb, I don’t know.

So, what I decided to do was to create a new design for FabrizioVanMarciano.com using the same branding style and identity as Magnet4Blogging.

Creating wireframes and sketching logos

One of my favorite things to do as a web/graphic designer, especially if I’m working on rebranding a website as well as designing it, is to actually get creative with wireframe templates and sketches.

Please do check out my short vlog episode below where I share some behind-the-scenes stuff, creating wireframes, sketching logo ideas, and doing design research.

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 –

1. WordPress (Obviously).
2. SiteGround Web Hosting.
3. Oxygen Website Builder (Theme builder plugin)
4. Affinity Designer (Professional graphic design application)
5. Affinity Photo (Professional photo editing application)

Other plugins being used –

1. Insert Headers And Footer (For adding custom scripts)
2. Thrive Leads (Building my email list)
3. WPForms (Premium version, for creating custom inquiry forms)
4. Social Warfare (Free version for now, however, I will change to another plugin later on in the year)
5. Yoast SEO (Free version)

No WordPress theme Used?

Now, with most of my previous website design projects I’ve always included a custom theme. I used to work primarily with Genesis child themes (Genesis Theme Framework) or Thrive Themes, but on this occasion, I decided to use a new plugin called Oxygen Builder.

I’ve been using this plugin on several other personal and client projects since December of 2018 and I absolutely love it!

Oxygen Builder is a powerful visual website-building plugin for WordPress. Yes, it’s a plugin and not a theme.

It’s extremely flexible 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 is a dream come true.

Unlike many DIY themes or even visual page builders, Oxygen Builder is a full-blown website developer application for WordPress that completely replaces the theme.

While I initially faced some challenges with designing FabrizioVanMarciano.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 FabrizioVanMarciano.com website was ready to be launched as a launchpad website.

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 tremendous 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 –

1. There’s no such thing as a perfect website when it is ready to launch. Rather than strive for personal perfection, let others see it and use it and tell you what they really think.
2. The website can begin collecting valuable user information and gather feedback.
3. 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 🙂

Wrapping up

Redesigning FabrizioVanMarciano.com has been a whole lot of fun. It’s pushed me a little bit further with regard to my abilities as a UX designer and 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 significant, and that is the gap between visual design and front-end web development (or coding) is surely 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 makes the perfect individual to hire, right?

So, the new site has been live for a week or so now and already I’ve received some great praises, 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 some 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.