The Project
Murray Valley Pork's marketing team wanted a new website which made the brand a focal point. They also wanted the ability to make content changes themselves as they would have to contact someone else to do it.
The main goals of the redesign was to:
- Refresh the look of the website
- Create a good recipe reading experience
- Use WordPress so it's pleasant to make website changes
- Optimise the site for Search Engine Optimisation (SEO)
- Make the website fast
Let's talk about before
The homepage didn't reflect on the story of the brand. Apart from a paragraph and a video, there wasn't much else to look at on the page.
The homepage is the most important part of the website and gets the most traffic. It should incorporate all aspects of the site.
The Design
After defining the IA of the site, we wanted to incorporate this into the design making it feel more visual and allow the content to breath.
Navigation was decluttered and straight to the point.
Homepage captured more of what Murray Valley Pork is as a brand.
The recipe's experience makes the recipe preview a focal point of the content.
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:
- Recipes
- Store Locator
For pages, we relied heavily on the Gutenberg editor taking advantage of custom blocks for Murray Valley Pork 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 Browsersync 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.
SEO
The SEO team provided me the metadata to implement on every page of the site. Schema based on Google's examples was also implemented for all blog posts and recipes. Best practices were also implemented by going through a checklist of items which was then reviewed by the team e.g. alt tags, robots.txt.
These items were then validated by going through Screaming Frog and generating reports.
Pagespeed
Using Google Pagespeed Insights I was able to get an idea of the things that needed optimisation. The following items had a major impact on speed:
- Critical CSS
- Removing Bootstrap features
- Purge CSS
- Minification
- Lazy loading Google Maps
- Font subsetting
- Image Optimisation
- Removing background images and using img/picture tags exclusively
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.