A6: Mobile Prototype

Tweak the Tweet

The purpose of this assignment is for you to expand your prototyping skills to mobile applications.

You will develop a prototype (medium to high fidelity) of a mobile application for which a design spec has already been produced. This could be a common scenario for a UX practitioner: you were not involved in the design of the application, but have been asked to implement a working prototype based on a specification developed by the design team.

TtT The application you will prototype is called “Tweak the Tweet” (TtT). This is for a system that is part of HCDE Professor Kate Starbird‘s work in crisis research. She studies the “use of social media during crisis events, specifically looking at how the converging audience (aka, the ‘crowd’) can contribute—and is already contributing—to crisis response efforts.”

TtT uses Twitter, in a form of “digital volunteerism,” to gather and direct information during crises to people who can act on it to the benefit of affected people and communities. As you can imagine, Twitter data can be very unstructured and noisy, and TtT is designed to allow digital volunteers to provide information in a form that is more easily and reliably processed and analyzed.

Last year, a group of HCDE students working with Professor Starbird, including Grace Jang, created a design for a mobile application to help volunteers build and send tweets that report crisis information in a structured format.

Documentation for that design can be found here:

Your task is to implement a working prototype of that mobile application. The spec documents the functionality pretty well, showing how all of the screens are linked together, and what actions on each screen cause transitions to other screens or generate other actions.

You should approach implementing your prototype in two phases: interactivity and visual design.

  1. Interactivity: The first step should be to get all of the functionality described in the spec working interactively, but without regard to visual design. Think of this as an interactive wireframe, similar to what you did for the website prototype, except on a mobile device.
  2. Visual Design: Once you have that working to your satisfaction, then you can go back and replace elements of your prototype with graphic elements that are of higher quality and appearance. For this, you can use the graphic elements that Grace provided in her spec (linked above). You can certainly redesign them if you are so inclined, but don’t feel you must do that.

For your prototype, you do not have to implement any external actions, like actually tweeting a message or connecting to Google Maps. But that will make a more effective prototype, so you may if you want to!

To create this prototype, you may choose any tool you wish, as long as what you make can actually run on a mobile phone and implement all of the required functionality. Here are some possibilities, although I don’t guarantee that all of them can satisfy those conditions. Part of your task is to do that analysis and decide which tool you want to use. I imagine there are others as well.

Strictly speaking, the last two are not prototyping, but full-blown development tools. Even if you have the skills to use them and want to, I strongly recommend that you get the experience with the lower fidelity prototyping tools also.

Submit the following:

  • Prototype: the interactive prototype you made.

And for extra credit, should you want to continue working on your video skills:

  • Video Demo: A 60-second (maximum) product demo video that demonstrates the key features of the app.