Getting free Starbucks gift card?! Too bad it is only a class project

Citizen science project, the NoiseBucket app makes data collecting easier and quicker.

So, the main idea of the citizen is to make citizens, or non-scientific amateurs, providing information and data needed for scientific research. Here I made the NoiseBucket app to help gathering the noise level in Starbucks store and how people inside of the store feel about this noise level. Scientific researchers can use all this information to do their research, and the users can get free Starbucks gift card when they submit information at enough amounts.

Here is the user interfaces I made for the prototype of NoiseBucket. I made it with the SKETCH app on iOS system, so they are all high fidelity.

Since one of the most important elements of UI design is the interaction design and it’s usability. Besides the Starbucks background picture, the log in UI has the name of this app, a circle for user’s profile picture, e-mail and password frame for log in, login button, and links to “Forget your password?” and “Sign up a new account”. These are all common and necessary information and links on the login UI.

The main UI after logged in

After logged in, users see this main UI, which contains their profile pictures, name, the location they are at right now, buttons for “test noise level now”, the pictures, videos and comments users uploaded before, and geo-tagged pictures from others people. There are also go back button and settings button at the corners.

If the users clicked “test noise level now”, what they see is the testing UI, with loading icon as signal, telling users this test is being done right now. After the test is done by the phone’s hardware, it shows results. For example, it shows here that “70.16 dB at 4147 University Way NE, Seattle, WA”. If the users find the result inaccurate, they can hit “test it again button”. If they find it good enough, they can click “share it” bottom.

After clicking share it on the testing UI, the users will see this UI with the result and a question “on the scale of 1 to 10, how would you rate this noise?”

They can scroll up or scroll down to see different options, from 1 being extremely quiet and 10 being extremely noisy. This feature makes sure that how would people feel about certain level of noise.

They can also click one the “plus” button, adding extra comments, geo-tagged pictures or videos. Or they can simply share it.

When they submit a certain amount of time of noise information, they get this free Starbuck gift card, Woohoo!

This is a video demonstration I made for the NoiseBucket app.

So, in conclusion, I carefully designed the workflow for this app, how would the interaction being easy and clear for the user, and how would the user wanting to continuing using this app. To be honest, I feel it is too bad that nobody made this app for real, otherwise I will totally use it for Starbucks coffee. Rain is coming, horror is coming. Huskies need it.

Also, it is not the first for me to make UIs, which is why I don’t miss the trivial and yet important icons like “going back” or “settings”. However, this is still a prototype. I didn’t conduct any usability research, which leaves the usability of this version of NoiseBucket uncertain.

What I enjoyed of this project is the process of making UIs, all the way from work flow and building them. I had a original work flow on paper, and I modified several times when I was making the user interfaces if I find something is hard to use or hard to be noticed. I am actually surprised how much I love this process. I was working on it for 6 hours straight on Friday, and the whole Saturday. I did not get bored nor lost concentration. I would love to change some small details if I see something not good enough.

Like I mentioned earlier, this type of work is for citizen science. All people, regardless of any scientific experience nor academic background, can be part of this research. Amateurs uses app like this to upload massive information to scientists, enabling them to use these information to conducting research.

So, this is my first project on HCDE 210, user centered design of UIs making of this citizen science app on iOS. I hope you liked it. I also attached a pop-app link. You can use it to see how the whole thing looks like.

pop-app link: https://popapp.in/w/projects/561983d5c2c92d2d6e17de8f/mockups/56198b22c3cb10f247de5608