As part of my journey in building HumanPlaylistr I decided to redesign my website. This took longer and was harder to achieve than I expected but I was determined to do it myself. If you visited prior to the redesign, here’s a bit of the back story. It’s for interest in the journey, especially if you’re a small business owner doing similar things. Future posts will get back to the music!
How it started.
I’ve always enjoyed editing videos, specifically in Adobe After Effects and Adobe Premiere Pro. I last created a promotional video in 2009 at a previous job and since then I’ve had no cause, or time, to create such videos. I remembered it could be time consuming to prepare and render scenes.
Having purchased quite a powerful workstation laptop to launch HumanPlaylistr, I decided to download the latest version of both on a trial licence to see how they had evolved. The subscription model for software is now ubiquitous but I remember in 2009 keeping the epic CS3 installation box, full of DVDs on my shelf. It’s a much better experience these days and the 7 day fully functional trial exceeded my expectations. I created videos, idents and other videos in a frenzy of activity, sometimes working in the evening so rendering could take place overnight.
I already owned Adobe Premiere Elements and found this lightweight video editor was actually enough to piece the After Effects renders together. I have experienced a bug whereby renders done whilst my laptop is on battery power, even with performance set to maximum, can occasionally drop frames, causing a nasty glitch in the video. I can’t pinpoint this issue residing with Premiere Elements, nVidia drivers or power management in my laptop. Renders in After Effects performed on battery power are only for those who enjoy slow renders and a battery life of 45 minutes at full tilt (although they do work).
The main purpose for this was to create a promotional video with an overview of HumanPlaylistr, and attempt to convey some of the enjoyment I get from playlisting. Of course, it couldn’t be silent – I found a good music library where the promotional licence fee wasn’t ruinous and set about creating my video.
Whilst making the video I realised my subconscious had brought some of the aesthetic of the demo scene to the party. Demos were the pinnacle of graphic arts for me in the 1990s and early 2000s. The challenge was to push the graphics capability of your chosen hardware to the limit and there were many groups comprising coders, artists and musicians that I followed. I remember being amazed when a musician I followed, Necros of the group Five Musicians, was picked up for some of the music used in Unreal, and aspired to follow their aesthetic.
The After Effects trial licence expired and I was left with some video footage (now on my YouTube channel and viewable across this site).
What to do next?
Video editing is not a core product offering. I’d really enjoyed making the videos but I couldn’t decide if I needed to pay the subscription fee for Creative Cloud (you can subscribe to just one product, but you really need Adobe Media Encoder to make the most of After Effects) or whether I should realise value in existing investments.
Should I continue making videos, or go through the tricky task of updating my website? I asked my friends and held a poll on Twitter. I had a feeling what the answer would be; I enjoyed making the videos but ultimately the website was letting me down. I’d set it up in a hurry for as low-cost as possible using a free theme on a personal WordPress account and paid the minimum amount to remove adverts.
My friends agreed, and the twitter poll confirmed it. Something had to be done about the website but I’m not a website designer as alluded to in a previous post It’s Not As Easy As It Looks. I’d already worked out that the homepage wasn’t satisfactory and a friend confirmed this by my offering not jumping out and being obvious.
It would take more than a coat of paint to fix this.
Rebranding the logo.
I went back to the beginning. During video rendering I’d found that the rough-edged roundel that I’d clung onto as injecting a bit of character into my logo was making life difficult. It was much easier to use the smooth roundel – simply a circle with a triangle in it. I’d already designed it for the embroidered branded clothing out of necessity, and mindful of the future I’d made the registered trademark figure as simple as possible and used the smooth roundel. The rough-edged roundel was used under licence and couldn’t be used in the trademark as part of the licence conditions, whereas the circle and triangle were simply drawn and therefore could be used.
The smooth roundel had already started creeping into branded artwork and I made the decision to sharpen up the logo again. The rough-edged roundel has done good service and helped me form the HumanPlaylistr brand. Farewell, old friend. I also took the opportunity to make the background image have a sleeker, higher contrast and more luxurious feel. If you know Bang and Olufsen equipment, you’ll understand why I used it.
Updating the artwork.
Now I’d made the decision to change the logo, and included it in the videos (Easter Egg: there’s a couple of frames of the old logo in one of the videos…) I had no choice but to come up with a new visual language for the Spotify playlist covers. I spent a long time trying to decide how best to use the new logo, and in the end decided not to use it.
As I said, I’m no designer.
I just couldn’t get it to look elegant. I happened upon a slightly different roundel with a gap in the triangle and circle and both myself and my wife preferred it when on a playlist cover. It’s too difficult (read: expensive) to change the registered trademark, and embroidered clothing requires the traditional smooth roundel, but I figured it might work on the playlist covers. I was quite happy with the images I’d used in the background, so set about changing all the playlist covers.
Of course, I then needed to update all the wallpapers, which is a task I actually completed last after I’d completed all artwork on the website.
So the time had come to knuckle down and actually redesign the website.
Where to start?
I was generally happy with the structure of the website but my friends were right; something was missing. WordPress is great (although, like any site that has visual editing it has faults and quirks) and the free templates were OK but some of them made it look like I sold printer cartridges. I’ve nothing against printer cartridge merchants but I’m trying to sell a creative service and my website should somehow invite you into my world and showcase my product — my playlists, and how I can work with customers. Music Consultancy is a relatively easy idea to sell once the seed of improved customer experience is planted. Planting that seed, and proving my worth as a Music Consultant, is actually quite difficult. Where is the value in what I do? How do I communicate what I offer?
We’ve come a long way since Adobe (or indeed Macromedia) Flash websites ruled the internet. A website should be fast to load, visually engaging, SEO friendly and I should be able to retrieve some metrics. There are lots of design agencies willing to help for a fee but this time not only did I want to save a bit of money, I wanted to see what I was capable of myself.
My HTML and CSS skills were rusty. I first learned HTML some 24 years ago and had briefly learned some CSS when I had to. I knew CSS had evolved and would be the key to a better website but I was overwhelmed when I made the first few attempts on my own. Unwilling to hire developers, I happened to notice in my media subscription service (that’s one expense that is essential) that they operated a marketplace for things like WordPress themes. I’d toyed with the idea of a premium WordPress theme but wasn’t bowled over by them, or at least bowled over enough to stump up the extra hosting fees to use them.
Imagine my delight when I found a theme that I thought I could work with, the key selling points being that it was easy to work with and came with free support. Then imagine my dismay as I realised that to use this theme to its full advantage I was going to have to pony up the cash to upgrade my WordPress plan. I was on the verge of migrating from WordPress.com into a third party WordPress host or WordPress.org when I happened upon a special offer from WordPress. A substantial discount was being offered and negated the cost of moving, and I willingly applied my voucher code at checkout.
Finding the right theme.
I’m not going to give away all my design secrets(!) but the theme I use is quite easy to find and recognisable. However, I’ve managed to tweak it to fit my purposes and had some input from the developers when I’ve needed some custom CSS and I can’t quite format it myself. They know their product and sometimes they return custom CSS within an hour of my request. I don’t think there’s anything wrong with using a pre-built theme — web design isn’t a core product either — but being handy with CSS has allowed me to personalise the look and feel of the website. Besides, I’m already using WordPress as a CMS and there’s nothing to be gained by me spending forever developing a website.
‘Dark mode’ was a big thing for web design in 2020. I think this stemmed from the massive increase in screen time for everyone, and the general ease of switching theme in operating systems, applications, browsers and the infuriating Microsoft Teams. I’m not sure it will continue to be as big, but since my original design had been on dark blue backgrounds, I continued. You don’t see too many dark-themed websites in general every day browsing, mainly because they can be awkward to read especially if you’re a frequent visitor. However, I think it’s a good fit for a creative service website and hey, it’s a theme, so I can easily change the colour scheme if I need to with a few clicks.
Theme purchased, WordPress hosting account upgraded and with a few videos to hand, I commenced redeveloping my website. I gave myself two weeks to complete it. That was ambitious. In the corporate world it would be seen as an aggressive deadline.
Ambition.
Top Gear used to trade on the phrase “ambitious but rubbish.” I certainly didn’t want my website to be rubbish, but I quickly realised I’d been a bit ambitious giving myself only two weeks to complete the redevelopment. I could only work on the site during evenings and weekends so I’d only given myself about 40-50 hours to complete the redevelopment and that was if I worked flat out in every spare moment.
The goal? To make a website that’s visually engaging, contains easy access to the playlists, provides clear information to customers, promotes my mission, gives space for the blog, connects my social media channels….
The list of tasks to complete grew and grew until I had to stop and map out what I was doing. I needed a plan to work as efficiently as possible. I use Trello for customer plan boards and rigged one up for myself. I’m a long term user of Trello, although the free offering is starting to diminish as the product evolves to compete with Asana and Monday.com — I’m a big fan of Monday.com but it is expensive.
Plans mapped, tasks categorised, I set about methodically working through each page.
The build.
After deciding on a visual language I set about doing the hard work, methodically preparing stock videos and images for each page. I then reviewed the content on each page and migrated the pages to the new theme template. This was probably the hardest and most gruelling aspect and took closer to four weeks to complete. I’d originally written the website in a very loose and informal style, which I retain in the blog posts. The pages with playlists and commercial offerings are still personal but rewritten to highlight where I believe I can help,
Every evening I’d decide where I wanted to get to and tick off completed tasks as I went along. Of course there were bumps in the road: misaligned artwork, stock video that wouldn’t import into video editors (note this useful tool at https://cloudconvert.com/mov-to-mp4), CSS that needed adjusting, poorly placed line breaks in the hero sections when viewed on mobile devices (an ongoing piece of work on the snag list) and suddenly deciding to amalgamate content for clarity. Working with https://www.deadlinkchecker.com/ I managed to keep track of 1,148 links and resolve the vast majority of issues.
70,000+ lines of code later.
After sustained effort, checking each element on desktop and mobile devices, I finally published the last page – About. I’d left this page until last as I found it the hardest to write. How to succinctly put across my approach, commitment and expertise as a new business that would attract new customers was a difficult task.
The site is currently around 70,000 lines of code and content and I’m quite proud of the result. There are still some rough edges that could do with some attention and although I’ve built some of the features that improve search engine rankings and enable slick feature images to appear when shared on social media, there is still a ton of stuff to do in the background.
So I decided to give myself a couple of weeks off from web design. Each morning when I get up I put on all social media a different part of the website and link to the relevant content. I hope this keeps my content refreshed in those channels and gives me time back in the evenings and also time to enjoy my website.
I really hope it’s achieved those goals: visually engaging, contains easy access to the playlists, provides clear information to customers, promotes my mission, gives space for the blog, connects my social media channels and ultimately gives insight into my playlists and what I can do.
I’m still new, still learning and still full of enthusiasm to help anyone with their playlisting needs. I hope to hear from you.
