UI/UX Design / Research / Custom Wordpress Development
MissingDoc is an internal multi-dental-office workflow and document management system (DMS) designed for the front office team at Yeung's Dental PC.
Client: Yeung's Dental PC
Tools Used: Sketch, InVision, Brackets, HTML5, CSS Grid, Custom Wordpress Development, Custom Field Types, Font Awesome Icons, Cyberduck
Site Access: Requires staff login so it is not accessible to the public. Sorry!
Seeing The Same Problem
For the past five years, I have been working at a private dental practice in Lower Manhattan. I lead a team of front desk and billing staff across 3 locations. None of our office computers are merged and centralized. There was a lack of document management, office management and an onboarding process. I've trained over 15 employees and developed my own onboarding process for the new hires, however there were many of the same issues coming up regarding insurance updates and document organization. We had to find a way to help improve everyone's work flow as well as the rest of the business.
Our 3 main problems to solve:
- Lack of management and consistency for internal office paperwork at the dental office
- Different versions of paperwork exists everywhere among 3 locations
- Needed to find control, better organization, quicker productivity and save paper
Plan of Action: Strategy, Discovery and Research
TLDR;I researched to see if there's any internal dental office management system already out there, but had a hard time. There was a lot on my mind about the project's problems, solutions and its features, I needed to translate the idea into words before I forget about any of them. For a couple of days at work, I interviewed the front desk staff and billing staff about the problems and solutions they would like to see, thus, a few days later, the following Google Doc was developed with our findings.
To see the extensive thought process, scroll down within the document below:
Crafting a Solution: Wireframes and Mockups
Wireframes and mockups were designed for the main pages. A prototype of the pages was also created on InVision as a guide. The link was then sent out to my coworkers and providers to get an idea of how the site will function.
First Iteration; Before and After
As you can see, the first version didn't come out too great. On Oct. 6th, I tested the first design on our office computers and my first design was definitely not designed to scale. Everyone was confused as to why the icons and content were all oversized. In the next 15 hours, I continued doing research on dashboard designs and data visualization, changed everything from the font size to white-space including a new color palette. It looked much better than the one designed 2 days prior.
Asthetically speaking, our users didn't care much about the color palette or the branding of the product. They were more focused on the organization and usabillity of the site. After speaking with them, we found:
- the new size of the icons in the navigation were fine and made more sense
- users would like to see words with the icons for faster navigation
- we have many front desks, how do you know who's logged in? does everyone have an account?
- can we have a chat system inside the portal?
The team gave great feedback which gave me the boost to continue with the project. We learned that having a centralized location for all three offices' information was a great benefit to our productivity and quality of knowledge. Although Google Drive exists, we wanted a centralized location of only front desk information and for every staff to have their own accounts to communicate with each other instead of logging into our one and only company email on various computers and using fax or our personal text messages.
Taking Final Design through Development Phase
Coded with Custom Wordpress Development from scratch
A minimum viable product version of MissingDoc was executed and completed in three months. This is how the website looked like live. Creating this project through Custom Wordpress Development from scratch was an interesting and big learning experience. I also applied CSS Grid, Custom Field Types and incorporated Font Awesome icons. The site is functional with login required for staff only. The site has helped the front desk staff complete their onboarding process more seamlessly, improved organization of office information, provider profile pages with credentialing information as well as front desk forms by over 50%. It has lessened everyone's anxiety with the amount of different changes coming in from insurance companies and kept everyone on the same page when new changes do come in.
Final Thoughts, Reflection
This was a good start but it is far from finished. More testing will be needed and then a final design system can be solidified. The project was initially a solution for all of our paperwork mangement problems (ex: insurance updates. making sure all part time and full time front desk staff are updated and have the same knowledge, keeping track of missing claims etc), however, the owners felt it was easier for the office to use the site to keep track of insurance credentialing documents for providers instead.
I would love to work on projects like this in the future. I loved going through the research phase, the analytical phase, design and most definitely the development phase when I saw the entire project come to life!