Making a WP site [07] Visual and functional design

In this post I’ll explain how visual design and functionality of a website were created. Other posts in this series:

Contents:

Introduction – task
Determining arranged visual design and functionality
The choice of tools
BikeGremlin website redesign process

1. Introduction – task

This introductory part will be rather long. I think topics discussed here are important, because it doesn’t matter if you work quickly and nicely, or slowly and poorly, if you are doing the wrong thing. In other words – strategic planning in terms of brand name and on-line presence should proceed the design and making of a website (at least in my opinion, which is based on my experience). Also, chapters are listed at the beginning (in the contents section) so you can skip to the parts that are of interest. Now, let’s begin:

The main reason for writing this is for my own personal reminder and reference. It will most likely get updated over time. What problems (or, to put it in a more Linkedin-friendly way – “challenges”) I faced and how I solved them. Most things written here as claims/statements should be read as: “in my opinion, to the best of my knowledge, based on my experience” – not as “this is indisputably so”.

A friend wanted a new website for his business, so they consulted me about it. What is it about? He made Room Escape game, had it for a few years now. It will be explained in more detail on his website, but briefly: you are locked in a room (with up to 4 friends) and need to solve some puzzles in order to find a way out – with a 60 minute time limit. There’s a lot to it, I find it very fun and cool, but those are the basics.

First thing concerning this business is the brand name: “4 Rooms” (or “4 Sobe” in Serbian). It associates to some hostel, or a hotel, not a Room Escape brand. Yes, I know of that cult movie, love it, and I know that the original plan has been to have four different escape rooms hosted. Still, I think that most “normal” people would not easily get it and if/when they see the brand name, even the logo, it will not be clear enough.

Hence, my first advice was to re-brand, after having made that mistake at the start (over 5 years ago). This advice was not accepted.

Next was getting familiar with the way the business runs now. How it is organized. Current marketing strategy. Income, expenditure… Knowing this is important in order to give good advice and figure out how to help a business’s on-line presence. Not strictly related to this project: ways and software used for storing stock information, current automation solutions etc. are a very important factor when choosing how to design an e-shop. Same goes for local, and/or global legislation – depending on the market (for example: in Serbia, you can’t charge Serbian customers using PayPal – it is illegal!?!).

After taking a good look, my conclusion was that the current website is good for now, because there are more serious problems to be tackled. This advice too was not accepted, at least not to a sufficient extent. Starting any business can be hard and exhausting – as I have experienced first hand when starting my Bike Gremlin bicycle workshop. But if you don’t solve the problems, they will just pile up.

Brief digression: It is a lot easier when a company has a well functioning system and organization. Preferably compatible with on-line business running, before implementing any e-business solutions. Of course, a company can also adapt according to the implementation of the chosen e-business model – best done step by step, introducing one e-business function after another. But it is difficult to run e-business if a company’s off-line business and organization isn’t compatible and ready for that.

Bottom line – it stayed at the original request to make a new website. With a new domain – using the old one as the landing page for this, and some other projects.

Throughout my career, not rarely enough do people take my suggestions, but only partially – which often results in them being completely pointless, if not even detrimental, when implemented in such “partial” way. This is not an example of one such case, but think it is worth mentioning. If you hire an expert, it might be a good idea to consult them about your final, chosen way of implementation. Reply “it’s better to do nothing in that case” may not always be pure vanity, it might also be a reasonable expert advice to be considered.

For the website design, from the start, we included our mutual friend, Goran. I like working with him, we have a good mutual understanding, and, unlike me, he knows Java Script, CSS and PHP rather well – while my experience is important for the WordPress itself, themes, plugins, as well as hosting configuration, security, DNS, and e-mails. The two of us combined make a decent beginner website developer. 🙂

2. Determining arranged visual design and functionality

As far as website’s and brand’s visual design is concerned, the owner hired a professional designer. Design they chose is a bit too dark in my opinion, but I am far from the most gifted visual designer, so wouldn’t take myself too seriously when it comes to this.

At that, by the time I’m writing this, neither Goran, nor I, have a clear vision how to translate the given visual design into an interactive, “clickable” form, so that it looks good both on smaller / larger screens, and on smartphones and tablets. Attributing this to our inexperience and lack of knowledge, for the time being.

For functionality, the following is required:

Display of brand information and products – that is the escape rooms.
On-line booking an escape room, choosing from the available free terms.
Newsletter.
Blog section – to add various articles later.
Website should be in English and Serbian. Multilingual.

3. The choice of tools

For many things there is no “best” solution, i.e. the best solution is one that is closest to the optimal. I’ll explain this with a practical example: a WordPress website is a lot slower than a pure HTML website, but WordPress allows for faster and easier content additions, edits etc. So the choice of tools, and website’s design, depend on the intended use, desired functionality, budget, preferences etc. Which all affects the choice of hosting as well.

In this case, we have the following parameters:

Budget is: “as little as possible”.
Expected number of daily visitors is below 1000.
Desired design is “advanced”, “exotic”.

It is necessary to weigh the pros and cons of each available solution against one’s knowledge, experience, requirements and established parameters. We decided to go with the following:

Good quality shared hosting environment.
WordPress as the basis for website design. With all its pros and cons.
Elementor, the free version, as the basis for visual design, with all the edits made “manually” (decided against making our own theme from scratch).
Using free pre-made plugins for newsletter and booking.

Domain was registered using Porkbun. Didn’t get to transfer the registration to the owner, which is not the way I would recommend things to be done – the website owner should have the domain registered to their name. I would certainly sleep better knowing that, in case something happens to me, the owner has full control over their domain.

For hosting we chose HostMantis, with a London based server, using one account from the reseller hosting package I rent there.

The provider makes daily off-site backups, and for a reserve remote backup copy we chose Backblaze B2 storage, as a cheap and reliable option. For the backup automatization, we are using JetBackup. It is included in HostMantis reseller hosting package price, which is great.

We used my existing account with MXroute for email solution, as a tried and tested good, reliable way to send and receive emails, which is important for any kind of on-line business. In a separate post I wrote about the pros and cons of hosted email services.

Website basis is the current WordPress version 5.4.1. (at the moment of writing this text).

Achieving the desired visual design using the free version of Elementor plugin, with some additional CSS and Java Script.

For the newsletter, we are using the plugin called Newsletter. 🙂 In a separate post I explained how to create mailing lists with WordPress.

For booking we chose the free plugin Easy Appointments. It is a tried and tested solution.

Multilingualism is implemented using the free version of Polylang plugin. When I find the time, I will write about the pros and cons of various multilingual website solutions.

I will be adding info to this post, as the development phases are finished and tested, writing down what worked and how.

4. BikeGremlin website redesign process

I’ve made newer articles showing and explaining the process of my website redesign: