top of page

UX/UI concept study: How can an intuitive in-app navigation help prevent mis-diagnosis and enrich near future NHS cloud-based system.



Well.b is a conceptual project developed in collaboration with Sebastian Oglecki and exhibited as part of the RCA Design Product degree show in June 2018. Well.b is a wearable device and an AI based digital service designed to continuously monitor cardiovascular system.

Cardiovascular diseases are a №1 killer in the world and the majority of deaths is caused by misdiagnosis. Thus, the main purpose of well.b is to prevent the development of serious illnesses as well as help managing existing chronic conditions by detecting and analysing the changes in biodata through the sophisticated hardware and software. It is not designed to diagnose however it offers a unique opportunity for the user to gain an insight into their health status and as a result take a better care of themselves. Well.b will also make it possible for the health professionals to have an access to a never before available wealth of biodata in order to diagnose and treat more accurately and efficiently.

To start off our journey into the UX/ UI design of well.b we conducted an extensive primary research into existing fitness/ health applications. After studying many market leading apps we identified a few problem areas that we wanted to improve on within our UX and UI. The user has always been at the heart of the project and so we wanted the navigation through the app to be intuitive. We believed the instinctual digital experience would contribute to making self-care almost a second nature to its users in which case the technology would have a chance to meaningfully serve rather than enslave.

Initial user interviews have reviled that the general dashboard views of existing apps appeared to be cluttered and did’t immediately contribute to the user’s understanding of the data and their overall progress (especially in-app navigation was proven to be tricky for the elderly users who are, respectively, our main target audience).


Primary research

So, we began by brainstorming various methods of visualising large amounts of information. We identified that complex bio-data such as the the combination of heart rate, blood pressure, blood oxygenation, respiratory rate readings and so on is unlikely to be understood by an average person and thus will be proven to be useless. However, we thought the data visualisation might be able to effectively communicate its meaning because according to many scientific studies human brain processes images 60,000 times faster than text, and 90 percent of information transmitted to the brain is visual. And so, our task number one was to erase all that we’ve seen other fitness/ health apps do with information and start with the blank page. We, also, had an idea that perhaps the user doesn't even need to see all the information, at least not in it’s numerical form (we wanted the software to do the hard bit — calculating, not the user).

We played around with various ideas of visually representing the big picture of the user’s health status. Early prototypes included: a user look alike avatar, emoji like icons expressing how the user is doing, angular vs soft shapes and colour combinations to represent good/average/ bad.

avatar app prototypes.jpg

UI prototype No 1.

Whilst sketching various characters and thinking of avatars entertained our imagination and took us down the memory lane of playing computer games as kids, we decided many users would find it hard to associate with it as well as it could limit overall UX of the app. Nevertheless, we loved the idea of the primal effectiveness of colour and shapes. We discovered that different colours can signify various factors — for instance red stands for danger/action/anger and green is identified with nature/safety/growth. We started off by designing the home page of the app and played with combinations of colours and shapes resembling readings from different sensors (circle + green = normal; rounded rectangle + amber = normal/ abnormal [might require attention]; sharp cornered pentagon + red = extreme [requires immediate attention/ offers to call emergency services]).

app prototypes.jpg

UI prototype No 2.

We then expanded on the above idea and decided to divide the screen into a traffic light looking sections that would represent normal, normal/abnormal and extreme data categories. The traffic light data categorising idea was inspired by our research into professional health assessment methods. We discovered that the National Early Warning Score (NEWS) card is widely used by the NHS staff, especially paramedics when attending to patients in emergency (see below). NEWS is based on a system of scoring a patient a number (0-3) and colour coding their well- being (green, amber and red). Once we had the systematic backdrop in place we then added a colour changing shape resembling real time combination of sensory data readings. The shape would float between the sections depending on user’s live biodata readings (see prototypes below).

news small_edited.jpg

National Early Warning Score (NEWS) — scoring system used by NHS staff

app prototype 2.jpg

UI prototype No 3. (Normal | Normal/ Abnormal | Extreme | Week Summary)

The above UI prototypes have been presented to our user test group and the feedback was that the shapes didn’t work very well and were rather confusing, however the colours generally worked and the users seamed to understand the layout straight away. And so we decided to stick with the traffic light colour scheme and set the real time floating shape to a neutral form— the circle (see below).


UI prototype No 3. (Normal | Normal/ Abnormal | Extreme | Week Summary)

After prototyping other landing screens it was clear that the traffic light backdrop worked for most data visualisation including daily/weekly/monthly reports as well as it allowed us to represent the readings from individual sensors when viewed in detail (see below).

4 screen prototype.jpg

Month | Week | Normal/ Abnormal Sensor View | Suggested Reasons view ->



The above case study has revealed some important findings for the overall project. We felt that UCD methods we used allowed us to remain true to our heart felt concept of prevention being better than cure by putting the user at the centre of the project. Whilst we feel the core of the UX/UI has been identified, there is still a lot to achieve in the area of helping the user to communicate with the app so it can learn and improve itself which would result in a better service overall. The UX/UI and service prototyping has also proved for the digital side of the project to be very multi-faceted and wholesome which made us think to perhaps drop the physical product and solemnly focus on the digital service. This would mean for well.b to become a self-sufficient digital platform that would be compatible with already existing wearables and link smart self-care with the fast approaching paperless NHS. #powerofprototyping

bottom of page