Mobile Usability

Let’s talk about Mobile Usability

By Design, Development, featuredNo Comments

Technology, you’re either sick of it or excited by it. Mobiles have become one of the most infamous things about humanity. Since their invention has enabled the world to connect as one.

Mobile phones have shaped the digital world immensely and now, mobile responsive websites rule the Google search results.

In recent studies, researchers found an important factor that many always miss – how the user holds their phone. Yes, it’s all great creating a great user experience but do we really do it for everyone?

People have adapted to the mobile phone profusely, with users handling the device differently to maximise comfort and readability.


In this blog, we’ll be discussing which audiences prefer which type of mobile responsive designs. Websites need a mobile view in order to rank effectively on Google and provide a seamless user journey to its users. Have you provided the best UX for the type of customer you sell to? Find out.

49% of mobile users operate the device one-handed.

That’s correct, the majority of mobile users today use their device, one-handed. However, what type of customers would you expect to find in this group?

Firstly, you can expect to find your teenagers and tweens in this quartile. The younger generation has adapted to the quick and effortless use of technology, as they’re the most common users of it today.

If your target customer is that of a younger persona, then it’s key that you research their behavioural patterns when it comes down to mobile responsive design.

Almost half of all mobile users result in using one hand to navigate Google and websites. If you or your web designers are optimising your website, it’s efficient for you to follow the diagram shown.

A large percentage of young users will only use a small section of the mobile screen to scroll; this forms from the bottom left-hand corner into the middle.

hold phones

Mobile responsive websites are predominantly designed for one-handed users.

The green area is the section that is easiest to access. This area is where you should include your CTA (call to action) as it’ll be much easier for the user to reach them. Due to the ease of access, this will prompt them to take action.

Next, you have the orange area, which is the majority of the top of the mobile screen and a small section in the right-hand area. It would be most suitable to include your text or interactive elements here, as the user can still use these areas.

There is a small ‘unusable’ area of the phone at the very bottom of the phone. This is where you should keep other imagery, any elements that the users don’t have to interact with.

You can expect to find your 18-30-year-olds within this 49%. Therefore if you’re in the industry of technology, fashion or social media – you should definitely consider optimising your website for this particular type of mobile responsive design.

36% cradle their phone.

hands holding phone

Within this gap, you can expect to find your 35-55-year-olds, most to which will commit to using one hand to support the phone and the other to navigate.

These mobile users have access to the majority of the mobile screen, especially the middle section. The top left hand and bottom right corners are the least accessible, however, you have most of the scene to work with.

Here you will find your more mature demographics, therefore a lot of industries will need to consider this specific UX design.

You get the most of the screen by optimising your website for cradling phone users, thus accommodating the mature demographic.

Since the majority of the centre is easy to use, it would be easy for you to be innovative with your CTAs and scrolling interactions.

using phone

15% use two hands to scroll

phone holding

A small percentage of mobile users result in using both hands to navigate their mobile phone. This is a small population, however, in this group, you will find over 55s and people who aren’t as familiar with touchscreen mobile phones.

In this category, the bottom half of the mobile phone is the easiest area to use, therefore you should put the most actionable elements in this section. It becomes increasingly difficult to use the site as we travel up the screen.

The older generation is much more patient with technology and therefore will use the majority of the bottom screen and navigate with both hands to ensure smooth movement throughout.

What about left-handers when it comes down to UX design?

All of these percentages apply to the right-handed population however, each of these diagrams is the opposite if they are left-handed. However since 5% of the world’s population is left-handed, it is more advised to optimise your site for right-handed customers. UX design is all about appealing to the general population and providing seamless interactions online.

thumb zone mapping

94% of people hold their phone portrait.

holding mobile

It’s important that if anything, you optimise your site for a portrait perspective rather than landscape. People will use their thumb to navigate most of their phone, remaining in the middle of the screen for the best comfort. It’s best to keep away from using the top and bottom half of the phone, as most mobile users will consider this poor user experience.

6% hold their phone landscape.

using mobile

It’s rare but possible. Some mobile users access their phone for landscape view, using both of their thumbs to navigate. Businesses who are using apps, games or offering a read should consider optimising their site for a landscape perspective. It can be more costly and time-consuming however the end result will benefit your customer. A happy customer means a much more likely sale.

Sometimes people use the entire screen.

Every so often, you will find the minority of users who use a mobile, very precisely.  These people cradle the phone in one hand and use their forefinger to scroll and navigate.

mobile use

These users use all areas of the touch screen, everything is within easy access. This allows for websites to implement elements freely without interactive content being in inaccessible areas. The more screen you have to work with, the easier the mobile responsive websites are to generate.

As you can see, there are many factors to create mobile responsive websites.

As a business owner, you know your preferred customer better than anyone; you know exactly what kind of person you want to walk through your door.

Using that knowledge, search this blog to find the age demographic you want to market towards. There are so many different mobile users, each of which uses their device differently from the other.

If anything, what we recommend as UX designers, is optimising your website predominantly for portrait users and centralising your actionable items.

I know that many people will consider mobile optimisation time consuming and pointless but that’s far from the case. You want to deliver a website that provides a clear and thorough customer journey and if you haven’t provided one, they may go elsewhere.

The 8 Mistakes E-commerce Websites Make (infographic)

By Development, E-commerceNo Comments

There are A LOT of things to consider when setting up an online business, especially if that business is to take payments and send orders to customers. So what e-commerce mistakes should you avoid?

Customers expect more from an online shop than they do information and brochure sites. If anything people look for authority, trust and easy navigation. But, there are 8 e-commerce mistakes that most online shops make that can drive their shoppers crazy (in a wrong way).

We’re sharing some key e-commerce fails that you’ll need to avoid to keep your customers happy and earn you more sales in the long run.

These are only 8 e-commerce mistakes, but they’re some of the most important to remember. We can easily miss these mistakes, but you won’t get anywhere without correcting them.

However, just remember if you’re a new online shop, it will take time to get found on Google, so while you wait you should seek a marketing strategy. Marketing is a commitment, but it guarantees a faster way to get awareness from potential customers.

5 Tips For A Better Mobile Experience On Your Site

By Design, DevelopmentNo Comments

The mobile phone should be everyone’s biggest target market.

Your average individual picks up their mobile 80 times a day, statistics show. A third of a person’s walking is spent looking down at their phone screen. Think about your routine, do you switch on your phone as soon as you wake? Eating breakfast, there’s the likelihood that you will be scrolling through the news.

As more and more people start to introduce mobile phones into their day to day tasks, it’s important that your website remains UX responsive. An incomprehensible article that isn’t designed for a small screen isn’t going to be of interest in comparison to a mobile-optimised site.

We all may love a book now and then, but it’s undeniable how accessible and easy-to-use a mobile phone can be. From flipping through pages to scrolling down an article – each will offer different experiences. The font, layout and design play an essential role in how compelling your content is. However, there are specific rules and regulations with mobile sites, unlike the desktop view. Throughout this blog, you can find the most useful tips on ensuring your website can be as successful as it can be in 2019.

Make sure your font-size is distinguishable

An essential factor to the performance of your web pages is the font you present to your customer. If your text is too small, this can cause an eye-straining experience for your users. However, if your text is too big, this will be just as annoying.

You need to ensure that your audience’s read is comfortable and effortless. Challenge your competitors by making your blog the easiest to navigate through while offering the most engagement and information. The best way to steal customers from your competition is to provide the same thing, but 10x the quality.

Google Developers recommend that your website has a base font of 16 CSS pixels. The font that you’re using and the device that is being used at that time determine the best font size for your site. In this case, we are discussing mobile phone users, and we already know that your web pages will need to fit onto that minimalistic screen. You’ll need to be considerate of your mobile users when you come to choose the content size, as they’ll need more assistance than desktop users.

Consider the style of your text too

It’s all good having the perfect size font, but what good is it if you’ve gone over the top in italics? The content should be easy to interpret and read from first glance. On a mobile screen, people are already straining their eyes; however, your hard-to-read font could be contributing to that even more.

Bright blue text that blends in with a white background isn’t ideal, especially if your audience is viewing your website from their sunny garden patio. If you aren’t providing an excellent mobile-viewing experience, then your competitors will come out above you. Realise the significance of a font can have on different devices, choose a font that fits your brand yet can be easily distinguished.

Choose a suitable background

Your website’s background should support your font rather than distract from it. Fancy imagery, designs and elusive colours may look amazing on a desktop but can turn into a nightmare experience for mobile users. People won’t read your content if it’s bothersome. Fight the temptation to fit as much as you can on your website, instead of spread the images and content out equally; we don’t want to confuse our customers.

White space is something to be careful with also. It’s always good to ensure you leave the right amount of space between your paragraphs. However, it can be quite mundane to leave too many areas blank on your website. When it comes to mobile-optimisation, it’s important to think about how small that screen will be. Also, you need to think about how easy it is to fit your content on there.

Paragraphing has always been an essential tool for copywriters; it helps customers to take a ‘breather’ while moving through the text. White space eliminates distraction, which will lead the user to interact with what you have to say before anything else. A neat site is an impressive sit, a lot of images and pretty backgrounds won’t make you any better than other websites.

Make sure your website is UX responsive

Does your website look identical on a desktop, mobile and tablet? Well, it shouldn’t. Since Google announced it’s mobile-friendly update, your site must be mobile ready for it to rank anywhere. Your website should prepare to adapt to any device and ensure that it’s easy to navigate whether the user is on their laptop or smartphone. If people have a problem or need something, nowadays all we do is search Google for a solution from our mobile device.

Lights not working? You pick up your mobile and look for an electrician. Make sure your website stands out by offering the best mobile experience. Using a web design company is one of the most efficient ways to ensure that your site includes a seamless mobile responsive design. Web designers have the right tools and experience to carry out such complexities whereas doing this yourself could be fairly tricky and risky. It’s also a cost-effective solution to sort your website out for mobile optimisation professionally than to lose customers through poor mobile design.

Unclutter your website

Busy web pages can create a dire reading experience for online users, especially the mobile audience. Attempting to read an article on a page littered with opt-informs and advertisements makes for a difficult read. However, if you carefully position your content and images in a way that appears to go together, your visitors will be more likely to stay.

If visitors keep leaving your page after landing on it, this can create a bounce, and the more bounces your website gets, the lower your site will rank on Google. Although the busy website works well from a desktop point of view, the experience won’t be the same on a screen 10x as small. Have you ever had it where you accidentally clicked on an ad while scrolling because it got in the way? Yeah, we don’t want to be that website as we’ll scare our customers off.

Now it’s your turn:

Does your website look the best it could be from a mobile device? Can you easily read your content? Do the images align correctly? Well, use our top tips and watch your bounce rate start to drop. Don’t waste your time and money on a stunning new website if you haven’t the UX design to match.

A Beginner’s Guide To Duplicate Content

By Development, SEONo Comments

Everything you need to know about repetitive website content.

If you have any idea on copywriting, you will already know duplicate content can penalise a website and affect the SEO ranking. Original content has always been valuable to sites, and this is due to Google’s algorithm admiring the originality.

So, what even is duplicate content?

Basically put, this is content that is plagiaristic or copy that is identical to text elsewhere on your website or others. However, despite the penalisation, there are some types of content that Google doesn’t consider inadequate. This includes print-only versions of the web page or products that are links to different URLs.

As to no surprise, Google’s algorithm isn’t dumb, instead, it is smart enough to recognise duplicate content. Your only option is to create unique and new content each time. If you want to keep your site ranking well in the SERP’s (search engine result pages), then you need to prevent penalisation. Of course, one way to do this is to be original with your copywriting.

How you can find duplicate content?

I understand that not everyone reading this blog may be a copywriting expert. That’s why we have some tools and strategies to help you do this. For one, CopyScape is a useful website that helps people identify duplicate content on their site. This application works by scanning your website for copies of the content and highlighting duplications when found. It’s a simple yet handy identification tool that will help your site prosper.

The reason why Google penalises sites with duplicate content is for two main reasons:

  1. To provide users with the best search experience: Search engines prefer not to show multiple versions of the same content. Therefore compare websites and figure out what the best result is, this then hides other sites with similar content.
  1. Link equity: Instead of all inbound links pointing to a section of content. Links may link to multiple pieces, spreading the equity among the duplicates. Because inbound links are used as a ranking factor, this can impact the search visibility of your content and thus your website.

Siteliner is also an excellent tool for analysing the content of your site. This application will identify areas of the text that have been reproduced elsewhere. However, if you can’t access a content-checker tool, then you can look for your content yourself manually on the Google search engine. Here you can copy and paste in up to 32 words worth of your content word-for-word and see what similar results come up. Also, if you plan on using material from another supplier, it’s essential that you re-write the content into your own words; otherwise Google will detect your efforts.

Fixing the duplicate content on your website

There are several ways to fix your SEO issues that have come from your duplicate content, so let’s discuss them:

301 redirects and rel=’’canonical’’ tags

Implementing 301 redirects is an effective method for fixing your duplicate content. This involves choosing a URL and the sending the traffic from the other URLs which have the duplicate content to the preferred 301 redirects. This method makes sure that your site is taken to the correct page and it also means that pages in your site aren’t competing with another website. If you know SEO, then you will know what I mean when I say to use the rel’=’’canonical’’ tag to avoid duplicate content.

Authoritative content

The most powerful tool for avoiding duplicate content is developing unique copy that you can’t find elsewhere. You can do this by carefully planning your audience and focus then shaping your material around this. I’m not even talking about your articles and website, but also your video content should have some originality to stand out above the crowd and avoid Google’s penalisation.

Hopefully, we’ve given you the gist of duplicate content:

Google has a lot of rules and regulations for websites, and we can’t really blame it after thousands are added each week. So, to keep law and order on Google, the algorithm will penalise your site if you don’t abide. If you find any duplicate content on your website, make sure you attend to this as soon as possible.

The algorithm, however, can also detect when duplicate content is accidental, so don’t panic if you spot such copy and can’t make an instant change to this. Instead, identify the problem, create original text and make the alterations when you can. Since content is the king ranking factors of websites, it’s important to follow this advice and take a look into your website as soon as possible.

Thinking Of Starting Up A Website? Follow Our Step-by-Step Guide

By Business, Development, MarketingNo Comments

Starting your own business can be scary, let alone moving everything online.

Allow us to simplify everything for you.

We perceive ourselves as unique to the web design and digital marketing industry as we prioritise one thing – our relationship with the customer.

That is why we have decided to help out the people who we aren’t yet familiar with but would love to work alongside.

Yes, this guide is for the courageous business owners who have decided it’s time to get their business off the ground by joining the World Wide Web.

However I understand, for newbies, the Internet is a pile of advice and strategies, so how would anyone know what’s right or wrong? Read this and you’ll find out.

After years of adapting to ins and outs of the digital industry, we want to assist you in making the right decisions for your brand when it comes to your website, marketing and social media.

So, let’s not bore you any longer with the introduction. Instead, let’s get your business onto the right path towards successful brand recognition.

1. Have you got a design brief?

Before you do anything, I can’t stress how important it is to create a design brief.

A design brief will tell your web design company precisely what kind of a website you are looking for and how you want your business to be viewed by your consumers.

I get it though, where do you even start with a design brief? Well, that’s easy just start by bullet pointing USP (unique selling points), your brand colours and the persona you prefer.

Your brief can be detailed or simple; it’s however clued up you are about how you want your website to look. However, some web designers will provide bespoke designs.

For example, a customer can come to us and say that they have utterly no idea what they want their website to look like and that would be no problem.

From there we would only ask a few details and create a layout that is entirely unique to their business, no website of ours will ever look identical.

So, let’s go over what you need to consider:

What does your business do?
What are you trying to achieve through your website?
What’s your persona? (Who is your customer?)
Do you have content and pictures or will the agency provide these?
Do you have any specifications for your website?
What is your budget?

All of these points will help towards the design process of your website, resulting in accuracy and a quicker time for completion.

However as I mentioned, this isn’t mandatory; instead, your web designer can talk you through what they recommend, and you can add or subtract from their opinion.

2. Be careful when choosing a web designer

Okay, we won’t be biased here (well try not to) but you need to find a web design company that you are comfortable with.

Think about it; these designers will be with you from the start to the very end of your website; therefore you need to consider if they’re worth your time carefully.

The key things you need to remember is that if you’re looking for low prices, the website and customer service will quite certainly be inadequate. You can usually tell that a company is only interested in the money when they are willing to give you a quote over the phone.

I know you’re eager for a price on your website, however, be wary of companies who don’t hesitate to throw a price at you over the phone without getting to know your business.

Geek Designs ensure we achieve a detailed memo of what the customer is looking for, ensuring we cover everything, including researching their services/products before providing the quote.

You can tell if a company cares about your business depending on how much they want to know about your brand and how you aim to improve its presence.

You may want to research your web designers; this could include checking testimonials on their website, Google reviews and Tripadvisor opinions.

It’s more than essential to leave your business in the hands of a trustworthy company who provides the right quote for what you need, not the cheapest.

But you also need to make sure the company isn’t charging you too much, as this can be a common problem.

3. Have you got a marketing plan?

Google Adwords, SEO pages, PPC campaigns – all of that confusing stuff. A marketing plan will help significantly towards the success of your business in regards to marketing.

Marketing your business will only be as successful as you want it to be. Paying little will contribute to a negative ROI, but then so can spending too much.

This is where you need professional guidance, but then that’s just my best recommendation, you can still give it a go yourself.

However, if you are, you have to watch out for several factors that could impact the performance of your marketing. For one your Google Adwords need to lead to a useful ‘sales page’ that makes the website visitor want to stay.

The same works with PPC and PPI, your website needs to be engaging for your marketing to even work in this scenario.

SEO pages (localised pages) however can be added to make your website appear in different locations, for instance, your site may say that you’re situated in Peterborough, but you could then have a page that comes up under ‘Huntingdon’ which will link to your website.

Marketing is a significant process, and there are so many considerations needed to ensure you make the most of your money. However, it’s always best to consult a professional before making any advancement with this step as you could harm your business.

But most importantly – your website needs to be perfect because you need your customers to stay on your site. If you have too many users looking at your site then immediately falling off then your bounce rate will heighten.

The higher the bounce rate, the more likely that you’ll de-rank on the Google search engine.

4. Social Media

The first question is, have you set up a business page on the right social media?

Whether you have set up a page or haven’t, you need to think about what social platform is worth the time and hassle.

You may think it’ll be useful to have your business on every social media there is, but this will do you more harm than good.

It’s no good if you’re a plasterer and have a Pinterest account or being a lawyer and tweeting what you had for your breakfast. Instead, you’ll need to consider this carefully.

  • LinkedIn – Predominantly professionals, this platform is ideal for any business that wants to develop a brand identity (so any company should use this if I’m honest).
  • Facebook – Focuses on promoting content to the domestic sector, therefore if you’re a home improvements company, hairdressers etc. it will be worthwhile.
  • Instagram – A visual portfolio of work, ideal for businesses of a design nature including interior designers, digital agencies and e-commerce.
  • Twitter – General chitchat platform, ideal for corporate firms to discuss business and news matters.

6. Consider these too

I have guided you through the basics of composing an online presence for your brand; however, it doesn’t stop there.

There are still many other ways to get your business prompted further, for instance, you can pursue brochures, leaflets and vehicle livery to get your online business heard of.

Furthermore, you can also consider logo re-design. You may like your logo; however, if you think it could be refined more effectively, then this is definitely worth considering especially since it’s the identity of your business.

However, if you are stuck in any way, we will help guide you further towards the success of your online empire.

We understand that it can be a headache especially if you are only just looking to get yourself online.

Geek Designs can happily help you get your business heading in the right direction, all to make sure your website shows the real potential of your brand and that your marketing gets you the leads you need to prosper.

So, I hope I have delivered this guide clearly. I know that many things will still be going over your head; however, this is where we can come in a personally speak with you through the process.

If you are looking to get your business kick-started, then why not speak to our friendly team and have us talk you through what you should consider and the best approach to marketing your brand.

8 Funny and Clever 404 Pages

By Design, Development, featuredNo Comments

Is it a result of procrastination? Or pure genius? Take a look at some fabulous 404’s!

dog 404

What’s the fun in perfection? I mean, we all strive for it, but we can’t really expect it every time.

The same situation occurs in the world of websites. But, as you will discover, many web designers have used their flaws to their advantage.

404 pages are our way of making light of server downtime or user error, however, this is also the perfect time for businesses to get creative.

We’re all clued up on 404 pages, right?

In case you don’t understand this language, a 404 page is an HTTP error message. Let me rephrase that again, it’s the page that shows up when the page you were trying to reach can’t be found on a server.

In most cases, this page usually shows its face when the owner has removed the page, changed the URL or the user has spelt the URL incorrectly.

However, we’ve come across some very interesting and comical 404 pages that we think you will enjoy. Let’s take off our serious faces for 3 minutes and admire these great 404 masterpieces.

Our first contestant is a website design and development company based near Bristol.

Now, I can definitely say that this 404 page is something beyond creative.

No doubt we’ve all seen Jurassic Park® at one point in our life (if not, who are you?) But now, thanks to Nouveller’s 404 page, we get to experience some nostalgia.

OK, eye’s too the left, let’s look at this script. This interactive 404 provides you with commands, which once selected, provide different conclusions.

But best of all, if you type in too many incorrect commands, Dennis himself will pop up with the infamous ‘HA HA HA’ accompanied by his wagging finger.

It’s pretty cool; you’ve got to admit.

2. Centresource

Next on our list is an agency dedicated to a comic 404 page with the oddest choice.

So you’re angry that you came across a 404? Why not punch a moose to show your anger? I mean, I’d recommend other remedies to de-stress but each to their own I guess!

Oh, and we can’t miss the typical tourist rep stating that the park is closed, you just can’t help but smirk – well-done CentreSource.

centresource 404

What a capturing way to make someone who doesn’t understand 404 pages, panic.

Blizzard Entertainment decided to become a trickster by dramatically ‘breaking the screen’ when someone mistypes a URL.

There’s no re-direct, instead, the page is solely devoted to an innovative 404 which is sure to get a reaction.

blizzard 404

4. William Csete

404 pages are full of surprises, William Csete’s website is a prime example. Dare to misspell a URL on the site and you will come face to face with ‘the wrong file.’

Yikes indeed! This is a comical way to scare your users into clicking the re-directing call to action.

Nonetheless, this frightful 404 will stick in one’s mind for the day. Effective marketing or nightmare stimulator?

embarrassed 404


The RSPCA has a funny way of covering up the inconvenience of a 404 page…by blaming their dogs!

This heartfelt company never fails to disappoint with all they do for both the dogs and us viewers. It’s quite clever to implement their purpose even in the broken link page.

It’s safe to say if that 404 didn’t pull some heartstrings, then it’s at least going to make you smile!


6. Bleugg

Bluegg has gotten ‘down’ with the younger generation by including the viral ‘screaming goat’ within their 404 pages. It makes sense, I mean we all tend to impersonate the goat perfectly when we misspell a URL and land on the 404. 

The informal yet charismatic landing page is sure to brighten up your day. It’s the most straightforward idea yet but gives such hilarity; I’d raise a hand at saying this was pure genius.

Sometimes, it doesn’t hurt to be a little less creative, instead use general knowledge – it may just pay off better!

bluegg 404

7. The Rolling Stones

For the finale, we give you The Rolling Stones! Back when the band were selling their tour tickets, the marketing team decided to get real cheeky yet cunning.

‘What could we make our 404 pages do?’ How about telling the users that they can’t always get what they want? Well, as cheeky as it is it’s advertising The Rolling Stones single and make the user smile.

I think the marketers behind this landing page really stole the show!

rolling stones 404

8. Carwow

It’s not just cars Carwow is astonishing us with. Their 404 page has even gone the extra mile, and this mileage isn’t something we question.

If you land on their 404 page you’ll be greeted with an interactive driving game where you’ll need to avoid everyday potholes and slow traffic.

Fail? Ah well, Carwow will even trust you enough to give you a real life test drive! Check it out.

Have you come across any smart 404 pages?

These were only 7 of the many fantastic 404 pages you can find on the World Wide Web. We haven’t even mentioned the landing pages that let you play minigames and re-direct you to funny YouTube videos.

If these pages haven’t made you smile then I’m hoping that you will impress us all with your ideas!

Remember, there’s always a silver lining. Don’t let a broken link page become a bounce!

Bespoke CRM Development

By DevelopmentNo Comments

Over the past few weeks/months, I have been working on an internal tool to be used by a prominent network of commercial estate agents. These agents work in partnership with a leading pension provider.

The nature of the relationship is that some pension funds are invested in commercial property, therefore to assess the value of a pension meaningfully, the properties need to be valued. This tool essentially boils down to a CRM, whereby the person issuing the instruction can check the progress at any time, and the two organisations will have a centralised tool for easy sharing of information.

As a developer at Geek Designs, I relish an opportunity to work on a project like this. While I do enjoy doing typical websites for businesses, I enjoy the project management and problem-solving involved in a job of this nature, and it’s nice to have an opportunity to plan out a piece of bespoke software like this, on a macroscopic scale.

I built this tool using WordPress. I did look into using other frameworks, such as Django and Rails, but was won over by WordPress. A large selling point for me was the enormous ecosystem of theme and plugin developers, although in this case, I didn’t use a huge amount of third-party plugins.

However, access to this vast library of added functionality did streamline specific steps of the process. Add to this the massive amount of hooks throughout both the front and backend of WordPress and what you have is an easily extensible base for your web app, with a relatively high level of security out of the box.

As this is a CRM type tool, there isn’t really any need for the site to serve a frontend, so I disabled it, with any unrecognised URL redirecting to the login. The WordPress backend, in my opinion, isn’t the most attractive piece of software so that we will be doing some cosmetic work. I’ll go into more detail on this later

This application makes use of an incredibly powerful plugin for WordPress called “Advanced Custom Fields”, hereafter referred to as ACF. What ACF does, is to allow you to (as the name suggests) add custom data to basically anything you want, pages, posts, users, etc. It also has a lot of potential for bespoke websites, as it could conceivably be used to add content “slots” into a page.

The template could be defined via WordPress using PHP, or even using a frontend library such as React for a “decoupled” site, with WordPress acting solely as a CMS and a separate application handling the presentation (via WordPress’ REST API). I’d like to do a write-up on this process in future.

The first step was to create a custom post type (CPT), to represent an instruction. This is a relatively simple task with WordPress. With just a handful of lines of PHP needed to register a custom post type, there are also plugins that achieve this. However, I wanted to keep third-party plugins to a minimum to reduce bloat.

From here I had to establish a fieldset for each instruction. For this, I used ACF, while it isn’t especially complicated to do this manually using PHP, and WordPress’ built-in wp_postmeta table. ACF streamlines this process a lot and makes it easier to revise in future if need be. At this point, the Instruction post type is basically a massive form that is accessible by any logged in user.

This doesn’t work for us, as although we can probably trust all parties involved, we don’t want everybody to be able to edit whatever they please. That’s why we enter custom user roles. Each of these roles will have read-only access to some fields and write access to others.

There is an “Admin” (though not in the conventional WordPress sense, I’m the only user with absolute privileges), who can modify any field, for conflict resolution. Etc. The way ACF works is that fields a user doesn’t have access to won’t be outputted at all, as a disabled input is not a secure way to ensure that users do not modify fields. This caused an issue in that while some roles shouldn’t be able to edit some information, they do need to be able to read it to work from it.

For this, I made a custom plugin. This plugin makes use of WordPress metaboxes on the instruction edit screen. What this does is display the initial information in plain text, not inputs, allowing for secure read-only access to this information for certain users. I then styled this information to match the layout of the fundamental form, to make things easier for the admins who may at some point have to use both.

Next, I created a CPT for Firms, and this contains far less information. It has a comma-separated list of active postcodes, a phone number, email and User ID. There is one for each of the (roughly) 30 firms involved. The primary use for this is to assign ownership of an instruction to the most geographically convenient firm, along with giving the initial instruction author a point of contact should they need to chase anything up. The way this happens is that when you save an instruction, the server loops through every Firm checking, it’s active postcodes (which can include wildcards – causing a little head-scratching). You then store potential matches in an array of Firm IDs.

A (fictional) example of a valuation firm.

What happens next depends on how many potential firms exist. There are 3 possible conditions, the ideal scenario being that you find only one firm. If this is the case they are assigned ownership of the instruction, will carry out the valuation, and return their report and invoice, simple!

An example of an autofilled firm, chosen based on postcode.

As the active postcodes of the firms are fine-tuned to avoid conflicts, hopefully, this will become the vast majority of cases. In case of either conflict or no active firm nearby, the instruction will assign to the firm which oversees the whole application. When you assign ownership to a valuation firm, they will receive a notification via email. This will also happen when a case is complete, ownership will then return to the original author, who they notify, and you can activate the gathered information.

I knew that I would need to do some relatively drastic modification of the backend of the site, partly for cosmetic purposes but also for practical purposes, as the sheer amount of information required on the “List View”, would have quickly filled the available width and become unreadable. There were several approaches I looked into for this.

Here is the initial list view appearance, as you can see it is almost saturated with information and we may need to add more fields in future.

This is much better, obviously the elements could do with a bit more visual separation, however this is a much more readable layout, with much more space for any fields needed in future.

The first thought of mine was to make a child of WordPress’ built-in Admin Table class. This class is used to display all of the list views in the backend, including posts, pages, users, etc. My thought was that it could be modified to use DIVs instead of HTML table elements, as this would be more flexible. Potentially with relevant fields grouped in ordinary parent DIVs, and this would allow me to break each listed item into two or three rows. This action would essentially double the width, increasing the amount of readable information available at a glance.

In the end, I concluded that by changing the display property of my table cells, I could achieve most of this. There is a slight drawback in that I don’t have full control over the markup I output, so I can’t group related fields in the markup (however I have done visually).

I also added a progress bar, which consists of 5 Boolean values for each instruction. Each one of these represents a significant step along the process, the first being “Firm Nominated” and the last being “Invoice Submitted”. This should be handy, as an empty progress bar will signify to the Admin that this instruction needs attention to progress (they will also receive an email notification).

Eventually, I would like to make the instructions sortable by progress, as this will be a useful view both to the pension provider agents, and the administrators of the service.

I also modified the login screen as this is essentially the homepage now, seeing as there isn’t technically a frontend. There are a few hooks on the login page I used (header and footer), this allows me to style this page without modifying any core files, instead – using a plugin. I moved the original login form into a modal, triggered by a login button. Then for a touch of visual interest, I created a carousel of sorts, which displays the valuation firm logos.

At the time of writing, there are still some features I need to implement. The most interesting of which is the ability to export KPI tracking information. The information is mainly how early or late reports are delivered based on the expected date. The results will give an integer value, i.e., 1 for a day early. You can then average the data to provide an overall score.

This will be on a site-wide and a per-firm basis, allowing the administrators to assess which firms are performing best. Also, how to identify any persistently late firms. I put quite a lot of thought into how to implement this. I toyed with the idea of a third CPT to hold only the critical information for this tracking. However, I eventually concluded the best way would be to make a special status for completed instructions; after which point they would archive and only be visible to individual users. This would then serve as the data source for the KPI tracking.

Thanks for reading, and I hope this is of interest! I am planning to do a write-up like this once a month, workload allowing.

You've made it this far - why not get in touch? Free Consultation