Blood Pressure UK Redesign and Website Development

---

---

Creating a design with site-wide iconography that adhered to brand guidelines

Design considerations

HeX worked on the designs for Blood Pressure UK, taking inspiration from the brand that existed on their current website. As a national charity, they needed users to be able to recognise the familiar branding of the site but ensure that it looked sleek and modern to reflect the forward thinking values of Blood Pressure UK. HeX took inspiration from Blood Pressure UK’s signature red and blue logo to create a design that complemented it. 

The design included positive imagery to invoke a feeling of inspiration and positivity amongst the users.

HeX designers created the design with red and blue features, such as the navigation bar, button colours and Heading 1 style.

The site was designed to be simple to use, using icons to communicate services, easy to comprehend navigation and functionality. 

Creating unique iconography

As part of the design, Blood Pressure UK required unique icons to feature prominently on their website. HeX were initially briefed to create 6 unique icons to reflect different aspects of the Blood Pressure UK services. Due to the effectiveness of the 6 icons created, Blood Pressure UK commissioned HeX to design a further 24.

The customised icons were created in accordance with the Blood Pressure UK branding that had been devised. Icons were used to identify different services that Blood Pressure UK were offering. The icons made it clear to users what element of the site they were accessing and gave a visual representation of each service or page that users were navigating to. These icons were implemented into the design, ensuring HeX developers understood the placement of each icon and which service the icons related to. Before being placed into the designs the customised icons were sent to the CEO of Blood Pressure UK to review to ensure they were clear and met expectations. 

---

Developing a mobile responsive site with bespoke API integrations

Creating a mobile responsive site

The previous Blood Pressure UK site was unresponsive when accessed via mobile devices. With mobile devices now making up more than 50% of web traffic, it was essential for their new website to responsively scale down when accessed by different sized devices. 

HeX creates mobile responsive sites as standard; our design process involves ensuring the website can be scaled down to fit mobile screen resolutions. With high blood pressure affecting more than 1 in 3 people in the UK, it was essential that as many people as possible are able to access the Blood Pressure UK website. This meant that ensuring the website also met accessibility requirements, allowing disabled users to be able to access the website with ease. 

Google Map API integrations

HeX developers also implemented a bespoke API integration into the map function of the website. As part of Blood Pressure UK’s ‘Know your numbers’ campaign, they want people to get their blood pressure checked and have a large number of testing stations around the UK.

The website allows a user to enter their address into the map field and find out which testing station is the closest to their home address. 

Inputting a standard iFrame Google map would not have been sufficient here, with the huge amount of data that needed to be sorted through, in order to find the closest station to the user. Using the Custom Google Map API allowed HeX’s developers to input the location of Blood Pressure UK’s testing stations and for the API to assign the closest locations to the user once they inputted their address. This was a vital step in the user journey of the website. The ability to use the search function means that users won’t have to search through a long list of testing stations. 

Integrating a payment portal for membership payments

A membership option was integrated into the website. The payment system allowed users to become members of Blood Pressure UK through monthly direct debit payments or a one-off annual fee. The payments linked to an integrated Smart Debit payment engine, allowing users to enter their details and payment information. This engine managed the payments on behalf of Blood Pressure UK. Smart Debit is used by organisations such as Tesco, the Home Office and large charities such as Age UK. Integrating this Smart Debit system meant that payments to the charity would be fully managed and secure, giving users and the charity peace of mind.

User testing with disabled and non-disabled users

The website was tested by a number of individuals, one of whom was a blind screen reader user. Feedback from the users was incredibly positive, with many commenting on its ease of use and clear and consistent layout. In particular, the screen reader user found no obstacles when navigating the site, this confirmed to us that our development had been carried out in an accessible manner that focused on the user. 

To further confirm the website was accessible, the HeX team ensured testing was carried out periodically throughout the project. Periodic testing at defined intervals meant we could ensure that pages and elements were accessible before moving on. This allowed us to reduce time spent fixing issues retrospectively and focus on proactive accessibility provisions. 

---

Implementing content and delivering training to ensure content editor confidence

The HeX team supported the implementation of the content to the website. HeX worked closely with Blood Pressure UK’s content designer, consulting on accessibility. 

Our responsibility was to ensure that the content designer was able to implement content in the most efficient way possible, this involved slight tweaks post-development. Being able to support the placement of content and ensure it looks how it is supposed to was vital for Blood Pressure UK as it meant that they would have a site that was ready for go-live.

Prior to full handover, HeX supported the training that was given to the Blood Pressure UK. The training allowed Blood Pressure UK’s content writers to have a greater confidence around uploading content and adhering to the content strategy that had been implemented by the content designer. This meant that when handed over and signed off, Blood Pressure UK had a website that had all of the relevant content already implemented and content writers that were able to add content in the future. 

We were pleased with the feedback from the Blood Pressure UK team, and those who tested it. We had a final review and test of the website to ensure it still operated in the way it was supposed to and that it conformed to WCAG 2.1 requirements. Once we were happy that this was the case, the site was sent for sign off with the client.

---

We ensured that the website was perceivable, operable, understandable and robust (POUR) for people with access needs.

Users who had vision, motor and cognitive disabilities were now able to use the site with their assistive technologies. HeX advised on content editor training, allowing BPUK to competently update content on the website once the site handover was complete.

HeX assisted with content implementation, ensuring that the content on the site had been created with accessibility in mind.

Blood Pressure UK received a website that was ready to go live, alongside a detailed handover with what was implemented and how to manage it.

---

More case studies about accessible design and web development