Web app & Kiosk
Medifriend
Background
MedifriendRx offers busy pharmacies and clinics without pharmacies vending-style machines (PWS kiosks) that dispense prescription medication to patients for convenience.
My role
Use guidance provided by MedifriendRx to design a web portal that allows pharmacists to manage prescriptions being dispensed by the kiosk(s), and 2) design the kiosk’s touchscreen interface.
Web app UI
- I received branding guidelines from Medifriend and wireframes from their UX designer to mull over first thing. I also asked for examples of similar products with UI’s they liked, and a few examples of those that they did not like.
- Once I’d looked over everything for a bit, I began to do some of my own competitive analysis to see what similar products were doing UI and branding-wise. I then put together a mood board of images, textures and colors that I thought best represented Medifriend’s brand and their desired aesthetic for this new product.
- After showcasing the moodboard and my proposed direction for the UI to Medifriend stakeholders, we decided to move forward.
- I analyzed the wireframes again until I more or less understood what was needed, then referenced the brand guide and started off by creating the base typography set for the app. Then I determined the primary brand color, subsequent color variants, text element colors, state colors, other system colors, and so on. Finally, I made a small component library for the app.
Kiosk
- The PWS kiosk dispenses prescriptions to patients in order to cut down on wait times and free up pharmacists’ time. Instead, a medical assistant helps patients use the kiosk to help them retrieve their prescription(s).
- Certain views/actions can only be accessed by medical assistants or kiosk technicians.
- Patients can complete the dispense flow for their specific medication once a medical assistant allows them to access the kiosk; the patient is also able to have a quick video call with a pharmacist if needed.
