Web app & Kiosk



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.


  • 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.

Next: Self-Saver website