3+1 Lessons for every new website owner
So you clicked together a portfolio website for your business, and you want to be smart and strategic about what to do next. If you are a business owner and you've created your own portfolio website in Squarespace, Wix or Shopify, this article is for you. I'll guide you through my framework of to do's before and after you launched so you can make sure your site performs well.
*This post is about the steps I have taken before and after launching this website in its first iteration. The illustrations are not accurate to the current design.
Content quick links
Introduction
Why do you need a website?
Ask yourself first: What do you actually want from your website? What is the job you want it to do for you?
I wanted my website to do two jobs for me: introducing me in a way that’s in line with my brand AND, capturing client enquiries. That’s it.
Instead of investing in an extensive process and a functionality-packed site at start, I believe in a brick-by-brick creation process. Web design is extremely versatile so whatever you’re building, it can be iterated immediately and developed as you’re growing.
So what is the ultimate goal of a simple portfolio website (like mine)?
To communicate your info (your background, value proposition and services) to your potential customers.
To provide an easy access contact so they can reach you.
And hopefully, combine these two in a way that your visitors can get from their first landing to filling in the contact form.
My building framework
Designing a site on Squarespace and other handy tools
I originally built the site in early 2019, before Squarespace 7.1 was introduced. Plantconfident.com is hosted on a Squarespace 7.0 site, however, I might migrate my content to 7.1 in the future. This was my framework to make the site.
This is not the first website I have built in a WYSIWYG (what you see is what you get) website builder software, so I expected no technical difficulties in the design process itself. And there wasn’t any!
The domain name www.plantconfident.com I purchased way back in November 2018 the moment I felt sure about it.
Two weeks before I jumped onto Squarespace, a website design and hosting platform where I decided to host and build my website. I really like their templates and the builder end is amazing, the most user-friendly backend I’ve ever worked with.
The build-up from start to finish took me less then a week, including a weekend when I couldn’t do any work. I’d say a total of 3 days from scratch. For all the choices I made (both in design and in content), with writing (and rewriting) the copy, editing the images and testing the functions.
On Squarespace I considered three templates, KENT, ETHAN and READY and I finally went on with Ethan. Besides some minor issues when I challenged the boundaries of the template, it was rather straightforward to use.
I looked up my fonts on Google Fonts and chose the icons I used to illustrate my services on Font Awesome.
To create the colour scheme so the design matches my photographs I used Adobe Color. All food pictures are mine, taken and edited on an iPhone. Sounds like I live a quite simple life, right?
As a business just starting up, I had larger question marks around my value proposition and how can I clearly and effectively present my services and my expertise to my target market. But this is a copy writing challenge and can be 100% isolated from the design and technical part.
Lastly, to fine-tune the design and to make sure that I like how the responsive design looks on a desktop, tablet and on the phone, I used the Inspect tool in Google Chrome. It is a handy tool to quick-read the CSS code of any website without leaving your browser and to adjust every small detail.
Et Voilá. Website has been created.
Lesson 1
Soft launch your website and take time to fine-tune
Most people I worked with on their websites were genuinely excited to have it up and live. And it’s a natural feeling: you are proud and want to tell the whole World about it. However, launching it softly by introducing it to a limited audience first creates you space to fix and fine-tune.
And that’s worth that extra couple of days.
Because no matter how proficient and careful you are, there is always something to fix after going live.
I launched Plantconfident.com through my tiny circle of followers, friends and family first.
But what can you really test with people who know you, are maybe biased and most definitely do not identify as your potential customers?
You can test a lot of things, for example:
1. The look and feel of the site, how the web design is in alignment with you, your style and voice.
Trust me, you can easily get carried away when writing your website copy and share too much, or, on the contrary, share too little or vague information. I reworked the copy three times to get as clear as I can get at this stage of the business.
2. How first-time visitors behave on your website.
How far do they scroll down, which call to action they act upon, which pages they visit, where do they come from (if the link wasn’t sent privately), how much time does it take for someone to read through your copy... Just to name a few.
Plus, if there is something you completely forgot or did not occur to you or thought it was taken care of.
Lesson 2
Prepare for launch with a list and connect to analytics
Before letting my test audience know that the site is ready, I sat down and wrote a list of assumptions. What could possibly come out as a weakness? You need to think this through so you can test the feedbacks against it.
So what can you do?
I scrolled down the site inch-by-inch and listed these possible weaknesses:
1. The hero image is too tall
And visitors won’t realise there’s an option to scroll down. I worked with a preset in the template and I didn’t invest in customising the code so my first banner image was really tall - although really beautiful. So I assumed people won’t scroll down, which limits the information they get (eg. the description of my services!) and the bounce rate can jump up.
2. Website home page is too long
People won’t engage with it and won’t get to the bottom. Again, bounce rate goes up as they leave the site early. This is not a technical problem but something a great copywriting can solve.
3. Page loading speed is too slow for certain users because of the screen-wide images. Even though it worked fine on my devices, for certain users this can cause some - unnoticeable - pain, for example if visiting on mobile or on a limited data plan. More importantly, page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results. And we’re talking milliseconds here which freaks me out a bit..
I also made two things super sure are working before the launch: my custom domain name is pointing at my site (remember, I bought them from separate providers) and that there are no painful typos on the site and the copy feels nice to read. I’m coming from an academic background, yo!
Free professional web analytics tools at your business’s service
These are the services I recommend to set up as a minimum to track your website’s performance, build a foundation to your SEO and learn user behaviour.
Google Search Console
Google Search Console is a free service that helps you manage your site's presence in Google search results. Through Google Search Console, you can request that Google index your site, meaning changes you've made can show up in search results sooner. It helps you measure your site's search traffic and performance (a key to SEO), fix issues, and make your site shine in search results.
After you've verified your site with Google, you can manage your site’s presence in Google search results and see how visitors find you.
Google Analytics
Google Analytics is a free web analytics tool by Google to help you analyse the traffic on your website. For most businesses, their website is the central hub where the majority of their customers or clients make a visit, interact or buy stuff. Why wouldn’t you want to know where they are coming from and what do they on your site?
Google Analytics gives you just that. There are two main types of data that you can collect if you let Google to track your site (you need to install a tracking code to do that): user acquisition data and user behaviour data.
The former means data about your users before they visit your site (e.g. demographics, what media channels are they frequent on), the latter is collected during a user’s session on your website. This data includes for example how long a user stayed on your website and what is most common path they browse your site.
User behaviour data can be easily changed by the changes you make on your website - in functionality and in design.
Hotjar
Hotjar is the third tool that I recommend and is my personal favourite when it comes to informing design decisions. Hotjar helps to understand what users do on your site by visually mapping their clicks, taps and scrolling behaviour. How cool is that, right?
I use it to create heatmaps of my site representing my visitors’ path but you can also record user visits and analyse to spot certain patterns.
Make sure these two are installed on your website and that you have access to pull data from them any time you want to know something.
Google PageSpeed Insights
And here is my pro-tip: Google PageSpeed Insights is a developer tool from Google.
PageSpeed reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. You can either run it by clicking the link I attached in any browser, or you can access it through the Chrome Inspect tool.
Lesson 3
Right after the launch: page speed and early visitor data
Getting in the page speed race
As soon as I sent out the URL to the universe, I jumped onto PageSpeed to take a closer look at my page loading speed.
PageSpeed returns a Performance score between 0 and 100 for your mobile and desktop view, a score of 90+ is considered good, everything below that is an opportunity for development.
You guys. Poor Plantconfident was devastatingly slow!
The performance score for mobile returned with a score of 20 (red) and for desktop with a score of 71 (orange). These are not really brilliant but completely in line with my assumption, so at least I know I was realistic.
Looking into the optimisation strategy that PageSpeed suggested, I can speed up my site by 3.45 seconds if I properly size the images and render them in a newer format. JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts - which I used. Saving my images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data. This is the ultimate step to a great mobile experience.
Another 3.78 seconds could be cut through a better website template as it turned out. PageSpeed identified render-blocking links and scripts that are part of the Squarespace and its template I use. These are slowing down the rendering of the website on mobile, a consequence of using generalised site builder. They can not optimise well for everything. I see tiny bits I can try to hack (like code injections I added) to improve the speed but not all.
All in all, I will be able to speed up the mobile view to an okay score and the desktop up to around a 80-90 score (wild guess!).
Understanding early visitor data
Now let me show you some highlights of the visitor data I pulled from Google Analytics and Hotjar.
In Google Analytics I was able to see where my visitors came from to the site. I shared the URL first on Instagram, then in a couple of private messages. Lastly, I updated my website address on my Facebook profile and Plantconfident’s Facebook page. I see that my people on Facebook (where I shared my site on June 12) were more responsive than my Instagram pals (on June 7th), although my main presence is on Instagram.
Then here is an overview of my audience, especially the new, individual visitors that topped at 114 by 13th of June, one week after I launched Plantconfident. I can see that there were some users who returned more than once and also, that the average time spent on my site was around 2 minutes.
It’s worth pointing out that the size of these early numbers is not important, I’m only at the beginning of the site and looking at data pulled after a limited scope launch. Try to spot the tendencies here.
There is an other interesting metrics worth showing you now, the engagement of the users who visited the site. This is a great metric to learn how relevant is my business to the audience that accessed it (friends and family) by seeing how much time they spent on the site. 81 out of 114 visitors left within 10 seconds after entering the site, meaning that for 70% of my inner circle, my business is not something they’d consider.
Which is completely fine for now but still gives an idea on my second assumption.
I wanna move ya’ cursor
What Hotjar showed me was way more illustrative, mainly because it’s a visual tool showing a graphical representation of the captured data. I immediately got an answer to my first assumption related to the height of the main image & the user experience.
Let’s have a look at the heatmaps Hotjar recorded for me.
Firstly, it’s amazing to learn and internalize how the users on your website (even if it’s quite a simple one like mine) move their attention, if they see important content or maybe get confused by un-clickable elements.
Here you see two snaps of the scroll map, mobile view. Exactly as assumed, visitors landing on my website on a mobile will get a glimpse right until the middle of the main image. The average fold marks the area visible when you open the a site. On the right you see that of all the visitors, around 53% got down by the end of the description of my services. Boom!
Also: navigation is super popular, especially on mobile! Here you see the click map showing that people check the hamburger menu on the main site, which means I can place some more options and important info in there.
So now you understand my 3-step framework to launch your website, here is a mindset recap:
Don’t spare your time, do a proper soft launch and iron out any glitches.
Have a list of assumptions what can go wrong and test your site against that list.
Reap the benefits of early visitor data.
Lesson 3+1
Asking for and receiving personal feedbacks
Besides using analytics from the first day, I kept space open to receive personal feedback. They are golden!
What general remarks you can get on your site with the help of friends and family?
What you really, truly can test on them is that if your site resonates with you, as the owner of the business. They are not your potential customers, and you have to evaluate every feedback coming from people you won’t work with, until you learn what people who you’ll actually work with, think.
I missed my cookies
One of my friends called to tell me that he didn’t see a cookie consent banner or pop-up on the site when he entered. I was so grateful he spotted this.
(Side note: GDPR law requires businesses to protect the personal data and privacy of EU citizens for transactions (including website visits) that occur within EU member states. To comply with this rule, I have to make sure that the visitors of my website know that their visit is logged and have a choice of accepting this or not. = this means the cookie consent.)
The coin dropped immediately: although I assumed that this is automatically taken care of by Squarespace, my assumption was wrong, I had to activate the banner myself. Now my visitors get notified that there is a high chance of cookies on my site and that it’s not a bad thing. Cookies make life better, right?
Website imagery matters
Another friend sent me a note on my choice of photographs on the site and that he thinks it would be better to illustrate a wider range of my services and not only the gastronomic side. More plants, more nature, vegetables, trees, you name it.
In order to launch my site within a reasonable time frame (and not sitting on it for weeks!), I made the choice of using pictures I already had at hand.
He was absolutely on point and also validated my plan of getting professional photographs taken of me in more diverse settings. What he did not know, is that I already arranged a shooting that was coming up later that month, yay!
So, what did I do next?
The ultimate lesson for me, looking at the data coming back from Google Analytics and Hotjar, was that I had to work on the site design to make my actual value proposition (description of my services) be seen.
New primary navigation link to my Services
Creating a new primary navigation for the Services and link this menu to a page where I describe my services is a good start. This’ll improve the chance that a visitor finds my Services on the site and can have a look easily, within a reasonable time.
Visual design: tailored imagery and less copy
A good balance between my written and visual content on the site is also something to consider. It’s a bigger investment both in time and in money, however, a new and improved imagery will help enormously.
Optimising uploaded images
Lastly, making the changes that PageSpeed shed a light on (changing image size and format, review code injections in template) will improve my friendship with Google’s rankings for sure and provide a seamless experience to my visitors.