PipPop - Exchanging Contact Information Seamlessly

Summary PipPop is an interface that helps people exchange contact information seamlessly in social and professional contexts.

This project was also an opportunity to thoroughly explore the user-centered design process in what we thought was an under-explored domain.

Duration September 2015 - December 2016

Team Members Max Curran, Parv Sondhi and Surendran Subbiah

Responsibilities

  • Created prototypes using Adobe Illustrator, Paper Prototyping and Marvel and led the overall prototyping plans
  • Led team on UX and interaction design best practices
  • Moderated whiteboard discussions to help align design discussions and testing decisions
  • Co-ordinated consistency in UI guidelines and spefications using the iOS Human Interface Guidelines for the final prototype

Problem Statement

We started by seeing how many users continue to use paper/pen, manually dial numbers or exchange business cards to exchange contact info with those they meet in person. Our contextual inquiries at career fairs and reunions showed that business cards were mostly ineffective, wasteful and unrequited. We also investigated why interventions like Bump, Cardflick, Jiffy et al have not become ubiquitous.

Approach

We clustered our findings from the contextial inquiries into similar type of concerns, desires and behaviors. In addition to this we also clustered our findings over space - where the findings happened physically, and over time - when they happened over an interaction timeline. In the latter case, we discovered that users attempted to exchange contacts long after their interaction with someone!

To explore this further, we tested out the waters through a baseline paper prototype. Using a phone allowed us some obvious value-adds - other social networks that users might be a part of already.

We deduced that seamlessness may have been a worry for our users during their in-person experiences. So a hypothesis we tried to validate was - is there value in collecting* contact information without taking your phone off your pocket?

* - At the time, the team were aware of concerns related to user security. However, we wanted to use roleplaying as a way to nip this idea in the bud if we needed to.

To avoid the app collecting everyone's info as the user passes through a room, we designed a filter to collect only those with whom the user has been close to. From a think aloud activity with a handful of users, we enhanced it to include only those with whom the user has spent a more than x minutes with. For the second iteration, we built a mid-fidelity prototype on Marvel for use cases like viewing nearby contacts, and understanding what kind of information is visible to these users and is shared with them. Seeing that having two modes of exchanging contacts is worthy of further exploration, we named this idea PipPop (Phone-in-Pocket, Phone-off-Pocket).

Creating the final prototype

For the final prototype, we conducted a heuristic evaluation with other designers in the class and among ourselves to identify key issues. Key among those were the predicted reactions to something new spanning from delight through embarrassment to awkwardness - particularly in cases where users wanted to exercise the option of not sharing their information. Considering that most of the uncertainty was around the newness of the app, easing the lack of match between system and real world also became an important priority.

To speed up the prototyping process, we created UI resources in Illustrator and used Framer Studio to run through specific use cases. I also created UI specifications, icons and Illustrator templates for others in the team to modify for their own use cases.

Key Decisions + Final Prototype

For situations where the user pulls out her phone to exchange contact info, we designed it to display only the single nearest user rather than 3 contacts. If the phone stays in the pocket, we changed it to a list rather than a potentially overwhelming grid. We based our navigation model on how people verbally remembered a meeting; they start with where they met someone. We also added multiple profiles, allowing user to select a default. Owing to the short timeline, the map view, annotations and attachments were deemed out of scope.

Experiment results

We tested three activities - exchanging contact information face-to-face, requesting contact information later, and understanding how users interpreted icons to understand visibility of their information. We tested with 10 participants (half control, half treatment). Overall, our prototype performed very well compared with our participant's current methods. Both in-pocket and off-pocket interventions received high qualitative ratings and were performed fast. Admittedly, the experiments were limited in scope and likely did not capture all aspects of the user's experience.

Insights and Challenges

Affinity diagramming is typically used to cluster similar notes together. In this problem space however, since the nature of interactions can depend so heavily on the social context as well as are transient and precious, grouping the notes by space and time led us to an entirely unexplored region of user interactions.

To come up with ideas, not only did we play around research methods, but also we modeled a futuristic technology-agnostic scenario in which we imagined a utopian contact exchange scenario. We then extrapolated these ideas backwards to the present day.

Why the paper prototype was extremely crucial to our process was because despite their tangible similarities with business cards, they were effective enough to simulate new tricky technological features and consequently, to provoke security and ethical concerns.

While software like Marvel are extremely useful in building clickable prototypes very quickly, I felt it would have been even better if they had a framework for case-switching through multiple cases. I later stumbled upon Proto.io during my summer startup role which was great for case-switching and using variables!

Instructor feedback

"You took on an extremely difficult problem this semester, and I’m impressed with how far you’ve come, and how much you’ve learned about the problem space. I’m also impressed with how thorough your prototype was, and how much effort you put into making the experiment feel realistic."

- Nick Merrill, Teaching assistant for INFO 213 - User Interface Design and Development, Fall 2015.

Next project

Visualizing Betting v Performance Data for Men's Tennis

Key aspects Designing new visualizations, aiding discovery through data, short turnover time