Project Summary
The PIE is a leading online publication for the international education sector, with a team of journalists from across the globe.
They provide news, events, advertising opportunities and recruitment services, to their audience via their website with 197,000 page views each month.
The PIE approached Impact Media to redesign and redevelop the PIE News website. Their existing site was over 10 years old and was challenging to keep up to date due to tools and plugins that were no longer supported.
The project required the migration of all of their content (including some 10,000 articles and the associated comments).
The website was to remain on WordPress CMS, but with improved backend editing functionality, and a more flexible way to create, edit and maintain their content.
What We Did
- Briefing Workshop
- Discovery & Strategy Workshops
- High Fidelity UX Wireframes & Prototypes
- Mobile & Desktop UI Design & Style guide
- Bespoke WordPress Theme Development
- Brand Styled Component Block Library
- WordPress Content Migration
- WordPress Training & Team Onboarding
- Ongoing Support & Maintenance
- WordPress Managed Hosting
The Challenge
The existing PIE News website was over a decade old, the technology stack was outdated, the PHP version was far behind the recommended for WordPress, and some critical plugins were causing conflicts when trying to keep the website up to date.
The website originally launched in 2011 with a user base visiting largely from desktop devices. However, as the technology landscape evolved, this switched to an audience predominantly visiting from mobile devices. The website failed to keep up, and although the website worked on mobile, it was failing to serve the best experience to those users.
The PIE team publishes content daily, and their journalists and editors were limited by a legacy editing system, which held back the overall visual appeal of their articles. With a challenging publishing process and no creative options, it made it difficult for the editing team to frame key paragraphs or sections using alternate type sizes, call-outs or heading styles.
The editor wasn’t the only thing holding the team back. Many key areas of the website were hardcoded and control over content required developer involvement. The team had no control over which articles were displayed on the homepage or which categories. The new website needed maximum flexibility.
A large proportion of the business’ revenue comes from advertising directly on the website, yet many of the advert positions were focused around a desktop sidebar, which was stacked (usually at the bottom of the page) on mobile. This meant that many adverts were never seen. The advert sizes were also heavily desktop focused, with no mobile specific sized adverts available to be shown on mobile devices.
With the website existing since 2011, it has accumulated an impressive library of content. This includes over 10,000 articles, 50,000 images, and thousands of accompanying comments. All this needed to be migrated from the legacy website onto the new website in a seamless manner.
Objectives:
- Improve the reader experience by creating a website that is far easier to navigate across desktop and mobile devices, whilst keeping users on the website longer.
- Introduce further core navigation for categories such as higher education, immigration and ELT, alongside regions.
- Visually refresh the website and introduce a modern, uncluttered and on-brand look and feel that makes it easy to read and digest content.
- Collect more user data and generate new leads more easily.
- Update the technology stack to improve speed, reliability, security and overall accessibility.
- Remain on WordPress CMS, but with improved backend editing functionality, and a more flexible way to create, edit and maintain content.
- More control over the homepage content, giving PIE’s editing team flexibility over what content is displayed and for how long.
- Increase advertising revenue generating opportunities.
Delivering a Homepage That Is More Flexible Than A Contortionist
The homepage was difficult to navigate for frontend users, but from our discussions and findings, it was even more challenging for non-developers to edit and update on the backend.
We introduced our bespoke no-code editor that the team can easily control. They can now choose a category to display, the position on the page in which the category should be displayed, which articles should show in that category, and even what layout type to use.
Providing 3 different layout types makes the flow of content more engaging, rather than using the same style throughout.
We introduced an option for sponsored content and a pinned or featured article for each category too.
We added ‘load more’ functionality on sections, so users can see the next 2-3 articles in that category before scrolling.
We created a flexible area where the predesigned component blocks could be added, giving The PIE a homepage that was fully customisable, with all the power in their hands and no need for a dev team.
Advertising is controlled in the sidebar with internal advert positions promoting the PIE events and joining the email list. The sidebar layout was retained for consistency from the previous long-standing website, so there wasn’t a big shock for returning users.
Opening Up More Advertising Revenue Opportunities
We introduced new advertising positions more in keeping with today’s technology expectations and worked with the PIE team on ad sizes ready for the rollout, and the transition for existing advertiser’s to the new positions and sizes.
On the old site, the sidebar presented a challenge for mobile traffic, as it pushed the adverts to the bottom of the page. This meant that advertisers weren’t getting the primary positions on mobile that they were getting on desktop. To combat this, we introduced a sticky sidebar on mobile that appears at the bottom of the screen. It transitions to the next sidebar item as a user scrolls to a certain depth.
This meant we could serve mobile sized ads with high visibility to mobile users, to ensure advertisers are getting the same value across mobile and desktop.
To provide the PIE team with a high level of control over their advertising inventory, we introduced sitewide options as a general fallback, so that adverts can be set in the various primary positions globally. However, the editing team can overwrite them on a per category, per page and per article basis, making it far easier for the growth team to obtain sponsorship for a gallery album, a specific article or even a topic or category.
Feature Packed for Easy Content Creation That Will Keep Users Scrolling For Longer
As a publishing website the most important pages are the articles, but the journey between articles had been difficult on the old site. The article layout on the new site introduces infinite scroll, so the reader can instantly begin reading the next category without clicking.
The opportunity for additional revenue through sponsored articles requires each article to have an option to display a sponsored label. Once displayed, ad positions in the article can be overridden by sponsor specific adverts.
Along with regular categories, popular topics arise that might have a limited shelf life that require prominence. So we introduced a Topics menu to facilitate this need. Articles could be tagged within a category as well as a topic and displayed front and centre on pressing topics.
Branded Component Library To Create Lead Generation Pages
Planning the core blocks that make up the website begins in our initial briefing workshops. We plan the components that will form the various pages we want to develop, and whether we can use these blocks on other pages.
For the PIE, we built 20 core component blocks that enable their team to build out pages from scratch for their search campaigns or key content pages, with no code.
Taking inspiration from The PIE’s branding attributes, we introduced their PIE symbol across the creative imagery on site. It provides added character and depth but the PIE team can replace these images where desired.
Migrating 10,000 Articles From A 10 Year Old Site
WordPress to WordPress migration sounds like it should be plug and play, but when the codebase and tech stack are out of sync, this isn’t a straightforward task.
Our team of creative problem solvers identified this during the early stages of the project and found a solution that meant that all 10,000+ articles and their comments were safely migrated across to the new site.
As the site was being redeveloped, URL structure also changed where necessary. This meant that there were 5000 indexable pages that needed redirecting to their counterparts on the new site, to ensure no loss of traffic or rankings.
SEO benchmarking and migration planning was carried out in the workshop stage of the project, and careful redirect mapping and implementation was carried out for launch.
Their rankings have not suffered and organic traffic has grown considerably.
Speed, Performance & Passing Core Web Vitals
The existing tech stack was limiting the legacy website’s speed and performance, which was also hampering search visibility.
The new website, whilst still packing the same tracking and analytics tools, passed Core Web Vitals and scored an A on GTMetrix for mobile and desktop at launch, and when retested 6 months post-launch.
Meeting WCAG 2.1 AA Accessibility Compliance
Due to The PIE’s position as a global resource, the website needed to be built to meet WCAG 2.1 AA compliance standards.
Meeting accessibility with a brand that’s primary colour is orange is quite a challenge, as for colour contrast, orange is one of the worst performing colours. However, our team focused on ways that the orange colour could be used whilst meeting the AA accessibility criteria, as well as following our internal guidelines and methodology for designing for accessibility.
Results
Since launch, users from organic traffic have increased by 286%, and users across all channels have increased by 222% year-on-year.
The feedback from users has been overwhelmingly positive, and the team can create and publish engaging content faster.
