Patient UI Flow

When a patient logs in, they are intelligently directed to register if they are a new user, or simply taken to a QR code screen that the site staff can scan to begin the testing process. If a patient has already registered and been tested but needs a new test, there are redundant links to register for a new test so they can easily start the process anew.

Site Staff UI Flow

When a site staff member logs in, they have quick access to view test results and to view and update patient registration information. They also have a scan tool to scan the patients' QR codes and quickly process new tests.

Wireframes & Prototypes

After the core user flows were mapped out, I began creating basic hand-sketched wireframes to visualize what the screens would look like and what sort of UI elements needed consideration. In addition to basic branding, I considered having a dedicated link in the top-level navigation for the patients' and staff members' most common actions (registering for a new test and scanning a QR code, respectively. Also keeping future expansion in mind, I designed the primary navigation to be easily expandable without further modification.

I used HTML, CSS, and Javascript (including SCSS, the Bulma framework, and jQuery) to build the prototypes. Both prototypes we designed mobile-first and are fully responsive.

Patient Interface Prototype

View the Patient Interface Prototype in a new window

Staff Interface Prototype

View the Staff Interface Prototype in a new window

Next Steps

After in-person user-testing at this stage, I handed off the prototypes to a developer. Next steps were to include results searching and filtering, and more refunded and intelligent controls for entering and updating registration data, and the intital concepting stages for a laboratory staff interface. Unfortunately, before those stages could begin, the client chose to end the project prematurely to focus on a different solution.