I am a designer by background, but have been swimming in the deep sea of web development this year, learning as much as I can about how the web works. When given the challenge of designing a single-function, hyper-focused application that solved a problem in the realm of health, I was excited for an opportunity to utilize my dev skills and tap into my knowledge of design. From the outset, this project was intended to focus more on design and design process than on the technical aspects of the product’s implementation (i.e. code). The project is over, for now, and so I would like to share my design process and lessons learned.
Day one. Will Dickey and I, Fresh Tilled Soil’s new apprentices, drew topics from a hat for our first apprentice challenge. I drew health. Really specific, right?
The first couple of days were spent exploring this incredibly broad topic area, trying to identify problem areas that could be in need of a design solution. Design thinking tells us that we should not blindly throw “design” at a given situation and expect to solve a real problem. Rather, identifying problem areas — and whether or not a designer is even needed — must be done by cultivating relationships with real people and asking them what exactly about a given situation is failing them. Good products are not made in silos, but rather in communion with others. So, in addition to my initial white-boarding and mind-mapping, I needed to talk to people outside of our office to get perspective and test my hypotheses.
After breaking down health into multiple topics I decided to focus on occupational health. I know some people who work in Environment, Health and Safety (EHS) at GE Aviation, from whom I was able to gain the aforementioned real-world perspective. It turns out that maintaining a safe work environment is incredibly difficult, especially when your building is 100+ years old, as is the case with GE’s aviation facility in Lynn, MA. During my interviews I discovered that EHS leaders at this site constantly struggle to get workers to wear their personal protective equipment (PPE). There are many reasons why a person would not wear protective equipment during work: uncomfortable gear, lack of gear, spite of the company, lack of safety training, lack of reminders about what PPE is needed for which jobs. The biggest barrier to wearing proper PPE, form the perspective of those I interviewed, is a ‘generally ineffective system of communication’ about what PPE should be worn when. I discovered that some articles of protective equipment have rather technical names and no visual guide to associate that name with what it looks like.
The current method of communicating what PPE is needed for a job is through a Job Safety Analysis (JSA) and Job Plan. These are completed by the EHS management and must be reviewed by the workers before they start a job. I learned that JSAs and Job Plans can be somewhat lengthy and do not have visual references to PPE that could make finding the proper equipment easier. Below is what a typical JSA looks like. This one is blank, but you can imagine how looking at this form could be taxing, especially if it is multiple pages long, and if the person who filled it out did not have good penmanship.
So, workers already expect that they will have to sift through a great deal of information before starting a job. Following B.J. Fogg’s thoughts on “true simplicity” vs. “perceived simplicity,” I knew that I had a chance to at least create a product that would be perceived as simple (at least in comparison to the tedious notes and scribbles of a JSA and Job Plan). So, I began sketching out ideas of how I could quickly and easily communicate what PPE a worker needed for a particular job. I also sketched out different ways that a worker could interact with the equipment manager application, including ways that it could be tied into machine-locking systems and job check-in systems.
Prototypes & Pivots
Based on these sketches I started a rapid prototyping process in order to build a semi-functional product from which I could glean more insight through user testing. The prototype looked something like this:
The basic idea behind this design was to show a high level overview of what areas of the body needed protective equipment. The user would be able to click on one of these beacons to find more information about the PPE needed for that body part. Based on this build, I discovered a few things that influenced my ‘final’ design (i.e. final for the two weeks we were allotted, not actually final.). One observation was that while quickly communicating what PPE is required is one of the goals, requiring a user to drill down to actually see a name or image of the PPE is not significantly improving the existing (JSA) process. This prototype quickly communicates which areas of the body need equipment, although it still requires more steps than necessary to communicate what equipment is needed. Another observation was that the faceless “bathroom man” (i.e. the body shaped figure) creates an impersonal feeling to the application, which might already be a feeling they get from a company as big as GE. So, the big takeaways, or Pivot Points, from this prototype are to be more explicit about the PPE needed for a job, and to make the experience more personal.
With these insights in mind, I went back to the drawing table and came up with the following sketches.
These sketches explore a more personalized user experience and user interface. They do so by using a more detailed illustration of a human face as an out of the box avatar, and by giving the user the ability to change their profile picture to an image of him or herself, further personalizing the experience. Additionally, I sketched the idea of having the PPE overlaid on the profile image, as well as having other PPE images readily viewable. I was going for “this is what you should look like when you perform the [selected] job.” The idea of showing different parts of the body as bigger than others based on how much protective equipment is needed for that body part was briefly explored in these sketches (e.g. the head and hands often have the most protective equipment, and therefore would be bigger). I decided not to take this caricatured approach, but instead, to show the head/facial area of the body in detail, and show the rest of the PPE from the head on down to the feet. So, you can almost imagine a human figure based on the organization of these images/names on the page. Below are some screenshots of the latest prototype.
View upon sign in
Search for job
Find job, click job name, view PPE:
Click thumbnail images for close-view
Search another job
The next possible improvement on this would be to put the more technical equipment name or series and/or model number next to the thumbnail images. The ability to immediately associate a technical product name with its image is important. As of now, the page is rendering all of the job specific information by reading from a JSON file via ajax. So, the product could easily be hooked up to a backend application that renders JSON. I have plans to build this product further, which will include designing and building an administrator interface for basic Job creation, updating, and deleting.