The Project
Yoghurt Digital's website needed a redesign. It was outdated and no longer reflected who they were as an agency.
The main goals of the redesign was to:
- Update the new design to reflect the agency story
- Update and add content to services
- Make the services they offer more clear and visual
- Setup the backend so it's pleasant to make website changes
- Add new features so the website can be used as a marketing tool
- Optimise the site for Search Engine Optimisation (SEO)
- Make the website fast
Let's talk about before
The website at the time was the same since the inception of the company. It was developed quickly as they wanted a presence on the internet.
Due to this the team didn't pursue making a website that would in their words "Pop".
The content on the site wasn't up to date with what they offered meaning they could be missing out on potential customers.
The Design
Without any background knowledge on what was required, the founders gave Junnan Ma who is the UX/UI designer at Yoghurt one directive:
Make it pop
Using sketch, Junnan created a concept which was quickly approved because the "pop" factor. As he was doing this, he would ask me questions about feasibility, so it felt like a collaboration. I also suggested ideas which he incorporated into the screens like the job applications.
Junnan also created various imagery to fit the new and improved content. Since this was an internal project, we wanted to be creative and do something different. You can see the out of this world 404 page we created.
The Backend
Once the designs were given the all clear, I started thinking about how to structure the backend. Based on the designs, there was a lot of different types of content. In WordPress, you typically have pages and posts. But this didn't fit what I was seeing.
Using a feature called custom post types, I was able to clearly distinguish content on the site. This made it easy for stakeholders as they could simply login and click a sidebar option. We created specialised types for things like:
- Case Studies
- Testimonials
- Events
- Speakers
Each of these types were married with Advanced Custom Fields which allows you to create customised options. Knowing who uses the website, I can customise the dashboard to their liking.
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.
As each page was being completed, I would confer with Junnan to ensure the look and feel on the website matched the designs.
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 job posts. 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
