Flood iQ2017

Methodologies used:
User Research
Data Visualization
Web Design
User Interface Design

Anthro approached me about a map tool that they were working on that would calculate the future state of sea level rise. I was interested in working on another map product but unlike Gayborhood and Wedding Mapper, I got the chance to work with a full team of developers, engineers, data scientists, researchers, and professors; a chance to play with real data and iterate as much as needed. I led design on this product taking it from its conception to launch.

After being briefed on what data had been already collected by the team, I grabbed screenshots of all the mapping tools available at the time and researched what map APIs companies were using. A lot of the maps seen just had way too much information and a confusing onboarding experience, so we wanted to know first and foremost what the average person knew about flooding and sea level rise and if they were interested in learning more. When you're dealing with forecast models and a lot of data, it can be easy to just put everything in a report or plot charts and just give it to a targeted audience to figure out. What we did instead was conduct user interviews with folks in the Miami area, to find out what information would be useful to them and others around them. We followed up the interviews with an workshop to brainstorm what was possible and eliminate ideas that were not possible for the first version of the product. After the interviews and workshop, I started with a simple interface that included a map and an address bar that would lead to dozens of different concepts.

We conducted a lot of A/B testing and a lot of user interviews. We used the interviews to show the concepts and wires to users to get their feedback. We then selected the most popular and conducted even more A/B testing to figure out how to present the data to users and which was more easier to read & understand.

At the same time the user research was going on, we were also deciding on the initial branding of the product. There was not a name, color palette, nor logo in place; I had to create all of these elements. The name and logo was more of a popularity contest versus the science that went behind the colors. Since we were using the Google Maps API, we had to find four main colors that represented the flood levels and that also could been seen clearly on Google Map's interface that did not conflict with their colors. Hundreds of colors were tested for accessiblity as well.

Now that we had our colors, logo, and data, we moved the prototypes to design. It was important that the mobile experience was simple and that the information could be easily viewed. Out of all the map tools we researched at the time, few were actually responsive.