Labby
A novel lab management system built to automate patient needs
My Roles
Full Stack Developer (Front End Focus)
User Researcher
UI Designer
Languages And Tools
Javascript
React
Redux
Saga
NodeJS
Firebase
Figma
Timeline
September 2022 - June 2023
Link To Project
Context
With a small team, the lab was spending too much time manually inputting request information and juggling three different softwares. They needed a improved method to take in customer requests, manage their tasks, and then finally bill their customers.
Solution
1. Streamline form completion and ticket generation.
Labby integrates client form submission and internal ticket generation so each customer request submitted automatically creates a task on the lab's ticket board. This will save the lab time and man-power.
2. Maintain service cost and user information to automatically invoice customers.
Allowing the lab to organize client and services into defined groups mean that billing and invoicing can be automated.
3. Centralize customer facing experiences.
Client confusion can be avoided by creating a single portal allowing them to submit requests and have access to their request information and progress.
Learn More
A New Ticket Dashboard
We wanted to create a ticket board that was similar to those that are currently out there for simplicity and also consistency. This would allow lab members who have used existing ticket boards to organize their work to quickly onboard onto out platform without a large learning curve.
For the lab, a Jira style ticket board was the easiest way to organize and assign work to the other members of the lab. Clicking in on each of the ticket boards allows you to edit them and add assignees. I loved making the ticket cards with an algorithmically generated colour tab for each ticket. I also learned how to make a search bar and filter that allowed you to quickly search for tickets using patterns and filters.
For the lab, a Jira style ticket board was the easiest way to organize and assign work to the other members of the lab. Clicking in on each of the ticket boards allows you to edit them and add assignees. I loved making the ticket cards with an algorithmically generated colour tab for each ticket. I also learned how to make a search bar and filter that allowed you to quickly search for tickets using patterns and filters.
A Custom Form Builder For Dynamic Forms To Fit Any Situation
The lab needed a form builder that allowed them to fully customize forms. For this problem, we decided to the make it a drag and drop feature where the lab technicians could drag a component such as a single select and then customize the question as well as the options.
In this feature I had struggled to figure out how to store the multiple types of questions (Single select, text, multi select). In the end we decided to go with storing all the questions in one table and then having its potential answers stored in another linking them by an “Id”. I could have made each of these components with a component library such as MaterialUI however I did not want the project to have large dependencies and also enjoyed building my own reusable UI react components.
In this feature I had struggled to figure out how to store the multiple types of questions (Single select, text, multi select). In the end we decided to go with storing all the questions in one table and then having its potential answers stored in another linking them by an “Id”. I could have made each of these components with a component library such as MaterialUI however I did not want the project to have large dependencies and also enjoyed building my own reusable UI react components.
An Integrated Billing System For Quick And Easy Billing
One of the biggest features that I took on was the billing and invoicing page. This page allows your to search tickets based on a variety of filters (date range, project, service or lab technician).
After hearing from the lab members that they sometimes receive large volumes of work during certain months, I decided to add a react graph library to display the number of tickets in the time frame selected. This would allow the lab to visualize their workloads during certain months so they can track busy months.
After hearing from the lab members that they sometimes receive large volumes of work during certain months, I decided to add a react graph library to display the number of tickets in the time frame selected. This would allow the lab to visualize their workloads during certain months so they can track busy months.
Once you have selected the tickets you would like to bill, you can then hit the generate invoice button that allows you to preview then generate an invoice.
Reflections On Labby 💭
These are some of the things that I did and learned:
1. I became a collaborative well rounded developer
This project for BC cancer came with a tight deadline and therefore there were many time constraints that we were put under. In order to meet our goals, my team and I had to work together to create meaningful sprints of work while working in an agile environment. This project taught me how to be more organized with projects and to streamline my workflow in order to be more impactful as a developer
2. I took charge and a delivered a full stack feature (Billing and Invoicing)
Working on a full stack story feature taught me how to visualize the data flow from the front end to the back end. I also solidified my understanding of suing certain libraries to make my life easier, For example Recat hook forms, recharts and react calandar allowed me to implement an easy to use interace for the user to filter through tickets
3. I learned how to integrate other react libraries to take care of global state
During this project, I solidified my understanding of React, Redux and Saga. Having more experience with these libraries allowed me to integrate them into components seamlessly and this then allowed me to share state across component. This made each component updateable and interactive for the user who can see the screen updating instantly when they make an action.
4. I did user research and learned more about the iteration process
During the course of develop[ment, the project underwent many stages of the user research and development cycles. First, user research was done for the scope and the requirements of the project. We wanted to get a good idea of what the lab needed and the probelms tht they were trying to solve. Secondly, we had a meeting with the stakeholders once we had something of a rough product for them to try and give feedback. Here we rrally wanted to know if we were heading in the right direction for the project. Lastly, we had regular meetings to reiterate and to polish our application to ensure thatt there were not any bugs. The stakeholders were suing the application end to end like a Beta and they provided feedback on any bugs that they found. Overall this process ensured that we delivered a custimer first product that kept the stakeholders involed through all of the stages