Sprint 1: Interaction Design

Building a prototype app for citizen science in the Puget Sound

Last week, my partners and I were tasked with creating a prototype mobile app for citizen science contributors who would collect data to help monitor the water quality level in the the Puget Sound area.

First Steps

As with all projects, we started by brainstorming potential users. Next we generated ideas for the data our users could possibly collect, the user-interactions they would require, and motivators to keep them coming back to the product — an important design feature that I hadn’t thought about before.

Generated ideas for potential users

After the brainstorming session, I chose to design my mobile application for fishermen who would report water color, pH levels, and fish populations after a day out at sea.

Encouraging Continued Use

As far as incorporating a motivator that would draw the user back to the app, I knew that in order for it to be effective, it had to be a personal appeal to the fisherman’s income since the fisherman’s primary inncentive for catching fish is money. I therefore designed a screen at the end of the fisherman’s interaction with the app that notifies him that his contribution keeps the Puget Sound healthy and fishing sustainable, and thereby puts money in his pocket.

From Interaction Flow to User Interface

I proceeded to map out my ideas in a quick interaction flow sketch:

Interaction flow for my mobile app

Then it was time to draw my user interface screens and build a prototype using an application called POP. POP allows you to take pictures of your user interface sketches and then create transitions between them via touch sensitive areas that I selected on the sketches. Essentially, I used POP to build a functioning prototype of my mobile app: Fellow Fisherman.

Video guide of the Fellow Fisherman mobile app prototype

POP is Great, but there are Limits

Though POP is great way to build a low fidelity prototype, one of the problems I encountered was having to make a lot of sketches of the same screens because with POP, you’re essentially drawing each interaction frame-by-frame. Additionally, a limitation of POP is that it only allows you to create transitions between screens and does not allow you to animate certain features of the screen. So while creating back and forth navigation between screens is simple, it is hard to prototype screen-specific interactions e.g. drop down menus and scrolling screens. In the future, before building my prototype I would probably make a more detailed interaction flow so that drawing the user interface screens can be done quicker and save time when using an app like POP.

Final Thoughts

I enjoyed this project because it allowed me to interact with my design. After using my prototype, I immediately saw improvements that I could make to my original design. For example, I found that having to manually click the “next” button after completing every screen didn’t feel quite intuitive, and would have been better if the screens transitioned automatically once a certain screen was complete. It was very intersting to see how certain improvement ideas only came into light my after seeing my design in action.