Web Product Design

AgileMD Webapp

Role: Sole product designer and user researcher
At AgileMD I designed a secure, online webapp that includes an author section, similar to Google Docs, a reader, a library and an administration section. The Author piece of the tool existed before I arrived and I did small design changes to improve its usability.

 
AgileMD Library viewer

AgileMD Library viewer

Library viewer

AgileMD is essentially a kindle + Google Docs for medical students and doctors. The Library allows users to find content, purchase it, and reference it offline when working in hospitals or clinics. The author tool is much like Google Docs.

Diagnosis tree viewer for AgileMD

Diagnosis tree viewer for AgileMD

Content usage dashboard

Each “book” in the AgileMD Library has content owners and admins (see the admin tool to the right). Admins of each book want to see how their book is doing, who’s using it, etc.

Specifications for Admin webapp dashboard.

Specifications for Admin webapp dashboard.

Specifications for admin dashboard

The administrative dashboard was created before the usage dashboard design. This part of the AgileMD webapp was mainly for managing users who could download the book, administrators and content editors.

Specifications like the ones shown here are a necessity for complex webapps. They come in handy when facilitating conversations with stakeholders such as product, engineering, QA, support, product marketing, new employees, etc.

 
Diagnosis tree viewer for AgileMD

Diagnosis tree viewer for AgileMD

Diagnosis tree viewer

AgileMD’s Library not only included books but decision algorithms, or decision trees. Users could view these trees as a tree (shown above) or a guided flow (shown on the right). These trees were bundled into books that needed to be purchased and download via the library and could be viewed on the web or mobile app.

Diagnosis tree interactive tool for AgileMD

Diagnosis tree interactive tool for AgileMD

Guided diagnosis tree view

The guided decision tree view would present users with questions and as they answered, it would take them to the next question. Research showed both views were necessary depending on the users familiarity with the topic. The more knowledgeable they were the more likely they would want the tree view vs the guided view. Both views could be navigate on the mobile app as well.

Diagnosis tree author for AgileMD

Diagnosis tree author for AgileMD

Diagnosis tree author

In order to create a decision tree for the AgileMD platform, an admin had to have an interface to draw out the decision flows (example above). This was similar to creating an interface similar to applications like Omnigraffle. You can think of it like creating an org chart almost, just more complex.