In late 2015 I was tasked with creating a "food safety emergency app". This mobile app was going to tell restaurant owners and managers what to do in different food safety emergency situations. For instance, if your restaurant's power goes out, how long can you serve that freshly grilled chicken? What should I do with my food in the freezer to prevent it from thawing quickly? This app was aimed at solving problems like this.
I was given heaps of research material from all over the restaurant industry. In the end, we focused the project on six problem areas:
Boil water notices
body fluid cleanup
Using the mounds and mounds of research, I narrowed the information down into these six areas, and then narrowed the information even further, into a more cohesive amount of material.
I first went with a red color theme for the app. I was thinking "Hey, it's all about emergencies right? The color red definitely shows that." So I began designing with this color in mind. After the first round of mock ups, it was clear that the red was a little too much. This is really where I started to learn how color affects users. While red does tend to show energy or danger, which is what I was trying to go for, I feel like a little goes a long way. Also, the users of the app will already be in a bad situation, do they really need to open up an app that's supposed to help them, and be blasted with the feelings of energy and danger? This made me start to think, what if we used a more calming color, making the user feel safe and reassured instead of adding extra stress. This is where I chose to go with blue. Blue is inherently calming, and tends to show peace, protection, and stability. This made much more sense for a food emergency app.
The first iteration of the app was a little too much blue. For some reason (this was 4 years ago), I had most of the app use a blue background with white text. This is an awful solution because it's super hard to read and doesn't keep the calming feeling that I was going for. Also, putting those green buttons on top of that blue background is an obvious clash.
I originally went for these illustrated icons, from an icon pack, as I wanted the app to have a certain appeal to it. Icons increase readability and recognition while reminding users what section they're in (which is why I chose to incorporate icons the way I did in the ActiveManager project). Along with cleaning up the amount of blue all over the app, replacing the background with a pure white, I decided to use flatter, more modern icons. This would help to clean up the app and make it a little easier on the eyes. All the decisions made on this project had the user in mind. They would most likely only be using EmergiProtect when they are in a stressful situation and they just need to figure out what to do next.
Overall, I'm still pretty happy with EmergiProtect. I would like to update it for larger screens soon. I would also like to improve the "Return Home" icon and add some better animations. But I'm still pretty happy with how it turned out.
You can find it here today.