Buildin' an EHR- Healthcare Edition #1
Designing the patient side
So it's the goddam weekend again and my hands are feeling itchy mostly because I haven't designed stuff for quite a while now and after spending the past 2 days working with WebGL I need a breather. And what a better breather than sipping Martini and munching on KitKat's while moving pixels across the screen...
Some more why...
I have also been in talks with a healthcare company which has caused me to dive into the Healthcare ecosystem and this line from this wonderful newsletter that I subbed to probably sums up how I feel:
"a man losing his f''''king mind as he peels more layers back of the onion that is US healthcare..."
I mean it's kinda slowly becoming one of my favourite industries I ever came across. I mean the patient experience is like a mangled animal carcass. The system is as messy as a moist bag of fucklint (maybe even more messier than that) and there's so much scope for innovation that I am already bubbling with so many ideas that I might burst if I don't let it all out. Messy industries are just the kind of industries I would wanna work in!
And so I decided to go with building a CRM mostly because I haven't ever built or designed a CRM ever, so I might learn a thing or two and have something to brag about in my CV.
So what exactly are we building Kay...?
I don't know! I mean I am not Richard Simons that I would know my every next move.
So from my understanding, the CRM/EHR/EMR/whaterver-the-fuck-it-is will have basically two purposes:
- Better collaborating with patients on the patient journey
- Better management
With that in mind here are all the things that came to my mind of what we can build:
There's literally no research gone into building it...
So the thing is, usually when I am professionally building things there's a ton of research that goes on before I build anything. Just for reference here's what the usual process looks like...
and I am basically skipping all that stuff and going straight to the visual expression... (mostly because there are only so many unpaid financially unviable side projects I can do in one weekend).
I guess that should probably give you an idea of how little research is put into this thing.
So use it with caution, is what I'm saying
Moodboard
Then I went through the whole stylescape process of:
- Defining attributes:
2. Creating Image Buckets:
3. Empathy Mapping:
Read some very interesting research papers on designing for healthcare and did some empath mapping...
And then taking inspiration from this:
Here are the colours and fonts I settled for.
Finally building some shit...
Not that we're over with the basic look tone and feel for the thing is set let's start building the goddam thing.
So here's the process that I'll be using to build it:
Here's the process that I used while building it:
- Research: Reading the API docs of redox and healthjump to see what practical data is available from EMRs, browsing Behance and stuff for similar types of stuff to get an idea of what things should go, where they should and any “inspirations”
- Breadboarding
- Fat Marker Sketches (on the whiteboard today) to get a brief 2d idea of the structure of content and provide the right level of abstraction.
- Pen and Paper Wireframes (no more than 3 wireframes per component)
- The Final Mockups: Will skip the digital wireframes and just directly build the high fidelity designs design, since I don't need to get approvals and stuff.
The dashboard sidebar thingy...
I think I’ll go with the boxy ones, they fit more with the design language...
Final Prototype:
Now with that done, I'm gonna start with the patient screen since that seems to be the most complex and challenging one...
The Multi-patient Screen
So it seems that the patient screen can be broken into two levels:
- The Multi-Patient List Screen
- The Detailed Patient Screen
Okay, let's make the multi-patient list first.
Notes
- So while I was building I noticed that I was just cluttering the UI with all the filter and sort features that I was adding, so for now, I am just gonna hide it all under one common filter button
- Will be skipping the pen-paper wireframes for this one since the fat marker sketches are good enough.
- Not sure if I should add the edit and delete buttons will remove them for now...
- Are age and sex really that important here? I mean it's the 21st century for pete's sake!
- Will remove the collum headers, since the details are pretty obvious
- Adding a simple global search instead of all those filters
- Decided to combine UI components one and two, cause I didn’t know what to do with the rest of the space that I had when I was using the first one. Could be used on small screens though.
Notes
- Felt bored while adding all that data so decided to make things a bit fun. A bit too much fun I am afraid.
- Now I know I can never take up a data entry job in the future.
- My favourite one… I’m going with the classics, Wan Curr.
- Jack Richards doesn't know how damn lucky he was.
The Detailed Patient Screen
So after an extra long lunch break, I am back the next day to work on the patient details screen.
The Patient Overview Card
Notes
- Should I include backlinks in the detailed cards…?
The Medication Card
Notes
- Why is my handwriting on the whiteboard so bad?
- Looked into the Redox API docs and looks like all the stuff, except the diet one is available
- I can link these cards with some kind of a patient app too! ...to build some kind of medicine tracker, so that the doc can see if the patient is taking his meds or not. But maybe an idea for later on.
- Decided to combine all of the above options.
Notes
- Why I too don't have blue eyes like Jack Richards, I want them too.
Notes
- I know what you’re thinking… I actually do know, I’m a psychic, "KAY WHY THE HELL DO YOU NEED VITAMIN C FOR MIGRAINE?"
- Honestly, I don’t know why I wrote that. Will have to try the next time I have migraine.
The Diagnostic Overview Card
This one was a bit challenging I have to say took me 4 hours to come up with the final solution.
- The sketches that I was initially coming up with were just too text-heavy, I wanted it to be a bit more visual, something with a lot less clutter and more hierarchy.
- Had to do a bit more research. Two things caught my eye and got me thinking:
- I think I now had some idea. I am gonna break it into two parts:
a) The Overview card, shows all the diagnostics visually as pins on the body area, and you can click on them to access the detailed notes
b) The Detailed Notes/Files/Docs Section
Notes
- Not sure if I should include the timeline, maybe I can replace it with something else.
- I gave him abs, look how happy he is now : )
- What should I include exactly in the popups…? Dick enlargement pill ads..?
- Have added the option to toggle the diagram to a particular system view or an organ view or a combined one. Should I make both lists combined...?
Notes
- I don’t like it, something feels wrong (maybe it's just my low blood sugar)
- Will replace the arrow with a button
- I think I’ll remove the diagnostic history text, for now, maybe we can have it as a separate component.
So here is what I came up with after all the modifications:
Notes
- The pinning feature is what I’m worried about for now. Maybe I can use the raycaster in three.js to do it. But either someone has to do the pinning manually or positions have to be manually fed into the system for different models.
- Might make the model a 2d image version in the MVP version to ship faster
The Detailed Notes Card
Notes
I HAVE CUTE SOCKS !!!!!!!!
Sorry, I just had to get it out of my system.
Continue
Notes
- Could add print/export options to export it as an e-prescription in the dev phase... if I ever take this side project that far...
Patient Vitals
Document View Card
And thas's a wrap boys, time to pack up the bags... the weekends are over.
I actually got a lot far than I thought I would... might continue it next weekend...
So where's this going...?
There are two things that can happen to this side project:
- This. (cause, after I started doing a bit more reading, came across articles like these and I think that maybe I am just oversimplifying things. I think I was just going through stage two of the "The Six Stages of Health Tech Grief".) Basically that's me rationalizing my way out of side projects.
- Or maybe since I think I like where this is going I might just finish the designs and dev it up... maybe using something like Typescript and Storybook(I've honestly been wanting to try it out for quite a while too you know) and I can maybe develop it as a whole customizable design system with different resizable and customizable UI components and create a dummy backend using say... Redox or... healthjump (which I've also been dying to try out for quite a while too) and sell the whole product in bulk and make a nice chika change from it using which I'll prolly buy a really expensive Hawaiian shirt and later regret buying it...
- I might just get lost is dark depths of my really long cosmic to-do list and I might continue working on it a year later.
Let's see...
You! Yeah you, the person who has nothing better to do than procrastinate by reading this blog written by a random guy from the internet with a kit kat bar sticking on his head... would you be interested in seeing this product all the way through...?