Medifit: A Medical Data Plug-in
During my time as a graduate assistant for the School of Information (iSchool) at Kent State University, I talked with one of my faculty advisors about the frustrations of finding and providing sample data in order to create believable UX deliverables like wireframes and prototypes. As we discussed the issue, we set up a plan to develop a plug-in that would help developers with this problem.
I chose to create this plug-in for the Sketch design software due to its popularity in the UX field as well as its strong plug-in development community and existing plug-in creation tools and templates, primarily skpm. We also decided to focus on medical data since there aren’t a lot of tools, especially in Sketch, that supply this kind of information. My goal was to create a plug-in that would provide examples of diseases, medications, and treatment options for a number of different systems of the body for the most adaptability and ease of use.
Project Timeline:
3 months (March 2020 — May 2020)
Project Goal:
Create a data supplier plug-in for Sketch that provides sample medical data
The Overview
I broke the project down into four steps:
- Import a Data Supplier plug-in template via skpm
- Supply the relevant medical data
- Create the rest of the plug-in’s code
- Publish the plug-in
How I Did It
The first few steps were the easiest. Importing the plug-in template was simple and straightforward; skpm makes it easy to create templates to work with. Providing the medical data was also relatively simple. My first attempt was a series of JSON arrays that contained the data for the main plug-in to use. I made sure that my data came from credible institutions and organizations like the American Heart Association and American Cancer Insitute. This way, users of the plug-in would have the most relevant and credible information in their mockups. For the actual coding, I studied the skpm template and any documentation made available through Sketch’s developer community.
However, because I was unfamiliar with Javascript terminology and operators, troubleshooting became difficult for me, and I ended up with a functional but sloppier version of the plug-in that would be difficult to fix and improve upon. This left me feeling disappointed, but also determined. I wanted something more organized and more representative of my own skill level and imagination. With this in mind, I scrapped the plug-in and began again, this time focusing on learning to build Javascript code from the ground up instead of trying to model my work off of templates or help articles.
The result was a much cleaner plug-in that was entirely my own design, and yet it produced the same results as the earlier version. This new plug-in has nine separate Javascript files for each data category, each with its own array and supplier function. This means that the plug-in only has to call in a single Javascript file with everything in it instead of trying to call in information from JSON elsewhere in the directory. This made much more sense to me, it was built using simple Javascript, and best of all, it worked perfectly during testing.
Challenges & Setbacks
The biggest challenge for me was my inexperience with Javascript coding and the tools required to build the plug-in. At first, I tried to cope with this inexperience by modeling my work based on Sketch documentation and templates provided by skpm.
However, in doing so, I paid attention only to the end product and not the knowledge needed to develop it. I had my plug-in, but I had no idea how to fix it if it broke or how to improve upon it. When I focused instead on learning Javascript and built the plug-in more from scratch, I became familiar with the plug-in’s inner workings; thus, I knew where to go if something needed fixed or updated.
The end result of this project was Medifit, the medical data plug-in for Sketch that can provide randomized example data for medical or health-related mockups built in Sketch. The plug-in supplies information in three categories — Conditions, Medications, and Procedures — for the following body systems and conditions:
- Circulatory System
- Respiratory System
- Musculoskeletal System
- Glandular System
- Digestive System
- Mental Disorders
- Diabetes
- Cancers
- Allergies
The plug-in is available on Sketch’s plug-in directory and can be downloaded HERE.
Although the task was daunting at first, I learned an incredible amount while working on this project. While developing this plug-in, I learned a great deal about Sketch and skpm, as well as Javascript coding and working with command line tools on MacOS.
Not only did the plug-in project expand my skill set, it also improved my work ethic. This project taught me a great deal about patience, diligence, and the importance of trusting your own instincts. While I learned a lot form the resources within Sketch developer community, I was able to create own success by focusing on educating myself rather than making it work on the first try. This made the second attempt all the better and much more rewarding.
Overall, this was a great opportunity for me; I am proud to have made my first contribution to the UX development community, and I hope to make many more going forward!
