The Project
The marketing team at EG grew tired of how hard it was to make changes on their website. They wanted a platform that was easy to use so that they can produce content faster.
The main goals of the new website was to:
- Migrate over to WordPress
- Improve navigation structure
- Refresh the design slightly
- Eliminate flaws of the old website
- Make it easy to create content
The Migration
Since the new website was going to take advantage of WordPress's Gutenberg editor, the migration was done manually to accommodate this. Blog content also didn't use the appropriate html tags when relevant e.g. quotes, headings etc.
We did the following:
- URLs were based on the title of the content as the previous site somehow malformed the URL
- Redirects were implemented to ensure organic traffic remained intact
- Add relevant SEO meta tags
- Ensure images have good names and alt descriptions
Navigation
The previous site used the same menu design for mobile and desktop. This meant that the user on desktop had to take an extra step to use the menu which is a big no no in the UX world.
With this current look it also indicates that the site only has five main pages but after clicking each link, more links appear.
To make the navigation better, we showed the main options at the top of the screen and ensured that the menu stayed fixed to the top as the user scrolled. And once hovered further options would show.
With the new layout we were able to further add more information both visual and text.
The Backend
Using learnings from other builds, we created different post types to accommodate what the marketing team wanted to make content for. Apart from the blog, we created specialised editing experiences for:
- Investments
- Developments
- Case Studies
- Leasing
For pages, we relied heavily on the Gutenberg editor taking advantage of custom blocks for EG to use wherever they thought was necessary.
The Frontend
With new website builds, I always go for a minimalist theme where I'm in control of everything. UnderStrap Child is a theme which marries the Underscores theme with Bootstrap 4. The theme also comes with Gulp and Browser sync setup which means I can develop at a rapid pace.
From here it was all about outputting the content according to the design. Using Invision I could pick out important specs such as font sizes, colours and see the grid structure.
Using the backend structure, we were also able to test different types of content ensuring that whatever content they wanted to add didn't impact the design negatively.
Workshop
To ensure the marketing team knew how to use the website, we also did a workshop with them showing them how they can easily add content to the website. Also had the opportunity to answer any questions they had ensuring they left feeling confident in creating content.