UX, UI make-over for The Women's Prize for Fiction.

A complete website re-style to improve the user experience for this famous literary prize.

Home » Case studies » UX, UI make-over for The Women's Prize for Fiction.

UX, UI make-over for The Women's Prize for Fiction.

A complete website re-style to improve the user experience for this famous literary prize.

Carswell Gould has been working with the Women's Prize for Fiction for many years. The website continually evolves in an agile way and challenges our marketing, design and web talent to deliver new ideas and approaches that help promote and communicate this long running literary prize. With 5.4 million copies of award-winning books sold in the UK, a global community of 16 million women and 2,426 emerging writers supported through its programmes, it's always an exciting and stimulating experience to work with the wonderful team at Women's Prize for Fiction.

Evolving the website 

To tie in with an increased focus on content marketing, the team were asked to re-think and improve core features and pages on the website and move it towards a magazine-style site.

The main objectives of the project were:

  • Improve UX (User Experience) for the primary audiences who visit the website, making readers' content front and centre
  • Surface key content and improve browsing by overhauling 'Reading Room' content
  • Develop podcast, newsletter and live events features 
  • Add a shop and ecommerce cabability 
  • Imporve and simplyfy content editing on the CMS 

We start with wireframes 

It's key to make sure we explore and define our ideas efficiently, so we start by creating wireframes, which result in a complete visual map that expresses, in low fidelity, how we will structure the site, its pages, layout and content, highlighting functionality and user journeys.

Website wireframes are very important because they help us, as a communications agency, and the client to agree on what will be delivered before starting any graphics or coding work. This allows us to optimise the client's budget and ensures our web developers and designers make the best use of their time. Once the wireframes were approved, we began the design phase. Explore some of the before and after images below to see what we did.

Sharpening website navigation

The navigation has been simplified and moved from a side menu with multiple submenus and a top bar navigation, to a condensed menu bar. The menu was restructured to follow the new information architecture by removing the different paths for Readers and Writers. 

 

 

After Image
Before Image

Typograhy for readers

The website is now using Open Sans as its main font. Our designers made this choice because it is optimised for print, web, and mobile interfaces, and has excellent legibility.

We are not alone in thinking that Open Sans is a great font, in fact it is the second most used on Google Fonts! (source: https://fonts.google.com/analytics)

Refocusing the homepage to create the perfect gateway to The Prize. 


The homepage was been redesigned to help the visitors to access the most important sections of the website with just the click of a mouse or touch screen. The content editors are now able to curate a welcome that quickly sums-up everything that is happening including;

 

  • Hero section with all the major updates from WPFF
  • The prize section with the key dates
  • The long/short list, so users know which are the competing books
  • How to support the WPFF charity
  • A 'time machine' to explore all the past editions of the prize
  • A shop where you can buy exciting merchandise to show the world that you support WPFF

Promoting events in intuitive 

The previous version of the events archive page used the same layout as the posts archive page and the only difference between them was that the elements were split between “upcoming” and “previous” events. Even the single event page was hard to distinguish from a normal post/article.

Now, the page has been redesigned to be more of an event hub where the users can navigate from upcoming, further ahead and past events.

Below you can see how the event page has changed.

 

 

After Image
Before Image

A super-powered text editor (or for the web geeks - WYSIWYG)

Because WPFF is moving towards a magazine format, the web developers at Carswell Gould felt that it was the right time to boost the backend functionality and give the WPFF content creators tools that will make their lives easier when it comes to adding content and editing pages. 

By using the Wordpress Gutemberg Editor, combined with the incredible Advanced Custom Field Pro, we were able to create new “blocks” that can be used to create new and engaging content.

This new editor has also enabled the client to see in real time how the pages will look once published.

Continual improvement as standard 

This is a great example of how we work to improve client websites using UX, code and marketing talent. We have tried to squeeze as much information into this post as possible and we hope it gives you some idea that you can use on your own projects, especially if you are trying to transition towards an online magazine style website. 

If you have and question or if you want know more about how we can help you re-style your website, please get in touch with us.