UX Work

Behind the scenes

Document Builder Video Series

Video walkthrough series for a CMS used to build document for clinical trials.
Document Builder Overview
Document Builder Overview
Document Builder Overview
Product video (3m)
KanBan Workflow
KanBan Workflow
KanBan Workflow
Product video (2m)
Building a Section
Building a Section
Building a Section
Product video (2m)
Control Advanced Properties
Control Advanced Properties
Control Advanced Properties
Product video (2m)

Document Builder Wireframes

The examples below show the iterate steps taken to design the final interface for the Document Builder application.
Initial Wireframe
Initial wireframe
Initial Wireframe
Wireframe Version 2
Wireframe Version 2
Wireframe Version 2
Final Wireframe
Final Wireframe
Final Wireframe
Final Redline
Final Redline
Final Redline

UX Architecture

The examples below show high level architectural documents which describe high-level processes and flows for several applications and/or application features.
Document Builder Architecture
Document Builder Architecture
Document Builder Architecture
User Roles by Environment
User Roles by Environment
User Roles by Environment
Code Structure / Interactions
Code Structure / Interactions
Code Structure / Interactions
Global Search Results
Global Search Results
Global Search Results

UX Flow Diagrams

The examples below are flow diagrams, which show user flows for several product features. They are used to help Product Management and Development understand a user’s flow and the options available in each step.
Patient Portal Integration
Patient Portal Integration
Patient Portal Integration
Patient Portal integrated with our mobile web app
Adding a User
Adding a User
Adding a User
Adding a Form
Adding a Form
Adding a Form
Associating Forms to Visits
Associating Forms to Visits
Associating Forms to Visits
Removing an Appointment
Removing an Appointment
Removing an Appointment

UI Design Documents

The examples below are several recent application interface design documents I have worked on as well as a pattern library document.
Monitor Dashboard
Monitor Dashboard
Monitor Dashboard
High level details of clinical trial's progress
Document Builder Application
Document Builder Application
Document Builder Application
Drag & Drop CMS for creating clinical trial documents
Kanban Task Management System
Kanban Task Management System
Kanban Task Management System
Used to show progress of document building tasks
Pattern Library
Pattern Library
NG Now Pattern Library
Pattern Library developed for a new application

UI Redlines

The examples below are several examples of redline comps. These are used to convey exact measurements to the development team to ensure the final code written uses consistent spacing, sizing and properties for all elements in the UI. They are generally based upon rules established in the pattern library and many times will refer to the exact css property written when available.
Global Search Elements
Global search elements
Global Search Elements
Skyline Scanning Panel
Skyline Scanning Panel
Skyline Scanning Panel
Document Builder Application
Document Builder Application
Document Builder Application
Mobile Web App
Mobile Web App
Mobile Web App

Personas

The examples below are several examples of personas my team and I created. They were developed after we interviewed our users in order to better understand their behaviors and how they interact with our application.
Clinical Research Coordinator
Clinical Research Coordinator
Persona
Clinical Research Coordinator
Data Manager
Data Manager
Persona
Data Manager
Clinical Monitor
Clinical Monitor
Persona
Clinical Monitor
Clinical Research Coordinator
Clinical Research Coordinator
Persona
Clinical Research Coordinator