Freedom Rx

About Freedom Rx

Freedom Rx is a communications software that allows pharmacists to connect with medical providers who use Accuro EMR. 

With Freedom RX pharmacists can:

• Receive prescriptions sent by health providers.

• Annotate and review prescriptions.

• Communicate with physicians on the status of a prescription in real time.

Role Accountabilities Delivered

As a designer, I became part of the development team. Working with an agile sprint methodology, I took part in the team’s ceremonies, like daily standups, sprint planning, and retrospectives.

In addition, I was fortunate to work closely with product owners, business analysts, developers, QAs ,and other stakeholders.

 UX+UI Designer

• Established the user flows 

• Defined the information hierarchy 

• Produced high fidelity prototypes

• Attended user tests to document feedback and make rapid adjustments 

Design Challenges

Adjust the user interface to fit the new minimum screen size

Freedom RX’s previous design approach was to have all the workflows operate on a single screen so that the users can view all the information available at all times.

In our research, we discovered that a lot of our users were using small screens and had no intention of updating them. As a result, the previous version of the app was not efficient. 

The new minimum screen size was established of 800px x 600px to make sure all our users can use Freedom RX properly.

In order to make the information more accessible on small screens, we proposed separating the prescription input experience from the prescription viewing experience.

We validated this through some user testing and they expressed that in addition to the information being able to fit in their small screen, it felt more focused as they can concentrate on one task at a time.

Incorporate Material Design into the new Interface

This new redesign was a great opportunity for us to apply Material UI to Freedom Rx as it’s a framework that is being used on other QHR products, however, material components tend to be bigger than the components used before which made it harder for us to implement. 

The solution was to customize material components to a smaller size so that they can fit on the smallest screen. This solution required me to understand material principles, our framework, Angular, and have continuous communication with the front-end developers to identify the components that need changing and support them with the design specification.

Enhancing New Features

Together with the rearranging of the interface, we wanted the users to have a positive experience of change by accompanying the introduction of the new interface with   new features that enhance the users’ workflows

The new features were:

• Add internal Notes

• Set as prescription as completed

• Create a new message

• Set prescription as High priority

• Renewal Request

The Process

As pharmacists used Freedom Rx in their day-to-day, we began to meticulously document their feedback. We learned that a lot of our users had smaller monitors in their workstations with resolutions as limited as 800px by 600px, and naturally, they wanted the software to perform well on those screen resolutions. This challenge inspired us to redesign all the experiences in Freedom Rx from the ground up. The new goal was to enhance Freedom Rx so that it could work for multiple resolutions, and enhance its current features to empower pharmacists.

Creating the Design System

With responsiveness as our biggest challenge, we elected to use Material Design as it had responsive principles that we could incorporate into Freedom RX. The fact that we were already utilizing Material Design in other products allowed us to apply what we’ve learned to this new version and ultimately made it easier for us to enhance Freedom’s functionality.

However, with such a small minimal screen size, it was decided to modify the Material Design component library to a size that would allow us to fit the functionality (this was at a time when Material Design did not support density). This implied resizing many off-the-shelf components to a size that could fit, while also downsizing the fonts as well.

Creating the Experience

With reduced real estate, and to ensure that the solution captured the information the user needed, we made a map of how we wanted the app’s final state to be based on the user workflows. We also decided to move from the layout of a single main screen where the user originally completed all of their work, to a more focused set of screens, each allowing the user to perform the targeted task they wanted to complete. 

User Testing

We tested our designs through user interviews, where we made existing users perform basic tasks such as reviewing, approving, and declining a prescription and managing their inbox. From the feedback gathered, we continued to make adjustments.

Final Version

Handoff

Once the design was ready for development, we organized and led a kickoff meeting presenting the prototype to the team, and gathering feedback on small adjustments that would help developers make the application in a more efficient way. As a next step, we handed off the prototype via Zeplin through a series of screens. Afterward, I kept in touch with the dev team, supporting them with any questions they had, and accommodating them on unforeseen challenges.

Results

• Freedom Rx is being used by Shoppers Drugmart and Loblaws nationwide

• By the end of 2019, Freedom Rx had processed over 1 million prescriptions

• Established Freedom RX’s custom component library that is used to this day.

• Patients whose pharmacists and doctors use Freedom Rx, now have the ability to receive a greater quality of care in less time, with their pharmacist and doctor collaborating in real-time on their prescription needs.