ustwo

We helped this digital product agency to achieve their goal of creating a beautiful decoupled website with a WordPress backend and a JavaScript frontend.

ustwo is a digital product agency, working with clients to create beautiful websites, building digital products, and launching new ventures. Amongst their impressive portfolio of work is the Apple Game of the Year and BAFTA award-winning Monument Valley.

Human Made was brought in to help build their new website: ustwo wanted a decoupled website with a WordPress back end and a JavaScript front end. The agency has world-class expertise in-house to deal with the front end design and development, and they engaged Human Made to work on the CMS. This presented an exciting opportunity for Human Made as it gave us the opportunity to use the new WordPress REST API alongside a great design company.
rest api logo

Creating a bespoke API

ustwo wanted a straightforward interface for their global marketing team to add content to their website. While the WordPress admin suited their purposes, they wanted to build their own app-like front end written in React. Achieving this meant using WordPress without its native theme system, instead delivering data to the front end using the WordPress REST API.

We used the native infrastructure in the API and built a ustwo API that was tailored to the client’s specific needs. We built on the existing endpoints, creating a bespoke API that uses the native embedding functionality to deliver data from the client’s custom post types: case studies, pages, blog posts, job vacancies and studios. This means that ustwo’s content is available to be delivered to any front end technology, and the API itself is portable if ustwo decides to change CMS at a later date.

infrastructure

Dealing with progressive enhancement

One of the challenges of using JavaScript on the front end is that some browsers have JavaScript disabled. This results in the website visitor being served with a blank page. It was important to ustwo that the website be both fast and accessible. To make this happen, the stack includes a Node.js server which acts as an intermediary between the WordPress admin and the React front end. The REST API delivers data to the Node.js server which pre-renders HTML and serves it to the front end. If a visitor has JavaScript enabled they see the React-powered app-like website with smooth transitions and animation, and if they don’t they still see a beautiful, standards compliant website.

matthew edwards

Working with Human Made was great – they got to know and understand us super quickly, and made real efforts to integrate with our team. It was hugely useful for us to rely on their specialist knowledge and expertise, which was apparent from the get-go, so that we could focus on developing the frontend. We aim to work flexibly, and we saw that Human Made promised that – for us, they more than delivered.

Matthew Edwards – Marketing Manager

Creating structured, portable data

ustwo wanted a straightforward WordPress admin for their marketing team to add content and update the website. This data needed to be in a structured, reusable format that could be delivered using the API. We created a custom Page Builder that allows editors to enter content that is output in JSON format. Unlike many typical WordPress page builders, this isn’t for creating layouts but rather for creating content modules of structured data that can be used in different contexts. Currently the content is used only on the website, but it is available via the API should ustwo want to use it in any future applications.
page-builder-1
page-builder-2

Dogfooding the WordPress REST API

Developers at Human Made have been actively leading the development of the new WordPress REST API. Working with ustwo gave us the opportunity to work with it in a real life situation. When we encountered problems, fixes could be applied upstream to the API itself, benefiting the entire WordPress ecosystem. We discovered some bugs and issues which we were able to fix: the API was fetching a post four times, causing some performance issues; the API was retrieving all of the attachments associated with each post, again causing performance issues; and we discovered that necessary data wasn’t available to unauthenticated users.

Rethinking project management

Working with the WordPress REST API brought a separation of concerns that meant approaching project management in a new way. Our developers were focused solely on WordPress as a data entry and delivery application. We were just one part of a wider team that included a designer, a front end React developer, a front end CSS developer, a Node.js developer, a project manager, and the stakeholder. This allowed each part of the team to be completely focused on their component, working independently while feeding back to the rest of the team.

The technology itself facilitated this change in project management: all that the front end developers need to make the site live is to change the URL where the data is. When developers are working locally in their development environments they can work with the content from the live site; it also streamlines the process of moving from staging to production. We found that the API hasn’t just changed WordPress but changed how people work together, creating a new workflow and pushing where WordPress is going.

Becoming part of the team

When a client engages Human Made, they often hire us in to bring WordPress expertise to a larger team, which means that we have to be responsive to a broad set of development practices. This was very much the case with ustwo who already had talented designers and front end developers in-house. They needed someone to implement WordPress in a way that fit with their overall vision. When the project started, our developers slotted straight into the ustwo team.

ustwo takes an agile approach to development: we participated in the daily scrum calls, in the sprint planning, and the show and tells. Unlike Human Made, ustwo is not a distributed company but we were able to use communication technologies like Slack and Google Hangouts to dial in and work closely with the rest of the team.

Working to tight deadlines

ustwo was already six weeks into a twelve week project when Human Made was brought on board. Much of the early development had been focused on creating the design and front-end templates which would eventually pull the content from WordPress. The time frame was constrained as the launch of the website was to coincide with the launch of a new ustwo app, Moodnotes. Initially we worked to a minimum viable product, launching the site with only Pages and Case Studies, while Posts and job listings were held back until the next sprint. This meant that the client was able to meet its target of having a beautiful, working website in time for their product launch.

moodnotes

Outcomes

ustwo created a beautiful decoupled website with a WordPress backend. All of the code for the frontend is available on Github and they have written a detailed post themselves on the process. It gave us a fantastic opportunity to work with the REST API in a project with a client, feeding back fixes upstream, and flexing the power of a decoupled WordPress website.

Which Humans?