Wilton Park is an executive agency of the UK Foreign, Commonwealth & Development Office (FCDO) providing a global forum for strategic discussion. Based since 1951 at Wiston House in Sussex, it organises over 50 events a year in the UK and overseas, bringing together leading representatives from the worlds of politics, business, academia, diplomacy, civil society and media.

Wilton Park partnered with dxw to redesign and rebuild their website from August to October 2020. I led on design and front end, working as part of a remote team of five on both sides of the Atlantic, including three back end developers and a delivery lead.

Collaborative design sessions were facilitated using Zoom and Figma. Working in this way was still novel for me, but these sessions worked well. Designs produced ranged from low fidelity wireframes to high fidelity mockups. This work proved thorough enough to allow the build portion of the project to proceed smoothly.

Wilton’s old site had reached a point where a redesign and rebuild seemed necessary. The UI had become cluttered and confusing over the years, and the general look and feel was failing to communicate Wilton’s work in a meaningful, interesting or impactful way. In addition content creators were hamstrung by the site’s dependence on WordPress’s classic editor rather than the newer WordPress Gutenberg.

Taking a user-centred design approach, I sought to improve the user’s experience, help Wilton better communicate about and publish their work, and worked to WCAG 2.1 accessibility standards. Key areas of focus included: decluttering the UI, improving the site’s navigation and labelling, surfacing themes and categories, making use of impactful image-led UI elements, and designing a stable of base templates and Gutenberg components in order for Wilton to build their own templates.

 

Home page mock up with annotations explaining design decisions to wider stakeholders.

Mockups of key templates – home page, events, and individual theme page.

Mockups of Podcast and event templates.

Dissected view of all Gutenberg components and example usage.