Paper to Pixel: Prototyping Workshop

I recently facilitated a two-hour workshop about how to prototype on paper and then transitioning those ideas to a phone app experience. It was amazing what everyone came up with in such a short time, from interviewing each other, brainstorming ideas, selecting a direction to wire frame, then linking the images up and sharing among the teams.

The prompt I used was allergies. I had teams of two interview each other using and empathy map to gather insights. The goal is to ask open ended questions about how the interviewee may have experience being with someone that has an allergy, in social situations, or observing interactions in a restaurant. Most of us know of someone or have had an experience to reflect upon that can give us a starting point to build on.

We then all came together to share key insights. These were particular pain points that came up in the interviews. People would write an insight down then post it up on the wall and say it out loud to share with the group. The group quickly identified themes from all the ideas. Once doing this for about ten minutes we began exploring possible solutions that solved some the the leading themes. With only eight people in the workshops we had a large number of insights and then about twenty solution directions to explore.

Once each team selected an idea to build out further they used phone templates to draw a series of wire frames of what the app might do to solve the particular situation. What might the core screen contain and what is the basic navigation. Some focused on a specific feature or set of interaction steps.  I then had teams download the POP by Marvel app which is a simple tool for linking up the images.

They next took pictures of their wire frames, then link them up so that one could click through a sequence as if in a real app. It is a tangible method that allows others to understand your idea and thus give constructive feedback. The fact that it is very low fidelity is also a great way to receive feedback because people understand that it is only an exploration.

This was a quick way to demonstrate that one can generate many of ideas and test them quickly and cheaply. All this took about two hours and all had something to share out at the end. A ton more ideation and refinement needs to go into this, but it is an example of how one can move quickly to create something to share and receive feedback on. It is also just a fun way to spend an afternoon!

Want my slide deck? Check it out at this link.

If you are interested in doing your own prototyping, try these resources:
POP by Marvel https://marvelapp.com/pop/
Balsamic Mockups https://balsamiq.com/
Adobe XD https://www.adobe.com/products/xd.html
Sketch https://www.sketchapp.com/

A big thank you to AIGA WashU Student Group for hosting this workshop.
Intro image of event poster by Lauren Fox.

Interaction Design

IxD

I have taught a class about interaction design for the past few years. It is about making stuff, not history, though we do talk about some brief key moments. Before launching in I ask students to define the term. Here are some definitions they have:

“Interaction design considers the user to be the most important factor. The user is continually considered and consulted throughout the process.” Emma

“Interaction design is a category of design that focuses on the user and looks specifically at improving the interaction between the user and interface, product, environment, most often in the context of digital interfaces.” Elise

“Interaction design is an approach to design that prioritizes a human centered approach to a solution. The result of the design process would be tailored and specific to the users of the design objects, idea or service.” Andrew

“Interaction design is functional and aesthetic design with the goal of the optimal user experience.” Monika

“Interaction design takes usability as its first rule, all decision made take into account the experience of the those who must interact with the work.” Chris

All of these have elements of the definition yet take a more expansive view of interaction design. Some focus on people’s interaction with a computer or technology, but others consider the entire system with the user as a key player in determining success. The Interaction Design Association defines it as:

“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.”

It is a relative young and emerging field from a historical writing standpoint, but much like graphic design, industrial design or illustration there is a long history of work once one really starts looking. What I think is unique about the field is that many see the person at the center of solving the challenge. Much like a Human-Centered Design process, interaction design does the same in really looking at the person(s), their context and the end goals. The solution, be it an interface, device or object, is in the service of the persons. While there may be tangible solutions, there are also intangible ones to consider. In addressing both side I think we come closer to appreciating the complexity of how humans interact with and through designed artifacts and systems. Many times it is exploring the intangible elements of the interface that make the overall experience stronger.

Here is an abbreviated reading list if you are interested in pursuing more ideas and methods.

Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2011). Sketching User Experiences: The Workbook. Amsterdam ; Boston: Morgan Kaufmann.
Hinman, R. (2012). The Mobile Frontier: A Guide for Designing Mobile Experiences. Brooklyn, N.Y: Rosenfeld Media.
Lupton, E. (2014). Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students. New York: Princeton Architectural Press.
Pannafino, J. (2012). Interdisciplinary Interaction Design: A Visual Guide to Basic Theories, Models and Ideas for Thinking and Designing for Interactive Web Design and Digital Device Experiences. Assiduous Publishing.
Pratt, A., & Nunes, J. (2012). Interactive Design: An Introduction to the Theory and Application of User-centered Design. Beverly, MA: Rockport Publishers.
Saffer, D. (2010). Designing for interaction creating innovative applications and devices (2nd ed). Berkeley, CA: New Riders.
Weinschenk, S. (2011). 100 Things Every Designer Needs to Know About People (1 edition). Berkeley, CA: New Riders.

And if you are interested in perusing some great examples, check out the IxDA awards.