Disaster Blaster
UI, UX, IA, visual design
Client Overview
The clients are two developers in Silicon Valley, and their product is primarily a service – to provide customized disaster preparedness information for their users. My clients wanted to deliver their information through a web app, which would make it more convenient and possibly more engaging for their users. Users would also receive the information as a hard-copy (not designed by me) as a reference during emergencies, when electricity and internet are not reliable enough to count on for the web app.
The Ask
Take large amounts of content and design an interface to make the content more accessible and engaging to the user.
My Role
I was the sole designer on this project. The team consisted of my two developer clients and me.
Since the clients and I were separated by over 300 miles, I worked remotely and collaborated using Figma for wireframing/prototyping and Slack and phone calls for communication.
Summary
I felt there were potentially many ways to engage the user, but a limitation was that the content was already set. I had to engage as much as I could through the interface.
I brainstormed some ways, such as gamification, as well as did a comparative analysis with other products, such as Duolingo, other disaster preparedness apps, and e-learning web apps. I went down a pretty deep rabbit hole of considering helping the user build a habit of regularly using the app and keeping them motivated, etc. But after discussing these possibilities with the client and mutually deciding we were just aiming for an MVP and that the core element of their business is providing customized plans – and the core element isn’t the app – that it was better for now to keep things simple.
I did a feature prioritization to decide the simplest and most-needed features were to help the user track their own progress. We should divide the content into small chunks so no session ever seems too daunting, and to provide feedback whenever a user completes/reads a task so they feel they are making progress, and also makes it easier to continue where they left off.
I also organized the IA (information architecture), which was needed for the many tasks and bits of information for various disaster scenarios. I decided the content should be organized into specific disasters so the user has something concrete to focus on. Well-known psychological principles tell us instead of thinking “I need to prepare for some disaster”, it’s more useful to have a concrete goal, such as “I need to prepare for an earthquake”. This keeps the tasks much more focused.
Based on those things and some conversations with the client, I created the lo/mid fi wireframes.
I did run a small handful of paper usability tests to make sure the lo/mid-fi wireframes were solid before moving on to hi-fi wireframes, otherwise it’s a lot tougher to have to go back once we start hi-fi, where the aesthetics come in.
To continue the goal of engaging the user, for the hi-fi, I wanted the aesthetics to be guided by some theme.
I originally started with “preparedness” as a theme. I wanted to keep things positive, as opposed to having “disasters” as a theme, which might invoke negative feelings every time the user used the app. However, I felt “preparedness” was much too vague and abstract to try to implement practically.
So I pivoted and thought about preparedness as an adventure, and proposed a few ideas… perhaps a space theme, old west theme, like we’re setting out on an adventure.
The client and I both were drawn toward the space theme. Their tentative name before the theme was “Disaster Blaster”. I felt we could incorporate that, like we’re “blasting off” in a space ship to preparedness, or “blasting away disaster” like blasting away space aliens.
We wanted to keep things playful and the clients really liked things to look “cute”. So I went with a color scheme that I felt was appropriate to those elements, as well as picked/modified icons from flaticon.com that I felt matched our theme. Additionally, I tried to convey more playfulness through rounder elements.