FLOODAR

FloodAR is an AR (Augmented Reality) app that allows residents of coastal communities to visualize flood risk in their neighborhoods. Working with the development team, I was the lead User Interface Designer, creating prototypes on paper and in Sketch, and conducting user testing. It was a joy to work on a project tied to raising awareness about climate change.

Flyer for Capstone presentation

Sprint 1

We structured the app into three different screens you can navigate to through the three icons in the upper right hand corner. The app opens up to the default screen, the camera, which visualizes a preset flood level the user can change. The other two options are a map, to correct location, and a 3D flyover view, to show flooding on a larger scale.

Paper Prototype

Heuristic Evaluation of paper prototype

First user testing notes:

Lack of help/documentation
Meaning of icons unclear
Extra icons above slider seem unnecessary
Having two sliders when viewing past storms is confusing

Sprint 2

Implemented in Sketch, I created a second version of the UI prototype, solving problems noted in the heuristic eval and exploring design options.

Heuristic Evaluation

After the developers set up a basic version of the app, I conducted user testing to pinpoint larger-scale problems we might have missed so we could make bigger changes early on.

Users were given three tasks to complete and asked to use the "think-aloud" method (ie, voice any confusion, questions, things they liked, etc.) that I then took notes on. Their 3 tasks were to 1) adjust the custom water level, 2) scroll through a past storm, and 3) change/correct your location.

User feedback:

Adjustable water level was too hard to find, had to swipe left through many cards displaying past storms to find it
Not enough explanation on how the app works
Gestures for swiping the card up/down is hard to work

Sprint 3

See help screen information here

Sprint 4

After the UI was designed and tested, the final sprint focused on developing a fully functioning app and implementing the UI. Crunched for time, some things were left out, but ultimately achieved the goal of an intuitive interaction and a cohesive look.

Mirina

Garoufalidis

FLOODAR

Flyer for Capstone presentation

Sprint 1

Paper Prototype

Heuristic Evaluation of paper prototype

First user testing notes:

Lack of help/documentation

Meaning of icons unclear

Extra icons above slider seem unnecessary

Having two sliders when viewing past storms is confusing

Sprint 2

Implemented in Sketch, I created a second version of the UI prototype, solving problems noted in the heuristic eval and exploring design options.

Heuristic Evaluation

After the developers set up a basic version of the app, I conducted user testing to pinpoint larger-scale problems we might have missed so we could make bigger changes early on.

Users were given three tasks to complete and asked to use the "think-aloud" method (ie, voice any confusion, questions, things they liked, etc.) that I then took notes on. Their 3 tasks were to 1) adjust the custom water level, 2) scroll through a past storm, and 3) change/correct your location.

User feedback:

Adjustable water level was too hard to find, had to swipe left through many cards displaying past storms to find it

Not enough explanation on how the app works

Gestures for swiping the card up/down is hard to work

Sprint 3

See help screen information here

Sprint 4

After the UI was designed and tested, the final sprint focused on developing a fully functioning app and implementing the UI. Crunched for time, some things were left out, but ultimately achieved the goal of an intuitive interaction and a cohesive look.

FloodAR app demo

mirinagaroufalidis@gmail.com

FLOODAR

Flyer for Capstone presentation

Sprint 1

Paper Prototype

Heuristic Evaluation of paper prototype

First user testing notes:

Lack of help/documentation

Meaning of icons unclear

Extra icons above slider seem unnecessary

Having two sliders when viewing past storms is confusing

Sprint 2

Implemented in Sketch, I created a second version of the UI prototype, solving problems noted in the heuristic eval and exploring design options.

Heuristic Evaluation

After the developers set up a basic version of the app, I conducted user testing to pinpoint larger-scale problems we might have missed so we could make bigger changes early on.

​

Users were given three tasks to complete and asked to use the "think-aloud" method (ie, voice any confusion, questions, things they liked, etc.) that I then took notes on. Their 3 tasks were to 1) adjust the custom water level, 2) scroll through a past storm, and 3) change/correct your location.

​

User feedback:

Adjustable water level was too hard to find, had to swipe left through many cards displaying past storms to find it

Not enough explanation on how the app works

Gestures for swiping the card up/down is hard to work

Sprint 3

See help screen information here

Sprint 4

After the UI was designed and tested, the final sprint focused on developing a fully functioning app and implementing the UI. Crunched for time, some things were left out, but ultimately achieved the goal of an intuitive interaction and a cohesive look.

FloodAR app demo