Week 2 Interaction Design Process Blog
The studio themes explored this week were interaction design and prototyping of software applications. Interaction design can be summarized as the practice of designing systems, services, and interactive environments.
Introduction
The question at hand was “how can we enable citizens to help environmental researchers collect useful data for their studies?” Citizen science involves citizens’ (or nonprofessional scientists’) participation in research. This is especially crucial in universal research such as animal census, plant health, and education. The topic my studio peers and I got to focus on was water quality in the Puget Sound area.
Design Consideration
To start out with, it was important to brainstorm a design and determine who would participate in data collection. A few of the questions asked during this process included, ‘who are we designing for this week?’, ‘what are specific projects in these research domains that citizens might collect data for?’, and ‘why might citizens collect data on their phones for a science project?’. Idea generating took place by jotting examples and thoughts down on sticky notes, as can be observed from image above. The first set of sticky notes, for example, shows collection methods varying from pH levels of water to filtering pond water. The last set of notes lists out potential motivators such as coupons, gift cards, or a point system.
My Design
For my project, I chose to compare Puget Sound bottled water with the help of a pH test strip. My target citizen group included shoppers who purchase these particular brands of bottled water, who may be interested in learning what’s in the water they’re drinking. A type of numeric data analysis used in my app was 14 different buttons resembling 14 units on a pH scale. An example of textual information collection included two writing blanks, asking for the location and date of the water bottle purchase. I went a step further and added a mapping feature to my app, consisting of a map on which users can visually show where their water bottles were purchased. The means for navigation consisted of left (back) and right (forward) arrows at the bottom corners of each screen. The incentive or motivation I came up with was sending out gift cards for local grocery stores that carry these types of water bottles, such as PCC. After a certain number of submissions, a user would receive a $5 gift card, with dollar amounts increasing accordingly. This period of idea generating was key in order to identify a target population, relate that group of people to a topic they care for, and design the features associated with the task at hand.
Interaction Flow
Creating an interaction flow is extremely useful in the design of an application. This diagram helps outline the different interactions an application will allow, and visually connect ideas to determine what works. The image below shows my personal interaction flow for this project. User interface screens are demonstrated by squares with accompanying text, and arrows are used to connect the screens in a logical manner. This step of the process can be referred to as a rough draft, with ideas bouncing around the diagram. You can see, for example, that after completing my interaction flow, I went in and added an arrow to a map that I thought would add structure and credibility to the application. I decided that users will be able to click on a map, enlarge it, and select the exact location in which their water bottle was purchased. Overall, it can obviously be concluded that an interaction flow is a helpful tool for visually laying out and connecting ideas.
Marvel Prototype App
The last few steps of the interaction design process involved creating a prototype application for my product, with the help of an app called Marvel. First, user interface screens were illustrated on note cards, roughly the size of smart phones. These screens resembled more polished versions of the interaction flow, with one screen illustrated on each individual card. An example of the ‘home screen’ or main menu for my application can be found below. It is comprised of a hand-drawn layout of my app, with the Puget Sound Bottled Water Testing heading at the top, and options to ‘log in’, ‘sign up’, or learn ‘about’ the application.
A total of 10 user interface screen such as the one above were created, all outlining the procedures on the app in the order one would use them. For example, the following screen demonstrated what would happen if you clicked on the ‘log in’ button, which would ultimately bring you to a screen requesting your username and password. Next, I took photos of each screen and uploaded them to the Marvel app. This app allows you to show interactions between each user interface screen by selection a ‘transition’ area, and being redirected to whichever screen is connected with that transition. This enabled me to go a step further and see more realistically how a user would interact with each screen, as if the app was actually coded and designed to work. Finally, a short video was made, showing me physically using the app I created on my phone, and describing each step of the process.
Reflection and Overall Opinions
I very much enjoyed this studio section and becoming familiar with interaction design. The topic of citizen science allowed for much creativity, with challenging specific limits of water quality in the Puget Sound. I tried to think outside the box and create a fairly unique project that would be meaningful and useful for the target citizen scientists. I did not encounter drastic problems, but sketching out the user interface screens and visualizing how they would work together was definitely a challenge. The Marvel app was extremely straightforward and easy to navigate, which made the prototyping process quite seamless.
Application
The techniques exercised in this project serve as an excellent introduction to interaction design, and sparked my interest for this step of the design process. I am sure that the interaction flow will appear time and time again as I explore HCDE topics, and aid me in organizing my ideas on paper. The Marvel application was a wonderful tool to bring my ideas to life and give me a sense of how the app would actually function. Marvel can certainly be used in the future for all kinds of app designs, webpage layouts, or presentations. I can picture a more advanced, perhaps digitally made design layout for an online clothing store using Marvel. It could show, for example, the progression from a main page of shirts, to selecting a particular shirt, to learning about the details and measurements of the product. The techniques used in this studio session will certain come into play in future designs and creations.