MyDispense

MyDispense is an award winning and internationally utilised web application allowing pharmacy students to develop and practise their dispensing skills in a virtual pharmacy.

Client: Monash University

UI design, Front-end development, 3D, Brand development

User interface layout

Project info

Monash University’s Faculty of Pharmacy and Pharmaceutical Sciences sought to develop a new program to improve students’ specialist skills and knowledge within a safe environment. This gave birth to the development of MyDispense, starting in 2011. I was engaged from early planning stages to give artistic direction, as well as design the user interface, develop the front end, and create promotional material.

With this program, students can now gain experience by practising the dispensing process over and over and learning from their mistakes, without the serious consequences of these mistakes occurring in a real pharmacy setting. As medication safety is paramount and teaching dispensing skills is usually resource-intensive, MyDispense has innovated pharmacy education for institutions and students around the globe.

For more information about the project, visit MyDispense.

Creating the virtual environment

Community pharmacy shopfront scene

Prior to my inclusion, the project's direction was leaning towards an interactive 3D environment, similar to first-person view games in which users control a character. This presented some issues. MyDispense needed to be a desktop experience, accessible to a wide variety of users; yet interactive 3D environments rely on specific plugins, and the application’s performance would drop significantly on devices with lower specifications. Additionally, we could not assume that every user would be proficient in controlling a 3D character, which would prohibit usability.

We decided on a static approach where we would present students with pre-rendered pharmacy scenes and customers within a dynamic web layout. This significantly increased the usability, as any device with a web browser is able to access the web application. I built and rendered the pharmacy scenes using 3ds Max. The 3D environment set the scene and presented the elements students could interact with in a given exercise.

Pharmacy backroom scene

Alternative pharmacy backroom scene

Over the counter scene

Meet the customers

To fit the style of the 3D environment, a wide range of 3D generated customer images with various ages and body types were required. I designed these images using a character modelling/posing application, Daz3D.

Modals... Modals everywhere

To facilitate the complex dispensing tasks students need to undertake, the application required various blocks of interfaces. In response, I designed a flexible modal system, using a visual language which incorporated skeuomorphic design elements to better match the simulation style.

Dispense screen

Prescriber fact finding

Benchtop activities

Product selection

Prescription and printed label

Interactive pill counting

Faulty prescription validation

References and notes

Registry entry

Shaping the user experience

Students would need to switch between the modals and the pharmacy environment regularly, so we implemented a taskbar-style interaction which helped minimise/restore modals or swap between them. This included navigation to move between different scenes of the virtual pharmacy, as well as an inventory view, so students could quickly see products and labels. I chose a dark colour theme for the main user interface to bring forward and emphasise the actual content of the application: 3d environment and modals.

Patient fact finding

Inventory view and prescription modal

Printed labels manager and notes modal

Product comparison under product selection

UI elements

Icon set used within the application

Product selection background illustrations

Creating over 100 distinct signatures for virtual prescribers with a stylus was quite entertaining.

Authoring environment

An administrative authoring environment to manage and create all aspects of the application was designed alongside the student environment. This required in depth planning and wireframing prior to design and development and received continuous updates based on feedback from users.