Client
Cranstoun
Sector
Duration
2-3 weeks
What we did
Interface design
Front-end development
Collage of overlapping screenshots from the Cranstoun WiSE Project website on a magenta background

Cranstoun is a social justice charity. One of their projects is WiSE: Women in Safe Environments, supporting women who use alcohol and other drugs, including women in domestic abuse situations.

The Cranstoun website has information about WiSE, but they needed a standalone website to provide information directly to the women they’re helping. This is a digital extension to the physical locations they have throughout the country.

This needed to happen fast. But it also needed to be high quality. That’s where Clearleft’s expertise came in.

The Results

A fast, clear, accessible website

A sensible hierarchy of information delivered in high-quality front-end code.

An extensible content management system

A CMS that makes it easy for a small busy team to do more.

Discoverable content

A tech stack designed and built with discovery in mind.

The Full Story

How do you set the right velocity from day one?

We hit the ground running.

The Cranstoun team came to the Clearleft studio on the very first day of this project. Together we made full use of the time doing a number of exercises. Once we had established who the target audience was, we were able to define the aims of the WiSE website:

  1. Provide information and access to information for women who use alcohol and drugs.
  2. Help Cranstoun raise money for this project.
  3. Provide information for government and policy-makers.

During every activity we made sure that the people accessing the website were considered in a non-judgemental way. The page templates we designed needed to support that.

Clearleft was a fantastic partner from start to finish. Sophie and Sam brought creativity and pragmatism to a challenging brief. They helped us define our brand voice, translated it into an engaging digital experience, and chose the right technology to support it. The result is a futureproof website delivered at remarkable speed, with an intuitive CMS that makes creating content a doddle. I'd wanted to work with Clearleft for a while and they more than lived up to their sterling reputation.
Chris Philpot Fundraising and Digital Engagement Manager, Cranstoun
Element collage wise
At the Clearleft studio we did a number of exercises; finalising the site structure and navigation, determining the brand voice and sketching page templates.

How do you keep the momentum going?

We were able to make foundational decisions quickly.

  • We crafted a brand language and tone-of-voice based on Cranstoun’s knowledge of the target audience.
  • We chose Craft as the content management system because we were already familiar with it.
  • We kickstarted the Figma designs with a solid typographical hierarchy using Utopia.

Our previous experience allowed us to move at speed without compromising quality.

But we weren’t working in isolation. We were designing in the open, constantly checking in with the client to get questions answered quickly. Every day we were giving them decisions to make, showing them the pros and cons of different approaches. Armed with that information, they made speedy choices, ensuring that the project never stalled.

Constant communication was the key to maintaining speed and quality.

How do you build and launch a high-quality website in record time?

With a good feedback loop in place, we were able to quickly move from design and information architecture through to building out the front-end templates and the back-end interface for managing content.

We configured the CMS to match the team’s content and workflow, rather than making them adjust their existing ways of working. We gave them training in using the new CMS so they were able to start publishing to the website straight away.

We also provided guidance on how to structure their existing content into more precise, targeted formats. Every piece of content needed to be considered through two lenses:

  • How will someone find this content?
  • What state of mind might they be in?

Even though we were building the site at a very fast pace, we made sure to consider the needs of someone who might be in a precarious situation. Every page on the site has a “quick exit” button in case someone needs to instantly cover their tracks.

The WiSE website was designed, built, and launched in an incredibly short space of time. Partly that was because of Clearleft’s previous experience. But this velocity wouldn’t have been possible without a client so dedicated to the project, willing to be there providing expertise on their audience and the subject matter. It was an honour for us to be able to support their great work.

Page designs Wi SE
The WiSE project site homepage design on desktop and mobile.
This website means that we can now reach women across the UK who are looking for vital information relating to their health, relationships and wellbeing. It complements our in-person services by providing an online hub where women can access guides, read about other women’s journeys and find help.
Alice Orme Policy and Projects Officer for WiSE
More work