Sequence of events/interactions:
1. If the user is within 50 meters of Sproul Plaza(UC Berkeley, latitude: N 37.86965 and longitude: W -122.25914) the phone will send a notification to the Toq App with a draw request for a random FSM figure. The Android app is kept open on the phone.
2. The user then goes the Toq app on his watch, which contains the 6 cards installed in the beginning. Each of these cards contain an image of the individual, his/her name, and a symbol/text to draw in the Android application. The install functionality can be used to install the initial 6 deck of cards.
3. Upon clicking on the card the user is asked to draw, the drawing activity in the phone is triggered. The Android app is kept open on the phone or in background.
4. The user will then draw what was asked on the card to the canvas on the phone and upload it to Flickr with tag "cs160fsm"
5. The app then fetches another photo with tag "cs160fsm". The app resizes this photo to the dimensions compatible with the Toq watch and creates a new card.
6. The user now views the newly made card on the Toq watch.
Mobile Application:
Landing page -
Below is the first screen with three buttons and an image background. The first button takes the user to a browser and opens the FSM page. The second and third button are to install/uninstall the app from the watch.
Drawing App -
It was fun building the drawing app.
For the drawing app, I wanted to maximize space and also keep it tablet friendly. Hence, I chose a minimalist design approach to increase white space.
For this app, the user is supposed to draw messages which they would do on the middle of the screen and not on the corners. So, I kept my buttons on the corners.
The top right section has 3 buttons. One for brush size, where the user can choose the size of the brush. The number on the box shows the brush size. The next button works as brush and eraser both. It toggles between the two tools. The last button is the color picker. I used AmbilWarna color picker library to implement this functionality.
On the bottom left is the reload or refresh button. The user is asked to confirm whether he/she wants to clear the canvas. I kept the reload/refresh away from the other tools as someone may keep hitting it again and again when they are using the drawing tools.
Bottom right has the Flickr imagebutton. Again intentionally kept it away from the main drawing tools.
The user can use the main back button on the phone to go back to the first screen.
Toq Card App:
Below are screens from the Toq app.
References:
Section code for Toq, Location, Flickr API
https://code.google.com/p/android-color-picker/ for color picker
Extra credit features:
Color picker
Brush sizes
Minimalist design for the interface - more screen space
Better landing page design with some context of FSM
Using basic heuristics while building the app such as showing feedback to user all the time - brush size, color, eraser/pen status. Asking the user before any major interactions - clearing canvas or saving to flickr etc. Buttons such as clear and save are kept away from drawing tools so that the user doesn't accidentally click on these when they are drawing
Comments