UI/UX Design / Custom Wordpress Development
MissingDoc is an internal multi-dental-office workflow and document management system concept designed for a team of 14 front desk staffs to better organize office information and paperwork.
Tools Used: Sketch, InVision, Brackets, HTML5, CSSGrid, Custom Wordpress Development, Custom Field Types, Font Awesome Icons, Cyberduck
Site Access: Requires staff login so it is not accessible to the public. Sorry!
- Lack of management and consistency for internal office paperwork at the dental office
- A total of 6 front desk computers among 3 locations. Different versions of paperwork exists everywhere
- Needed to find control, better organization, quicker productivity and save paper
For the past four years, I have been working at a private dental practice. The idea came to mind in the beginning of 2017 while I was training our 11th front desk staff. Many frequently asked questions among our team were of the same topics such as insurance coverages, portal password updates, and the location of certain office forms. We have three locations (2 in Downtown Manhattan and 1 in Brooklyn) however, none of our office computers files are merged so it is hard to keep up with updates on multiple computers and a group of staff with different schedules. There was a huge lack of document management. The idea brewed for a long time and I decided to give it a shot last October by creating it with Wordpress Development. It was my first time creating a project with Wordpress Development from scratch and designing a dashboard-type of application. I also thought this would be a great opportunity to explore how to improve staff's work experience more seamlessly in a digital way.
First Attempt; Preliminary Designs
Had an idea of how the pages should look like so I started tinkering. The first one didn't come out too great. I changed the color palette a little bit and it looked much better than the one designed 2 days prior. I was struggling to find a common ground of having a minimalistic, clean look and including enough white space.
Strategy, Discovery and Research
I researched to see if there's any internal dental office management system already out there, but had a hard time finding those. 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.
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. They gave great positive 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.
Mockup of Sign In Screen
Mockup of Account Profile Page
Mockup of Provider Profile Page
Mockup of Chat Room Feature
Some staff suggested a chat room feature so we can communicate with each other when our lines are taken up making appointment for patients or calling insurance.
In December 2017, this is how the website looked like live. Creating this project through Custom Wordpress Development from scratch was an interesting and big learning experience. It was my first time creating a Wordpress theme and coding with Wordpress PHP syntax. I also applied CSS Grid, Custom Field Types and incorporated Font Awesome icons, all for the first time. The site is functional with login required for staff only. It has minimum information, such as organizing office information and provider profile pages with credentialing information, so it still has its limitations.
Overall, I gained a huge amount knowledge and insight working on this concept! There is a lot of learning to be done and a lot more screens to be added, but I am still happy with the amount of work I was able to execute within two months. Definitely happy with how the final design and development looks very similar to my mockups.
Along the way, I was introduced to Front End Frameworks and Progressive Web apps, and felt one of those paths are the better options to execute this idea. So I put this idea on pause and started learning in my spare time.