Another Level (Website Refresh)

The Preamble

I have worked with this company and off for a few years now. We recently spoke about a bit of a product refresh, they operate in a highly competetive space, as do most of us I suppose, but they have some ideas on how they can continue to build on Brand Awareness in the next few months. They don’t have a design in mind, as such, and I am not a designer, normally I work with Jay on things like this, but I think we’re going to try and build something modern and fresh but relying on stock designs. Let’s see how far we get.

Starting Place

The current website is a simple HTML5 job, with CSS Grid keeping things aligned:

We basically want the same information, but something that looks a bit fresher. I also believe we will be looking at some customer quotes to help build trust and set expectations in the brand experience that this little family based business is trying to show.

Modern Templates

As I am not a designer, I am looking for a starting place, something to get the ball rolling, I can then throw the clients information in there and seek revision approval or rejection and build from there. I’m going to start here, this site provides a bunch of example sites to get you up and running fast, I think the first draft will be something like this:

I’m initially going to leave all of the colours as they are, but I will add the company logo and remove the Sign Up / Login links, I’ll then shift my focus to the lower images, instead using photos that they have previously provided. That said, I will also be asking for some newer and ideally cleaner looking images to support this new website.

Too Colourful

The client rejected the first idea as being a bit too colourful, I asked if we can just tone down the colours a bit, but instead they’d like another idea entirely. I’m sticking with the Bootstrap templates, I’m not a designer, the folks that offered up thos templates usually are so they are better at finding the visual clicks than I am. Let’s offer up this one:

We’re going to stick with the Bootstrap icons for speed, not speed of site, but speed to get the demo in front of the client, so I am going to look for icons that sort of relate to the content in question:

The client has provided several images, they don’t really have an idea on how or where I should use them, they don’t even want me to use them all, it’s kind of like a catalogue for me to select a few and use on the page:

FaceBook is a primary source of business for this client, they use that platform to constantly push what they’re working on, it is a good way to keep the brand in focus I suppose, they get a lot of repeat business and their posts get shared and other potential customers see those posts and it all works nicely for them. As a result, and as you would expect, they want a FaceBook link. Additionally, they are starting to get into the TikTok thing, so I was asked to include a link for that as well.

In both cases, the standard Bootstrap icon set had me covered. I decided to post a link to my personal website as well with the clients agreement, I used an SVG for my own icon, the Blue needs a bit of work and I like the red as a splash of colour in the footer:

So another quick 15 minutes on a video call, sharing my screen to talk through what we have and how it looks in Mobile layout etc, the client is pretty pleased and asked me to push it out as early as possible. There are a couple of tweeks to be made, but the client is keen to get this out, get the Google Tag in place and then refine those changes after they’ve put together the rest of their spring campaign (whatever that entails):

If you want to stop by, maybe you’re in that part of the world and need some scrap metal removing, or maybe you just want to take a look, check out AnotherLevel.company.