The Annotation Tool

THE PROBLEM

How can we merge the Annotation Tool into the main application to add value for our users?
What improvements can we make to ensure the tool is usable?

As a company, Medal continuously focused ways to add value to the main application, Medal App. A problem we faced is that we had a variety of healthcare workers who used various parts of our product offering: Medal Print*, Medal App, and the Annotation Tool (previously called BRAT) Our users mentioned wanting to be able to access the Annotation Tool within the app, so that they wouldn't have to go to a separate URL each time to annotate medical records. This would also allow annotated patient data to be automatically synced as it would merge the two products into a single ecosystem.

*Medal Print was to be deprecated eventually.

THE USERS

Clinical Annotators

need to be able to annotate complex medical data with ease and accuracy, while collaborating with other clinicians and primary care physicians.

Primary Care Physicians

need to be able to read, edit, and comment on annotations done by members of their team - and will need a way to de-identify protected health information (PHI).

Admins

need to be able to manage annotation settings through the Medal App. These settings will consist of editing recognized labels and colors used within the Annotation Tool.

A large part of training AI is having a way to validate patterns. For Medal, that was done partly by clinical annotators and physicians who used our tool.

THE TEAM

UX Designer (me)
VP of Product
Physician Consult & Team
Web Developer Team

For the conception of our Orion Command Center, I worked directly with the VP of Product and the web engineering team to understand constraints from a technical and timeline perspective.

 

During iteration cycles for designs, I would consult with our Director of Design, Mobile UX designer, and User Researcher to validate solutions and gather feedback.

SCOPE & CONSTRAINTS

Get a working demo of the MVP ready within 8 months, so we can debut it at IWCE 2017 in Las Vegas.
Read about the launch..
Deliver the next set of advanced features in 9 months.

For the minimal viable product, we had a timeline of 8 months. For me, it's crucial to come from a place of understanding. I studied the product design document closely for the first couple of weeks to understand proposed feature sets and familiarize with potential technical hiccups we may face.

Our post-MVP goals were focused on more advanced features, such as allowing users to customize their groups settings and user permissions. Our timeline for our second round of deliverables was around 9 months, but we luckily received an extension for this.

Discover & Define

SITE MAP & ARCHITECTURE

To begin planning the architecture of our platform, I created a sitemap to cover basic navigation and user flows based on product requirements in our Product Design Document.

 

Then, I color-coded portions of this map so our team could visualize what parts would be built first, second, and "TBD". This map went through several iterations and presentations with stakeholders - namely, the product team and the engineering team.

 

I felt that it was imperative to get as much feedback as possible from teams to capture any potential issues anyone could find early in our process. What were we missing? What should we consider for the future? These were the answers we all sought to discover.

USER FLOWS & RESEARCH

From the sitemap, I identified the most necessary user flows we should focus on first. To start, we needed a way to get users set-up with their own account with the Orion Command Center and a way to create their own organization.

 

I worked with our user researcher to document comparisons of different sign-up flows. We discussed which flows worked best from our observations and what could be better or improved upon, and then I created an idealized flow based on our finding.

I then presented the flows to the engineering team for feedback and to see where the flow could be optimized to decrease development time.

user-flows.jpg

SKETCHES & PAPER PROTOTYPES

I explored a few different layouts for Orion Command Center by creating sketches, then turning those sketches into paper prototypes.

 

At its core, the platform would need an "overview" screen, and a "details" screen. I found that a  single panel layout that could expand into a dual panel layout was the most versatile for what we were trying to achieve with the Command Center.

I advocated for mobile-first screens, but due to time-constraints, we decided to table it for later. To me, it wasn’t a matter of if we’d do responsive, but when.

 

I kept this in mind and it was the main reason I designed widgets and self-contained sections for content on all the pages.

sketches_paperprototypes_edited.jpg

Wireframes & Mocks

I created gray-scale wireframes to refine my paper prototypes. I used grayscale as a means of cheap preliminary "testing" of the UI. By presenting these to the team, I was able to gain insights on button placement, content legibility, and  page layout.

ACCOUNT REGISTRATION & ACCOUNT CREATION

 Create Account (Empty)
2.2_ Create Account (Compete)
 Org. Details (Empty)
3.2_ Org. Details (Complete)
 Billing (Empty)
 Registration Complete

THE ORION COMMAND CENTER

WF_ Home
WF_ Groups
WF_ Group Details
WF_ User List
WF_ User Profile
WF_ Settings

MVP Deliverables

Next, I created a style guide and high-fidelity mock-ups. The mocks went through a series of iterations and feedback sessions with first the product and design team, then with the engineering teams to make sure I wasn't breaching any technical constraints.

ACCOUNT REGISTRATION & ACCOUNT CREATION

 Create Account (Empty)
1.3_ Create Account (Complete)
sign in (Success)
 Org. Details (Empty)
3.2_ Org. Details (Complete)
Non-billed User Profile

THE ORION COMMAND CENTER

Demo Portal_ Empty
Demo Portal_ Content & Dropdown
Settings-My Profile
Users_ Empty
Users List
Group Details_ Input Hover
Groups List
Groups_ Search Groups
Users_ View Profile

Impact

We needed a minimal viable product to showcase what our Command Center could do, and in turn, generate customer interest. The International Wireless Communications Expo (IWCE) presented the perfect opportunity for our company to demo the Command Center and the Onyx device to potential key players from a variety of industries. Seeing reactions to our enterprise voice platform helped me gauge the initial reception and see what areas could be improved while learning about use cases and applicable situations.

We wanted to capture as many leads as possible - those who would be interested in learning more and potentially signing contracts in the future. Aside from gaining valuable insights from those that could benefit from our product, creating this MVP was a huge money saver because we didn't have to allocate resources to build everything that we thought was "right" for the product, but instead built minimal managerial functions to allow admins to manage their organizations through the Command Center, which in turn, gave us an established base point to churn interest in different market sectors.

Shipped MVP Features:

• View, add, or remove users from your organization

• View, add, or remove groups from your organization

• Assign group leaders within communication channels to manage teams

• Edit group name and what groups users can participate in

• Monitor recently added users or groups from the dashboard

• Sync data with the Orion Mobile App to give users a seamless experience

 

Case Studies

A SHOWCASE OF MY WORK AT ORION LABS
The Command Center

From conception to completion, we delivered our minimal viable product in under 8 months.

Settings

To give organizations a way to manage their users and groups, we created "Setting" views to help provision permissions.

Subscription Models
  • LinkedIn - Black Circle

Connect with me on LinkedIn!

© 2020 Toni Chen. All rights reserved.