BRIAN

QUAN

DrugiQ

Healthcare App Product Design

DrugiQ gives patients a confident second opinion with not only one pharmacist, but with the collective intelligence of hundreds of drug therapy experts to empower patients with knowledge of the right medication.

DrugiQ features information on medication, comparative information on alternatives, the ability to get consultation from a real pharmacist, as well as fulfillment of medication refills and of digital prescriptions.

In our scenario here, we see a patient looking up the drug Lovasatin, a heart medication. It shows a general recommendation score and a risk factor grade. After answering a few key details, the scores are customized to a specific situation (sex, age, diabetes, past cardiac events, etc). This new score suggests that there are alternative medications that pharmacists would recommend over Lovastatin, with lower risk factors, to a patient of this situation.

I was the Lead Designer and the Front-End on the project.

Worked with a Doctor of pharmacy, Lead Developer, Business Analyst and two other Designers. The close-knit team allowed us to run quickly in a Lean UX format.

The venture began at the Hacking Health Hackathon

Research

The team conducted surveys and interviews with members of the public about their experiences with medication and healthcare.

We had the entire team involved, which helped to get everyone on the same page, develop empathy and be able to reference real people to justify design and business decisions.

Personas & Scenarios

With the collected and analyzed data, we developed personas and limited scenarios to work with for the ideation of DrugiQ features. They were constantly referenced for the design and development of the alpha version.

Flows & Information Architecture

Basic information flows were first designed, without UI, for a quick lean design and to quickly get to the next steps. These were then used to determine what is useful information to present to the user. Basic site flow and architecture allowed dev work to immediately begin on the backend, without any waiting.

Sketched Wireframes & Site Flows

Working in a Lean UX fashion, wireframes and site flows were designed in hand sketches, that were rapidly iterated. This allowed us to be faster and skip the need for digital artifacts. The developer was able to immediately go into programming base interactions. I was able to skip mockups and design directly in code. I styled and animated all elements of the front-end design.

UI Metaphors & Representations

Lots of thought and iteration was put into the development of many interface elements such as the medication score widget. Different patterns were explored to see what would be the most intuitive representations. Through successive back and forth with our Pharmacy expert, we were able to determine what would be easy for a patient to understand, given the available medical data.

The final design of the Score Widget. It was designed through dozens of iterations to best represent the available recommendation data.


Purple was the main colour chosen for the branding, for its association with trust and reliability.

The pill shape was used as part of the visual language, as can be seen here in the Score Widget and buttons.

Comparison feature to compare other equivalent medications using data provided by pharmacy professionals.

As a new service that brings greater patient care to pharmacy and medication - I steered the design process from the initial brief, through audience research, ideation, and iterative concept development, to designing the user flows and wireframes, and front-end dev of the alpha.

Role:

Principal User Experience and UI Design, Front-End Development

Skills involved:

User interviews and research, Lean UX, paper prototyping and flows, HTML/CSS/Javascript, Clojure

Connect with Brian!
Message me! Let's talk!
Lift to Top