NHS Give Blood
A house blend project, I started this project because I donate blood as often as possible and noticed that whilst the app is usable, it is quite outdated. I wanted to address some of the usability problems with the existing NHS Give Blood app.
The app allows people to register to donate blood, book and change their appointment, as well as checking their eligibility to give blood and look at their history of donations.
Problems
The first problem (and the problem that led me to start this redesign) is that the current app is currently very basic and lacks many of the mobile design features that are now expected in modern applications.
The second problem is that the interface lacks smooth navigation; jumping around when moving from one page to another, taking a long time to load and having large blocks of text throughout. For those unfamiliar with technology or with sight difficulties, this could be problematic. My aim is to create a more compassionate, friendly and inviting interface for all users as the experience that comes with giving blood is exactly those things.
First Steps -
User Persona
Before starting any form of prototyping or designing, I knew I should create a persona; a semi-fictional character based on someone who uses the service, and for me to relate to during the design process.
After doing some research on the average age and gender of people who give blood (45+ and even for genders) I created a persona around this. Her name is Charlotte; a 50-year-old woman who works as an engineer. She gives blood 3 times a year and is somewhat familiar with using up-to-date technology. Her motivation for giving blood is that she feels as if that doing something as little as giving blood could help another, she should.
Wireframe
From here I started a very basic paper wireframe based on how I imagined a new design could look. This included clearer and more accessible call to actions. This is because I want to accommodate for everyone using the app, those with and without sight difficulties, and those familiar and unfamiliar with mobile technology.
First iteration -
1st iteration made in Figma
There are two iterations of this design.
The first was based on my initial paper wireframe. Whilst on paper I thought It would turn out quite well when I started creating it on Figma, I realised it just wasn’t coming out the way I wanted it to. I wasn’t happy with what I was designing. My aim was for the new design to look sleeker, more refined and modern, and I felt as if what I was creating was the opposite of this. I decided to take a step back, take some time to look at examples of modern apps and come back to the project with fresh eyes.
Second iteration -
After having looked at other people’s work on Behance and reading up on how to use tools on Figma, I returned to the project.
I decided to duplicate the entire project and remove all aspects of the design I didn’t like. This quickly turned into a complete teardown of the first iteration. I began to use shading effects to make buttons appear more interactive as well as using a clean background without colour gradients.
I also wanted to make the registration questions more interactive and less ‘bureaucratic’, so I decided to use a carousel template for each question, reducing the cognitive overload that having multiple questions on one screen invites. Displaying only one question at a time reduces that overload, keeps users engaged, and makes their experience of navigating through the app smoother.
As well as this, I wanted to add a semi-permanent background. Many of the projects I found on Behance had this design feature and to avoid having the design quite literally look as sterile as a hospital hallway, I decided to include this. At first, I was adding backgrounds in left right and centre but I quickly learned it was too much, too fast. Using Canva I created ‘bubbles’ to have in the background that utilise the pre-existing colours from my colour palette. I think this helps solve the problem of having too much white space in the background, however, I am definitely open to learning more about how to manage this problem as I am aware that this could be done better.
To Summarise…
I highlighted two problems at the beginning of this project:
Basic design features
An interface lacking in smooth navigation
For the first problem, I would like to think I managed to create, even on a basic level, a more updated/modern, and user-centred design for the app. I really wanted to include as many personal pronouns as possible to provide a friendly and personalised experience to compliment the experience you receive when actually giving blood.
For the second problem, I changed many of the ways in which content is displayed on the app. I believe this helps with the navigation of the interface as users can now view content in more bite-sized, manageable chunks. The way in which this content moves (the registration questions for example) allows for more focused and engaging use of information.
I also included a sign-up confirmation page. I thought this could be a good addition to making the experience more friendly and inviting as the user receives positive feedback from the app. This, in theory, helps add to provide a positive experience from the beginning of their journey (signing up to give blood) to the end (leaving the blood donation centre and booking their next appointment).
Check out the prototype on Figma!
I do all my prototyping in Figma, but please note I am still learning and still updating this project as often as I can. I don’t think I will ever be completely finished with this project as designing is an iterative process and something to keep going back to. So, keep an eye out for changes and updates to this project as I still have a ways to go! I hope you enjoyed this house blend as much as I enjoyed (and continue to enjoy) making it!