- Requirements gathering
- Website planning
- CiviCRM integration
- WordPress development
- Ongoing support
Fresh branding and website for local Bristol charity One25
One25 is a Bristol-based charity, specialising in enabling women to break free from street sex-work, addiction and other life-controlling issues and build new, independent lives. They provide a night outreach (six sessions weekly), a drop-in centre and casework, giving person-centred support and advocacy to around 300 women each year.
One25 are a charity based in Bristol who help vulnerable women step away from the streets. They had an existing website that wasn’t functioning very well for their team, the links off to their donation platform were hidden amongst the content and therefore was inhibiting the site from driving donations. The website was static and the only part that could be updated was the blog, which was not ideal for the team as they couldn’t change important information on the site without being charged by their existing provider.
Their priorities for the new site were:
It was established that the existing brand for One25 really didn’t help in getting across their message. We spent time with the trustees and stakeholders of One25 to really understand the makeup of the charity.
Compassion and love were common themes that seemed to surface often when discussing how the charity operates and supports its service users day to day. We crafted a logo that literally placed this idea central to their branding. The One25 heart motif represents many different facets to how they operate and are seen by their service users with a clear sense of this love and compassion observed from the initial meetings and how staff talked about why they became involved.
The brand identity was run throughout all promotional collateral giving them a stronger and more consistent new identity. A comprehensive set of guidelines was also crafted to allow the brand to evolve while maintaining a level of consistency and consideration to all promotional material.
One25 presented a brief up front but we knew that to get to the bottom of the issues and problems facing One25, we would need to run a workshop involving their main stakeholders.
Knowing what One25 wanted from their new website, we were able to shape a requirements gathering workshop around these ideas. We got the main stakeholders of the charity into the workshop and ran through our process of discovery. From this process we discovered two important areas of the website that we could develop further than the original brief.
One was the story section on the site, One25 have some very powerful stories from the women they help to step away from the streets. On the old website these were held as Microsoft Word files hidden deep within the site. We made it an aim of the new site to bring these to the forefront and make sure they could easily be shared through social networks hopefully increasing the reach of the One25 charity through organic sharing.
Another area that we wanted to develop further was around the numerous volunteers who help behind the scenes at One25. After exploring how the CiviCRM handled the volunteers, we decided to build an extra level of login to the One25 site where volunteers could login and put a face to the many names they would see noted on lists around the drop in centre.
As well as this technical exploration, we also ran through user journeys and looked at how to make the donation process as simple as possible for both mobile and desktop. All of the information gathered was then put into a technical specification and document of requirements that both parties agreed on.
Once the documents were signed off we moved into the wireframe / prototyping stage. We knew from the research what asks we would be placing on the users visiting the site and also, from One25’s analytics, could check to see what pages were most popular previously to make certain we kept everything visible. We knew from research that ensuring the donation button was easy to find, and prominent on all pages, was important.
One25 had also worked on a sitemap which meant that when it came to creating the wireframe we were able to use real menu titles. This meant we could create a list of tasks for our testers to complete. One25 let us test the wireframe on some of their potential website visitors, including regular donors, potential donors and people from the industry. We ran the tests at the One25 office, using a laptop plugged into a monitor, to confirm that the user was presented with a familiar interface to use. The two of us present from Atomic Smash, gathered feedback from the users – one acting as the host / tester and the other was an observer taking notes.
The feedback we received was then directly fed into the wireframes where we were able to improve the user experience based on the information gathered from the testing session.
The website redesign and development happened in tandem which meant that we could consider how it would be applied in a digital format to help them spread their message online.
Once the new brand route was signed off, we went through the process of designing a web style tile. We have found this to be a great way to start any digital design process, it allows us to look at all the usual elements of website with a consistent tone of visual language applied to it.
The style tile we produced showcased how different fonts would appear on the site, how the top menu might look and what styling / interactions would be applied to buttons. As well as being a good stepping stone for the client to see the natural progression through our process, it also works as a great reference for the development team to look back on ensuring a consistent style is used through the website.
From the wireframe stage we knew the individual templates would need to be designed for the site.
See how Atomic Smash could help make your website work harder for you.
As well as these templates that have very particular tasks associated with them, One25 also required the flexibility to be able to build up their own more generic pages such as ‘About us’, ‘Myth busting’, ‘Jobs’ and ‘Get involved’. We designed a very intelligent way of allowing our users to be able to build a whole range of templates using our own Modular Content approach. By enabling users to build up their own pages from a predefined series of content blocks which are determined in the planning stage this allows for great levels of creativity from the content production team in house at One25.
The bespoke Modular Content areas that we designed were.
Each template came with it’s own set of design challenges, but having worked through the wireframe process meant that we had a strong foundation to design upon that had been backed up with some first hand user research. The new branding and style tile was combined with the wireframes to create the first round of designs. These were then showcased to One25 though the InVision app which puts designs into a web browser giving them a much more authentic feeling.
By presenting the designs in person, we could explain the thought process around certain decisions and also re-emphasise that websites today should not line up perfectly due to their responsive nature. Using InVision as the presentation tool it meant that we could collect feedback there and then and make notes straight onto the designs, this really does ensure that communication through the project is clear and nothing gets lost in translation. Being able to use a tool like InVision also helped One25 get a real feeling of how the website would look on a desktop and mobile device.
One25 signed off the website designs, being particularly happy with how the template for the ‘Stories’ had been handled. We knew that we wanted the ‘Stories’ page to have a different feeling to the rest of the site. From our research we knew that the stories were very powerful thus wanted the words on the screen to do the talking. The ‘Stories’ template benefited from having less surrounding content meaning that the reader could focus on the story and then we ensured that there was a powerful call to action at the bottom of the page encouraging either sharing or the action of donating.
Having the wireframes signed off and the designs comprehensively completed means that the process of development is very well planned out before any lines of code have been written. As with all our projects, there is an element of information architecture that needs to be considered.
For One25 the different content types were:
Each of these content types would need their own data input fields in the admin area that needed to be considered and their relationship between different pages also needed to be considered. Breaking content down into these different areas means that adding information through the WordPress interface is very easy for the end user. We always integrate Advanced Custom Fields into our website project which allows for great customisation of WordPress see to it that the clients needs can be met. Having built our own extension for Advanced Custom Fields, we are very familiar with the plug-in for WordPress.
We went through our usual process for developing the One25 website, we built all the HTML first so that we could test in multiple different browsers at different resolutions to ensure quality throughout. Once the desktop and mobile HTML had been built, we then went through the process of integrating it with WordPress. By planning beforehand the content that would need to be added to the site, we could make certain that this part of the process held no surprises that might cause a delay.
The most technical part of the website was the integration with CiviCRM. From our requirements gathering session early in the project, we knew all the external systems that the website might need to integrate with. One25 did not know that we would be able to utilise a lot of the information stored within CiviCRM to help them reduce their administrative side of things. By allowing the website to talk to the CRM, we could develop a custom ‘Volunteer login’ section.
Once the site had been developed internally we held a review to ensure that all the elements that seemed like a good idea in the design and wireframe stage actually worked well in practice. With all our projects, we take this agile approach and anticipate having to make design / visual tweaks on the site once it is in the browser. After all this was completed, we held a training day at the One25 HQ and trained up four members of their team on how to add content to the website whilst also covering best practises for Search Engine Optimisation (SEO) and handling images.
We know that with any website project, it should be an on-going piece of work that evolves as more insights into users are uncovered. By having monthly meetings with the One25 team, we are able to input direct feedback into the website making it easier for their internal team to use as well as their potential donors.
As well as these monthly meetings we also see to it that the WordPress engine running the website is constantly kept up to date to minimise security threats as well as keeping performance at a maximum.