I knew after presenting my mid-term on “Picture Vegan” that I wanted to continue working on this project, particularly because I have a vegan restaurant in mind and “on hold” for user-testing, and I have quite a few vegan friends that I believe would be happy to try this and give feedback.
A couple days before we had to present our final project ideas in class, an article came out in the New York Times about the popularity and rise of food blogging. This made me feel that my application is timely and has a good chance of being used because it taps into an activity that many diners are already engaging in.
The concept of “Picture Vegan” is to provide diners at participating vegan restaurants an easy way to take photos of the dishes they order and eat with their smart-phones and upload them to a site. At the end of each month, a winner will be drawn from the submissions and the winner will then receive a discount on their next meal.
The purpose of this mobile app is to encourage people to eat at vegan restaurants and to facilitate a deepening of appreciation for vegan food, and healthy eating more broadly.
Below are mock-ups of the app that I created in Mockflow. As you can see, from the main page, users are presented with an option to submit a photo or a video (I decided to add the video option after code was made available to us in class for recording and sending video). Before actually taking a photo or recording a video, I want users to fill out some basic information: the name of the restaurant they are dining at (pull-down menu showing the participating restaurants), the name of the dish they are eating (pull-down menu showing the corresponding restaurant’s menu items), how the dish makes them feel (pull-down menu of adjectives), and a text box for how they want their name to appear on the photo gallery page.
In the process of creating the mock-ups, I decided to add icon buttons at the bottom that will link to screens: an “about us” icon with a pop-up window containing a one-paragraph description of Picture Vegan, an “email” icon to take users to a page where they can send me suggestions, feedback, tech issues and so forth, a “community” icon where users can find out their food-matches, and a “you” icon where users can get stats on their photo submissions, broken down by the categories above (similar to how FourSquare gives users stats).
My “Picture Vegan” app is a Java-based Android project (version 1.6), created in Eclipse. I spent most of the time leading up to the final presentation working on the code for the photo-taking path. Clicking on the “submit photo” button takes the user to the screen asking for details. The drop-down menus in Android are called “spinners” and the choices are placed in an xml file named “arrays.” I also added an EditText field for the user to input their display name. The tricky thing on this screen was to figure out how to capture and “bundle” the user selections and pass those onto the next screen and then to my server. The user gets to the picture-taking screen by clicking on a “take photo” button, which opens up a “CameraView.” The act of taking the picture triggers the creation of the picture file and also the posting of the file and the variables to my server.
I had trouble on the server-side with the PHP script in receiving the variables and mapping them to the appropriate fields in my WordPress blog. The mapping worked with the MMS assignment that I did earlier in the semester, so I still need to figure out the coding glitch. The good thing is that the photos from the camera were successfully uploading to the designated folder on my server.
My goal is to get the photo-posting-to-the-blog-site with the photo details, along with the icon buttons, done as soon as possible this summer so that I can launch a user test. Stay tuned for updates.