Praxis-Eins – Patient Prescriptions
Making online services accessible & inclusive for over 60's. View Live Site
Acessible design does not have to be boring! It just requires a different approach.
Any online request is better than patients showing up.
Role
Design Lead
Contribution
UX, UI, Testing, Content Design, Experiment Planning, Illustration & Brand
Platform
Responsive Web
Duration
Ongoing
In the German healthcare system, elderly patients visiting their GP practices wastes time for both patients and staff. This has a negative impact on the overall quality of care in the clinic, as time spent dealing with these requests canot be spent elsewhere.
The majority of elderly patients are going to the practice to collect long-standing prescriptions. My task was to design digital services that were as friendly as possible for patients 60 years and over.
'Seniorifying' the order process
Based on my findings after reviewing the existing site, I stripped out clutter, made interactions more straightforward and broke tasks down into manageable chunks. Clear navigation accounted for memory lapses. Large touch targets with high contrast focus states accounted for poor motor functions. Auto-complete was utilised to reduce typing. We have even experimented with allowing elderly patients to create an account using just their email where they can easily reorder their existing prescriptions without re-typing, reducing effort and errors.
Using breadcrumbs + steppers allows our patients to orientate themselves even when lapses in concentration or distractions occur.
We experimented with quick account creation and pulling in a senior patient's orders to help them re-order a re-occurring prescription more easily. I felt it actually helped having the prescriptions & appointments being different widths for increased recognition.
Iteration Time – Suggest, Don't Force Them To Choose
From our initial release of this new design, I learned that the micro-interactions around actually adding each individual medication within the prescription were not being completed as much as we'd like.
When we looked at this in more detail, this was because our senior patients were not receiving suggestions – they were being forced to choose. The problem was due to tricky indexing and our database results appearing as soon as you typed even one character, seniors were getting distracted and feeling like they couldn't just type what they wanted. Which they could; any online prescription is better than a walk-in.
Before: The interaction though initially well-intentioned, forces the patient to make a choice when they could just carry on typing anything they wanted and that would be enough.
After: The proposed update frames the indexed list of drugs as optional suggestions rather than something the patient HAS to choose from.
Before: The interaction though initially well-intentioned, forces the patient to make a choice when they could just carry on typing anything they wanted and that would be enough.
After: The proposed update frames the indexed list of drugs as optional suggestions rather than something the patient HAS to choose from.
Patients were not receiving suggestions – they were being forced to choose.
From our initial release of this new design, I learned that the micro-interactions around actually adding each individual medication within the prescription were not being completed as much as we'd like.
Shaping An Accessible Aesthetic
Looking at the design initially, the immediate thing that jumped out was the choice of typefaces and their use. Whilst Trebuchet is a solid web-safe font, Recoleta is much more expressive. However, initially it was being used in really heavy weights. This made it difficult to read for anyone, never mind those older patients.
Recoleta became much more expressive and more legible as the weight of the font was reduced and the size increased slightly. See my full thoughts
Besides this we had to consider colours – what existed felt a bit cold, washed out and lacked any contrast to adhere to any perceptual colour models for accessibility.
Combining these with good spacing and hierarchy plus setting font-sizes & spacing units in rems meant that a huge improvement could be made right off the bat without any huge re-brand or grand gestures. After all, different ≠ better.
Before: washed out colours, heavy typefaces & mid-tone colours created something that was neither welcoming nor accessible.
After: application of new colours, type styling & hierarchy helps older patients find the services they need quickly and easily with minimal distractions whilst also improving the visuals too.
Besides this we had to consider colours – what existing felt a bit cold, washed out and lacked any contrast to adhere to any perceptual colour models for accessibility.
Combining these with good spacing and hierarchy plus setting font-sizes & spacing units in rems meant that a huge improvement could be made right off the bat without any huge re-brand or grand gestures.
Creating Illustrations With The Help of Ai
I felt it would be nice to illustrate both staff patients and medical concepts alike using an illustration style. The goal was to find something that complemented the letterforms of Recoleta when placed together.
Initial outputs; from Recraft. Still plenty of work to do here to make something coherent!
Final result; refining things like nose/hand shapes & adding in strong joining lines across things like the shoulders. This made the final result feel more professional but also made sure key forms in the illustration had high contrast for poorer vision.
Initial outputs; from Recraft. Still plenty of work to do here to make something coherent!
Final result; refining things like nose/hand shapes & adding in strong joining lines across things like the shoulders. This made the final result feel more professional but also made sure key forms in the illustration had high contrast for poorer vision.
