The global COVID-19 pandemic has plunged the world into an unprecedented time of turmoil, in which finding efficient solutions to never-before-seen problems can save lives. Grio has been able to work with collaborators to increase global efficiencies for front line responders. In this blog , I will talk about my recent work with the COVID Staffing Project, redesigning a website that provides resources for emergency personnel.
COVID Staffing Project: Redesign Goals
The COVID Staffing Project was created to help front line responders identify and procure resources during the COVID-19 pandemic. It is a collaboration between the Vanderbilt University Medical Center, Michigan Medicine’s Center for Surgical Training and Research (C-Star) and Department of Learning Health Sciences, and the Procedural Learning and Safety Collaborative (PLSC).
Grio was contacted by the COVID Staffing Project to assist with the redesign of their recently launched website. Their original website was created on WordPress, and was a simple site that had been expanded and edited by various members of the staff.
After speaking to the COVID Staffing Project team, I identified the following goals for the website redesign:
1. Minimize Inconveniences for the COVID Staffing Project Team:
The COVID Staffing Project does not have a website designer on staff, so they rely on various members of the team to keep the website up to date.
To meet this goal, I felt that it was important to keep the website on WordPress so that the team did not have to learn how to use a new interface. I created a custom, professional website on the WordPress platform that the team would be able to continue to use long term.
2. Establish a Consistent and Professional Design Direction:
Because the original site was created with a focus on functionality by medical professionals, researchers, and medical students it was understandably lacking a cohesive design style. My goal, therefore, was to create a design reflective of the intelligent and insightful team behind this project. The tools and information they have provided have proven integral to medical professionals on the ground putting their lives at risk in order to defeat this deadly virus.
The biggest and quickest way to improve the design of the site was to establish a consistent information hierarchy. I began by putting the collaborator names on the top of the homepage, along with the mission statement of the company. Adjacent to the mission statement is the Practical Guide, which will be the first link that people use when they enter the site. Below the Practical Guide, links to the tools available are succinctly ordered, followed by contact information and the newsletter signup. These simple formatting changes make the website more usable and efficient, which in turn allows hospital personnel to more efficiently manage the resources they require.
3. Create an Identity for the Website: The original COVID Staffing Project website was relying on clipart for their logo . As such, it was important to them that we create an identity that represented their organization’s goals and values.
The new logo for the COVID Staffing Project uses the Helvetica typeface in varying weights. “COVID” is written in the thinnest weight to represent the Staffing Project thinning out of COVID cases. The blue background of the logo is carried throughout the webpages, giving them a cohesive identity and is a common color in the medical world.
4. Ensure Resources Remain Active: The primary resource available on the COVID Staffing Project website is a COVID-19 Staffing Needs Calculator. The calculator is loaded on the website in an IFrame (Inline Frame) from another location, and was therefore not part of the redesign. However, as the website was relaunched, it was important to ensure that the new site did not crash the calculator or affect its operational capabilities.
5. Expedite Turnaround Time: It was essential to get the website redesign completed as quickly as possible to ensure that it was available during the peak of the COVID-19 crisis.
To expedite the process, I sidestepped some of the standard intensive Grio quality assessment procedures (desperate times call for desperate measures), and instead relied on ongoing team feedback as the website was built. The homepage was the first page that we launched with the new design. Since the homepage was launched, the support pages have been relaunched on a rolling basis to get the updated website online as quickly as possible.
Website Creation Using Elementor
The initial website for the COVID Staffing Project was created using WordPress, an open-source content management system that allows users to create simple website designs. Because the COVID Staffing Project did not have a staging environment, I cloned the original website using a WordPress plugin, and then reformatted the clone using Elementor.
Elementor is a live frontend editor which allows for unique website customization. Elementor works by taking over the WordPress interface to allow you to manipulate different modules and containers and get more granular control over your website design. I prefer Elementor’s editing system because it is responsive and easy to use, and provides a wide range of customizations.
I also prefer using Elementor because, unlike WordPress, it allows you to see your design in desktop, tablet, and mobile views. Since the COVID Staffing Project website will be primarily accessed by front line healthcare professionals, it is important that their website can be easily managed from any device.
Once the clone website was completed, it was relaunched as the new COVID Staffing Project website. The finished website can be seen at www.covidstaffing.org.
In this crisis, medical professionals are working exhaustively to keep the rest of us safe. Therefore, I was excited when we “nerds” at Grio were able to enhance this resource that assists individuals on the front line who are putting their lives at risk. As this website continues to grow, it is my hope that we can continue to help real people in real time.