Workflow Diagram
My role
UX research and design, UI design
The Team
1 Project Manager
5 Backend Developers
1 Business Analyst
2 Stakeholders
Background
I was subcontracted to perform the UX development and UI design for a project for a city entity that wanted to standardize the intake of COVID-19 test results across the city. There were a number of issues that we wanted to address with the platform.
Allowing individual labs to see the results and any errors present with the patient import
Standardize the data import to ensure that data conforms to the same format
Allow the client to view all of the metrics from all of the data sources all in one place
UX Assessment and Workflow
Based upon the purpose of the project, the first action was to create a user understanding document and workflow for the user types. This workflow document was used to outline the pages needed in the wireframe.
Wireframing
After the workflow was approved, I began the process of wireframing the process of the workflow for the user types. There were a number of workflows that needed to be outlined for the application. The workflows were dependent on the roles of the individuals and needed different screens to accomplish tasks.
Here are a few of the screens outlined in the workflows.
User Interface Design
Dashboard View
UI Design
Once I received confirmation and approval on the workflow screens in the wireframe, I developed the UI of the application from the brand guide provided by the client. I wanted to create a clean design with areas that allowed you to focus on the main tasks of the page. I created distinct areas of the page that are secondary in importance but the purpose of the content can be understood easily from color and placement of related icons.
I wanted to use iconography that could be used throughout the application to help relate actions and content. I wanted the numbers and statistics to be easily relatable so I used an infographic model.
Component Library
Component Library
To ensure design consistency of elements, I begin developing a component library to document styles for both me and the frontend developers to use. I documented items such as
states of the labels, buttons, and other UI elements
brand colors and application colors
typographic elements
dropdowns and form elements with specific styling