Two recent projects

A complete overhaul of EMC2 Property

EMC2 Property is a website which provides news, guides and property for sale from around the globe. They approached me requiring a complete redesign and restructuring of their website.

Web Design

Overview

The website was generating 98% of it's traffic organically. Of this traffic, around 90% was to the articles.

The remaining 10% of traffic was landing on the "for sale" pages. However to compete with the likes of Zoopla and Rightmove, something needed to be done to increase this portion of traffic.

The problems

  • Underperforming - slow and bloated code
  • High % of users bouncing
  • SEO structure not optimized
  • Outdated, inconsistent design
  • Built on WordPress - continual attempts being made at exploiting the login and core files
  • Goals - A faster, higher performing website

    Prior to project start, we agreed upon meeting the following goals.

  • Sub 1 second loading times for all pages
  • Excellent mobile performance
  • Improvement to SEO structure
  • Modern & simplified design
  • Clean and structured UX
  • Simple scalability for future features
  • Built around 3 core principles

    Simplicity

    Minimalism

    Performance

    Web Design

    Planning - Crucial for a live website

    All current URLs were noted down and were mapped to their future paths with 301 redirects - I suggested trimming the content of the website (for SEO reasons) - many pages would return a '404 not found' error if this stage was skipped - not good at all in the eyes of Google.

    Decisions & development

    Every decision made had the end goal of ensuring that the final website would be high performing with an easy to navigate interface.

    Some key decisions/requirements

    Next.js & React framework was chosen to provide a significant boost to performance with a maintainable codebase compared to the old WordPress version.

    Consistent design accross the site with articles converted to markdown files, displayed on the frontend with reusable components for simple editing.

    A simple method to add structured meta data for SEO to the articles and pages.

    Roadmap of the process

    1. Planning


    Mapping URLs & planning the following stages

    2. Wireframing


    Logical, simple wireframes to test layouts

    3. Basic file layout


    Ensuring all files were structured and manageable

    4. Content conversion


    Old WordPress posts converted to markdown files

    5. Page setup


    Initial development of each main page

    6. Component dev


    Development of layout, mobile nav and various other components

    7. Styling & animation


    All pages styled and brought to life

    8. SEO content


    Meta data input to static pages. Dynamic data pulled from .md files

    9. Accessibility testing


    Testing that the website was accessible to a screen reader

    10. Tweaks & setting live


    Codebase tidying. Build configuration setup. Website exported to GitHub and deployed on server.

    11. DNS & hosting


    Domain pointed to new server. Old public cache flushed.

    12. SEO & next dev


    SEO maintenance and development of future features.

    Design - Minimalistic and bold

    I aimed to create a final design which would be clutter free and easy to navigate.

    The previous colour scheme didn't seem to work well, so I redesigned the lot - Logos, icons, layouts and colours. To give more emphasis on headlines and provide more depth to the design, a serif font was chosen for h1-h4's and a sans-serif font for all other body text.

    before

    The final website and results

    The outcome, final design, performance and technical spec.

    The technical specification

    • React & Next js
    • Current databse - None
    • Future databse - MongoDB
    • Full accessibility - ARIA functionality
    • GSAP animations
    • Article format - Markdown
    • API for all posts
    • Rich meta data
    • Excellent performance on mobile devices & 3G connections
    • Dynamic JSON markup for every page
    • Prerenderred - instant page transitions (no loading)

    Old vs New

    A comparison of the old homepage and the updated design

    before
    after

    Performance

    Poor performance was holding EMC2 Property back. The new site is exceptionally fast considering the size and quality of the images used on the site - moving away from WordPress to a more modern and secure framework has helped solve this.

    PageSpeed Score

    YSlow Score

    Load time (London)

    Load time (Vancouver)

    Page size

    Requests

    Old

    94%

    88%

    2.4s

    6.7s

    1.39MB

    67

    New

    97%

    97%

    0.7s

    0.8s

    0.98MB

    44

    Explore the site

    Simply posting more images doesn't give you the feel of the website - go check it out to see the design and performance for yourself.. just remember to come back here after and fill in a contact form to get your own high performance website 😊 Click here to go to EMC2 Property.

    Let's discuss your project

    A strong online presence is vital, especially in present times.

    Don't compromise on your website or online presence - Give your business the best chance for success and have peace of mind that you've chosen a professional, dependable and reliable service.


    A web app in development

    Apex legends player tracker which integrates two 3rd party APIs.

    This React application is currently in development.

    The first API is integrated on the homepage to update all worldwide server status and responses in real-time.

    before

    The second API is used on two pages - the weapons page, which displays all information regarding each weapon available in the game, and the second, more complex use is on the player tracker page.

    before

    The player tracker page accepts two inputs - the platform (currently PC or PS4) and the player's name. This information is sent as a request with a base URL, which returns various player information such as:


    • If the player is online.
    • The most recent game character played.
    • The most recent stats.
    • Their level and rank.
    • And various other information.

    As the web app is in development, ping me for the development URL so you can take a look.

    Let's discuss your project

    A strong online presence is vital, especially in present times.

    Don't compromise on your website or online presence - Give your business the best chance for success and have peace of mind that you've chosen a professional, dependable and reliable service.

    chat button